/* =====================================================================
   DHEERAN SUPPLY — Premium Pharma ERP Design System
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --c-primary: #0a66c2;
    --c-primary-600: #0958ad;
    --c-primary-50: #eff6fc;
    --c-accent: #16a34a;
    --c-accent-50: #ecfdf5;

    --c-bg: #f5f7fb;
    --c-card: #ffffff;
    --c-text: #0f172a;
    --c-text-2: #334155;
    --c-muted: #64748b;
    --c-border: #e6e8ee;
    --c-border-soft: #eef0f4;
    --c-soft: #f0f4f9;

    --r-sm: 8px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 18px;
    --r-2xl: 22px;

    --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, .05), 0 1px 2px rgba(15, 23, 42, .03);
    --shadow-md: 0 4px 14px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
    --shadow-lg: 0 10px 28px rgba(15, 23, 42, .08), 0 2px 6px rgba(15, 23, 42, .04);
    --shadow-xl: 0 22px 48px rgba(15, 23, 42, .12);

    --t-fast: .14s cubic-bezier(.4, 0, .2, 1);
    --t-med:  .22s cubic-bezier(.4, 0, .2, 1);
    --t-slow: .35s cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--c-text);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

a { color: var(--c-primary); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--c-primary-600); }

h1, h2, h3, h4 { margin: 0 0 8px; font-weight: 700; letter-spacing: -.018em; color: var(--c-text); }
h1 { font-size: 22px; line-height: 1.25; }
h2 { font-size: 17px; line-height: 1.3; }
h3 { font-size: 15px; line-height: 1.35; }
h4 { font-size: 13px; }

.muted { color: var(--c-muted); }
.small { font-size: 12px; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 18px; }
.row { display: flex; gap: 8px; align-items: center; }
.row .grow { flex: 1; }
.mt { margin-top: 14px; }
.r { text-align: right; }
.pos { color: #059669; }
.neg { color: #dc2626; }

/* ── Alerts ─────────────────────────────────────────────────────── */
.alert {
    padding: 11px 14px;
    border-radius: var(--r-md);
    margin: 12px 0;
    font-size: 13px;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    gap: 8px;
}
.alert.ok  { background: #f0fdf4; color: #065f46; border-color: #bbf7d0; }
.alert.err { background: #fef2f2; color: #991b1b; border-color: #fecaca; }

/* ── Buttons ────────────────────────────────────────────────────── */
.btn-primary, button.btn-primary {
    background: var(--c-primary);
    color: #fff !important;
    border: 0;
    padding: 9px 16px;
    border-radius: var(--r-md);
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
    box-shadow: 0 1px 2px rgba(10, 102, 194, .25);
    letter-spacing: -.01em;
}
.btn-primary:hover { background: var(--c-primary-600); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(10, 102, 194, .3); text-decoration: none; }
.btn-primary:active { transform: translateY(0); }
.btn-primary[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

.btn-success {
    background: var(--c-accent);
    color: #fff;
    border: 0;
    padding: 9px 16px;
    border-radius: var(--r-md);
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
    transition: var(--t-fast);
}
.btn-success:hover { filter: brightness(1.06); }

.btn-ghost {
    background: #fff;
    color: var(--c-text-2);
    border: 1px solid var(--c-border);
    padding: 8px 14px;
    border-radius: var(--r-md);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    transition: var(--t-fast);
}
.btn-ghost:hover { background: var(--c-soft); border-color: #cbd5e1; }

.btn-primary.small, .btn-ghost.small, .btn-elite-primary.small, .btn-elite-ghost.small {
    padding: 5px 11px;
    font-size: 12px;
    border-radius: 7px;
}

/* Elite buttons (premium variants used on dashboard) */
.btn-elite-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, var(--c-primary), #1d8cf8);
    color: #fff !important;
    border: 0;
    padding: 9px 16px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    transition: var(--t-med);
    box-shadow: 0 2px 8px rgba(10, 102, 194, .25);
    letter-spacing: -.01em;
    text-decoration: none;
}
.btn-elite-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(10, 102, 194, .35); color: #fff !important; text-decoration: none; }
.btn-elite-primary:active { transform: translateY(0); }
.btn-elite-primary[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

.btn-elite-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: var(--c-text-2);
    border: 1px solid var(--c-border);
    padding: 8px 14px;
    border-radius: 10px;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    transition: var(--t-fast);
    text-decoration: none;
}
.btn-elite-ghost:hover { border-color: var(--c-primary); color: var(--c-primary); text-decoration: none; }

/* ── Forms ──────────────────────────────────────────────────────── */
.form input, .form select, .form textarea, input, select, textarea {
    font: inherit;
    padding: 9px 12px;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    background: #fff;
    width: 100%;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
    color: var(--c-text);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(10, 102, 194, .14);
}
.form label { display: flex; flex-direction: column; font-size: 12px; color: var(--c-text-2); gap: 4px; margin-bottom: 10px; font-weight: 500; }
.form label input, .form label select, .form label textarea { color: var(--c-text); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.full { grid-column: 1 / -1; }

.filters, .filter-bar {
    display: flex;
    gap: 10px;
    align-items: end;
    flex-wrap: wrap;
    margin: 12px 0;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
}
.filters input, .filters select, .filter-bar input, .filter-bar select { width: auto; min-width: 160px; }

/* ── Cards ──────────────────────────────────────────────────────── */
.card {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 16px;
    margin: 10px 0;
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--t-fast), border-color var(--t-fast);
}
.card.link:hover { border-color: var(--c-primary); box-shadow: var(--shadow-md); }
.card-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.inv-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
@media (max-width: 560px) {
    .card-h { flex-direction: column; align-items: stretch; }
    .card-h h1 { font-size: 20px; }
    .inv-actions { justify-content: flex-start; }
    .inv-actions > a, .inv-actions > .btn-ghost, .inv-actions > .btn-primary { flex: 1 1 auto; text-align: center; }
    .inv-actions > .pill { flex-basis: 100%; }
}

/* ── Badges / pills ─────────────────────────────────────────────── */
.badge {
    display: inline-block;
    padding: 2px 9px;
    background: var(--c-primary-50);
    color: var(--c-primary);
    border-radius: 99px;
    font-size: 11px;
    font-weight: 600;
}
.pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 600;
    background: #eef2f7;
    color: #475569;
    text-transform: capitalize;
    letter-spacing: .01em;
}
.pill.placed, .pill.unpaid, .pill.pending { background: #fff7ed; color: #9a3412; }
.pill.approved, .pill.partial { background: #eef2ff; color: #3730a3; }
.pill.invoiced, .pill.paid, .pill.success, .pill.active { background: #ecfdf5; color: #065f46; }
.pill.cancelled, .pill.blocked, .pill.failed, .pill.overdue { background: #fef2f2; color: #991b1b; }
.pill.dispatched, .pill.completed { background: #e0f2fe; color: #075985; }

/* ── Tables ─────────────────────────────────────────────────────── */
.t {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.t th, .t td { padding: 9px 12px; border-bottom: 1px solid var(--c-border-soft); text-align: left; vertical-align: top; }
.t th { background: #f8fafc; font-weight: 600; color: var(--c-text-2); font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; }
.t tfoot td { background: #fafafa; font-weight: 600; }
.t.striped tbody tr:nth-child(even) { background: #fafbfc; }
.t.compact th, .t.compact td { padding: 6px 8px; font-size: 12px; }

/* Admin products: keep money columns (MRP/Rate/Margin/GST/Stock) visible by
   dropping low-priority columns first on smaller screens. Column order:
   1 img · 2 Name · 3 Brand · 4 Company · 5 HSN · 6 Composition · 7 Pack ·
   8 MRP · 9 Rate · 10 Margin · 11 GST · 12 Stock · 13 Expiry · 14 Actions */
@media (max-width: 1280px) {
    .t-prod th:nth-child(5), .t-prod td:nth-child(5),
    .t-prod th:nth-child(6), .t-prod td:nth-child(6) { display: none; }
}
@media (max-width: 1040px) {
    .t-prod th:nth-child(3), .t-prod td:nth-child(3),
    .t-prod th:nth-child(4), .t-prod td:nth-child(4) { display: none; }
}
@media (max-width: 860px) {
    .t-prod th:nth-child(7), .t-prod td:nth-child(7),
    .t-prod th:nth-child(13), .t-prod td:nth-child(13) { display: none; }
}

/* Premium table */
.elite-table-card {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin-top: 14px;
}
.t-elite {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.t-elite th {
    background: #f8fafc;
    font-weight: 600;
    color: var(--c-text-2);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: left;
    padding: 11px 14px;
    border-bottom: 1px solid var(--c-border);
}
.t-elite th.r { text-align: right; }
.t-elite td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--c-border-soft);
    color: var(--c-text);
    transition: background var(--t-fast);
}
.t-elite td.r { text-align: right; }
.t-elite tbody tr:last-child td { border-bottom: none; }
.t-elite tbody tr { cursor: pointer; transition: background var(--t-fast); }
.t-elite tbody tr:hover { background: #f8fafc; }

/* ── KPIs (legacy) ─────────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.kpi {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 12px 14px;
    box-shadow: var(--shadow-xs);
}
.kpi span { display: block; color: var(--c-muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.kpi b { display: block; font-size: 19px; margin-top: 4px; letter-spacing: -.01em; }

/* ── Public (guest) header ─────────────────────────────────────── */
.public .topbar { background: rgba(255,255,255,.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--c-border); position: sticky; top: 0; z-index: 100; }
.nav { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; }
.brand { display: inline-flex; gap: 9px; align-items: center; font-weight: 800; color: var(--c-primary); font-size: 15px; letter-spacing: -.01em; }
.brand .dot { width: 9px; height: 9px; background: var(--c-accent); border-radius: 50%; display: inline-block; }
.links a { margin-left: 16px; color: var(--c-text-2); font-weight: 500; font-size: 13px; }
.links a:hover { color: var(--c-primary); }
.nav-hamburger { display: none; background: none; border: 0; padding: 6px; cursor: pointer; }
.nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--c-text); margin: 4px 0; border-radius: 2px; }

@media (max-width: 760px) {
    .nav-hamburger { display: block; }
    .links { display: none !important; }
}

/* ── Public mobile drawer (slides from right) ─────────────────────── */
.pub-drawer-overlay { position: fixed; inset: 0; background: rgba(2, 6, 23, .5); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; z-index: 1200; }
.pub-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 86%; max-width: 340px;
    background: #fff;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: -12px 0 40px rgba(2, 6, 23, .22);
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    z-index: 1300;
    display: flex; flex-direction: column;
}
body.nav-open .pub-drawer { transform: translateX(0); }
body.nav-open .pub-drawer-overlay { opacity: 1; visibility: visible; }
.pub-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 16px; border-bottom: 1px solid #eef2f7; }
.pub-drawer-logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--c-primary); font-size: 16px; text-decoration: none; }
.pub-drawer-logo img { height: 30px; }
.pub-drawer-dot { width: 9px; height: 9px; background: var(--c-accent); border-radius: 50%; display: inline-block; }
.pub-drawer-close { background: #f1f5f9; border: 0; width: 34px; height: 34px; border-radius: 10px; font-size: 24px; line-height: 1; color: #334155; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.pub-drawer-close:hover { background: #e2e8f0; }
.pub-drawer-menu { flex: 1; overflow-y: auto; padding: 14px 14px; display: flex; flex-direction: column; gap: 2px; }
.pub-drawer-menu a { display: flex; align-items: center; gap: 13px; padding: 13px 14px; border-radius: 12px; color: #1e293b; font-weight: 600; font-size: 15px; text-decoration: none; transition: background .15s, color .15s; }
.pub-drawer-menu a:hover { background: #f0f9ff; color: var(--c-primary); }
.pdm-ico { font-size: 18px; width: 24px; text-align: center; flex-shrink: 0; }
.pub-drawer-divider { height: 1px; background: #eef2f7; margin: 10px 6px; }
.pub-drawer-cta { padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #eef2f7; }
.pub-drawer-browse {
    display: block; text-align: center;
    padding: 14px 18px; border-radius: 16px;
    background: linear-gradient(135deg, #00ff66, #2196f3);
    color: #fff; font-weight: 800; font-size: 15px; text-decoration: none;
    box-shadow: 0 8px 22px rgba(33, 150, 243, .32);
    transition: transform .15s, box-shadow .15s;
}
.pub-drawer-browse:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(33, 150, 243, .42); }
@media (min-width: 761px) {
    .pub-drawer, .pub-drawer-overlay { display: none !important; }
}

/* Hero (legacy/guest) */
.hero { background: linear-gradient(135deg, #ecf3fb 0%, #f6fdf9 100%); padding: 56px 0; }
.hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 30px; align-items: center; }
.hero h1 { font-size: 36px; margin: 6px 0; }
.eyebrow { color: var(--c-primary); font-weight: 600; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }
.cta { display: flex; gap: 10px; margin-top: 16px; }

/* Hero slider */
.hero-slider { position: relative; height: 380px; overflow: hidden; }
.hs-track { position: relative; height: 100%; }
.hs-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1s ease; display: flex; align-items: center; padding: 0 48px; }
.hs-slide.active { opacity: 1; }
.hs-slide.default { background: linear-gradient(135deg, #ecf3fb 0%, #f6fdf9 100%); }
.hs-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.35), transparent 60%); }
.hs-caption { position: relative; color: #fff; max-width: 600px; }
.hs-slide.default .hs-caption { color: var(--c-text); }
.hs-caption h2 { font-size: 32px; margin: 8px 0; color: inherit; }
.hs-caption p { font-size: 15px; opacity: .95; }
.hs-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.9); border: none; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-size: 20px; box-shadow: var(--shadow-md); transition: var(--t-fast); }
.hs-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.hs-arrow.prev { left: 18px; }
.hs-arrow.next { right: 18px; }
.hs-dots { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.hs-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5); border: none; cursor: pointer; transition: var(--t-fast); }
.hs-dot.active { background: #fff; width: 22px; border-radius: 4px; }

.section { padding: 32px 0; }

.cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.cat-card {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 16px;
    text-align: center;
    font-weight: 600;
    color: var(--c-text-2);
    transition: var(--t-fast);
    text-decoration: none;
}
.cat-card:hover { border-color: var(--c-primary); color: var(--c-primary); transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; }
.cat-count { color: var(--c-muted); font-size: 11px; font-weight: 500; margin-left: 4px; }
.cat-card-img { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; }
.cat-thumb { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: #f3f4f6; display: flex; align-items: center; justify-content: center; }
.cat-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cat-card-img .cat-label { font-size: 13px; line-height: 1.3; }

.prods { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.prod {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 14px;
    font-size: 12.5px;
    transition: var(--t-fast);
}
.prod:hover { border-color: var(--c-primary); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.p-name { font-weight: 700; font-size: 13px; }
.p-meta { color: var(--c-muted); min-height: 32px; margin: 4px 0; line-height: 1.4; font-size: 12px; }
.p-price { color: var(--c-primary); font-weight: 700; font-size: 13px; }
.p-price.sale { color: var(--c-accent); margin-left: 8px; }

.cta-section .cta-card {
    background: linear-gradient(120deg, var(--c-primary), var(--c-accent));
    color: #fff;
    padding: 30px;
    border-radius: var(--r-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    box-shadow: var(--shadow-lg);
}
.cta-section .cta-card h3 { color: #fff; font-size: 19px; }
.cta-section .btn-primary { background: #fff; color: var(--c-primary); }
.cta-section .btn-primary:hover { background: #fff; }

/* ── Footer ─────────────────────────────────────────────────────── */
.footer { background: #0b1220; color: #9ca3af; padding: 36px 0 18px; margin-top: 50px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 24px; padding-bottom: 18px; }
.footer h4 { color: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.footer a { color: #cbd5e1; }
.footer a:hover { color: #fff; }

@media (max-width: 760px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Announcement bar */
.ann .ann-row { padding: 6px 0; border-bottom: 1px dashed #d1d5db; font-size: 12px; }
.ann-bar { background: linear-gradient(90deg, #fffbeb, #fef3c7); border-bottom: 1px solid #fde68a; padding: 8px 0; }
.ann-bar .wrap { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: #78350f; }
.ann-item.level-warning { color: #b91c1c; font-weight: 500; }
.ann-item.level-offer { color: #065f46; font-weight: 500; }

/* ── Auth ───────────────────────────────────────────────────────── */
.auth-bg {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(at top right, #dbeafe 0%, transparent 40%),
                radial-gradient(at bottom left, #d1fae5 0%, transparent 40%),
                linear-gradient(135deg, #f0f9ff, #f5fffa);
    padding: 24px;
    margin: 0;
}
.auth-card {
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 22px;
    padding: 36px 32px;
    width: 100%;
    max-width: 460px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .1), 0 0 0 1px rgba(255,255,255,.5) inset;
}
.auth-card h2 { font-size: 22px; }

/* ═══════════════════════════════════════════════════════════════════════
   CUSTOMER LAYOUT — Sticky header + mobile bottom nav
   ═══════════════════════════════════════════════════════════════════════ */

body.customer-layout { background: var(--c-bg); padding-bottom: 0; }
/* Mobile: clear the fixed bottom nav by extending the FOOTER (no body padding,
   which would leave a white strip below the footer). */
@media (max-width: 720px) {
    body.customer-layout .acc-footer { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* Site header */
.site-header {
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--c-border);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .03), 0 4px 16px rgba(15, 23, 42, .03);
}
.site-header-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 22px;
    height: 60px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.sh-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    flex-shrink: 0;
    margin-right: 6px;
    padding: 4px 0;
}
.sh-dot {
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, var(--c-accent), #10b981);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .15);
    flex-shrink: 0;
}
.sh-brand-name {
    font-weight: 800;
    font-size: 15.5px;
    color: var(--c-primary);
    white-space: nowrap;
    letter-spacing: -.02em;
}
.sh-brand:hover { text-decoration: none; }

.sh-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 8px;
}
.sh-nav::-webkit-scrollbar { display: none; }
.sh-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--c-text-2);
    text-decoration: none;
    white-space: nowrap;
    font-weight: 500;
    transition: background var(--t-fast), color var(--t-fast);
    line-height: 1;
}
.sh-link:hover { background: var(--c-soft); color: var(--c-primary); text-decoration: none; }
.sh-link.active { background: var(--c-primary-50); color: var(--c-primary); font-weight: 600; }
.sh-cta {
    background: linear-gradient(135deg, var(--c-primary), #1d8cf8);
    color: #fff !important;
    font-weight: 600;
    margin-left: 4px;
    padding: 8px 14px;
    box-shadow: 0 2px 8px rgba(10, 102, 194, .25);
}
.sh-cta:hover, .sh-cta.active {
    background: linear-gradient(135deg, var(--c-primary-600), #1681f0) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(10, 102, 194, .35);
}

/* Icon button (notifications) */
.sh-icon-btn {
    position: relative;
    background: var(--c-soft);
    border: 1px solid transparent;
    border-radius: 9px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--c-text-2);
    transition: var(--t-fast);
    padding: 0;
}
.sh-icon-btn:hover { background: var(--c-primary-50); color: var(--c-primary); border-color: var(--c-primary-50); }
.sh-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    background: #ef4444;
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 99px;
    min-width: 16px;
    line-height: 1.3;
    border: 2px solid #fff;
}

.sh-user {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-left: auto;
}
.sh-user-info { text-align: right; line-height: 1.25; padding-right: 2px; }
.sh-user-name {
    display: block;
    font-weight: 600;
    font-size: 12.5px;
    color: var(--c-text);
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -.01em;
}
.sh-balance { display: block; font-size: 11px; color: var(--c-muted); font-weight: 500; }
.sh-logout {
    background: #fff;
    color: var(--c-text-2);
    border: 1px solid var(--c-border);
    padding: 6px 13px;
    border-radius: 8px;
    font-size: 12.5px;
    text-decoration: none;
    white-space: nowrap;
    font-weight: 500;
    transition: var(--t-fast);
}
.sh-logout:hover { background: #fef2f2; color: #dc2626; border-color: #fecaca; text-decoration: none; }

@media (max-width: 720px) {
    .sh-nav { display: none; }
    .sh-user-info { display: none; }
    .sh-logout { display: none; }
    .site-header-inner { padding: 0 16px; }
    .sh-brand-name { font-size: 14.5px; }
}

.site-main { padding-bottom: 24px; }

/* ── Mobile bottom navigation ───────────────────────────────────── */
.mob-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid var(--c-border-soft);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -6px 28px rgba(15, 23, 42, .08);
    padding: 6px 0 env(safe-area-inset-bottom, 0);
    justify-content: space-around;
    align-items: center;
    height: 68px;
}
@media (max-width: 720px) { .mob-nav { display: flex; } }

.mob-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1;
    padding: 6px 4px;
    color: #94a3b8;
    font-size: 10.5px;
    font-weight: 600;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    transition: color var(--t-fast);
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    letter-spacing: -.005em;
}
.mob-item:hover, .mob-item.active { color: var(--c-primary); text-decoration: none; }
.mob-item.active svg { stroke: var(--c-primary); transform: translateY(-2px); }
.mob-item svg { transition: transform var(--t-med); }

.mob-cta {
    background: linear-gradient(135deg, var(--c-primary), #1d8cf8);
    color: #fff !important;
    border-radius: 14px;
    margin: 6px 6px;
    padding: 9px 8px;
    box-shadow: 0 6px 16px rgba(10, 102, 194, .35);
    max-width: 86px;
    position: relative;
    top: -8px;
}
.mob-cta svg { stroke: #fff !important; }
.mob-cta:hover svg, .mob-cta.active svg { transform: none; }
.mob-cta span { font-size: 10px; }

/* ── Premium mobile drawer (slides from right) ──────────────────── */
.drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    z-index: 300;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.drawer-overlay.open { display: block; animation: du-fade-in .25s ease; }
@keyframes du-fade-in { from { opacity: 0; } to { opacity: 1; } }

.app-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 86%;
    max-width: 340px;
    z-index: 400;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: -16px 0 50px rgba(15, 23, 42, .22);
    transform: translateX(100%);
    transition: transform .38s cubic-bezier(.34, 1.12, .64, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom, 16px);
}
.app-drawer.open { transform: translateX(0); }

.drawer-header {
    position: relative;
    background: linear-gradient(140deg, var(--c-primary) 0%, #1d8cf8 55%, #2563eb 100%);
    color: #fff;
    padding: 22px 20px 18px;
    border-radius: 0 0 22px 22px;
}
.drawer-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.drawer-user { display: flex; align-items: center; gap: 14px; }
.drawer-avatar { width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; background: rgba(255, 255, 255, .22); border: 2px solid rgba(255, 255, 255, .4); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 22px; }
.drawer-user-info { min-width: 0; }
.drawer-name { display: block; font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer-code { font-size: 12px; color: rgba(255, 255, 255, .85); font-weight: 600; }
.drawer-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.drawer-stat { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px; padding: 9px 12px; }
.drawer-stat-label { display: block; font-size: 11px; color: rgba(255, 255, 255, .8); font-weight: 600; }
.drawer-stat-val { font-size: 17px; font-weight: 900; }

.drawer-menu { padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 2px; }
.drawer-menu-sm { padding-top: 4px; }
.drawer-menu-sm .drawer-link { padding: 10px 14px; font-size: 14px; font-weight: 500; }
.drawer-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--c-text);
    text-decoration: none;
    transition: background var(--t-fast), color var(--t-fast);
    -webkit-tap-highlight-color: transparent;
}
.drawer-link .dm-ico { font-size: 18px; width: 24px; text-align: center; flex-shrink: 0; }
.drawer-link:hover { background: #f1f5f9; text-decoration: none; }
.drawer-link.active { background: linear-gradient(135deg, rgba(10, 102, 194, .12), rgba(29, 140, 248, .1)); color: var(--c-primary); }

.drawer-section-title { padding: 12px 22px 8px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--c-muted); }
.drawer-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px 8px; }
.dq-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid var(--c-border-soft);
    color: var(--c-text);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 700;
    transition: transform .15s, box-shadow .15s;
}
.dq-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15, 23, 42, .1); text-decoration: none; }
.dq-card .dq-ico { font-size: 22px; }

.drawer-footer { margin-top: auto; padding: 14px 16px 18px; }
.drawer-logout {
    display: block;
    text-align: center;
    padding: 14px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff !important;
    border-radius: 14px;
    font-weight: 800;
    font-size: 15px;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(220, 38, 38, .28);
    transition: transform .15s, box-shadow .15s;
}
.drawer-logout:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(220, 38, 38, .38); text-decoration: none; }

@media (min-width: 481px) { .app-drawer { width: 380px; } }

/* ── Mobile app-like New Order mode (hide chrome on /order/new) ──── */
@media (max-width: 720px) {
    body.order-mode .ann-bar-top,
    body.order-mode .site-header,
    body.order-mode .acc-footer { display: none !important; }
    body.order-mode .site-main { min-height: 100vh; padding-bottom: 0; }
    body.order-mode .order-pro-h { position: sticky; top: 0; z-index: 50; background: #fff; margin: 0; padding: 12px 4px; border-bottom: 1px solid var(--c-border-soft); }
    body.order-mode .order-pro-h .dash-eyebrow,
    body.order-mode .order-pro-h p { display: none; }
    body.order-mode .order-pro-h h1 { font-size: 19px; }
}

/* ── Toast ─────────────────────────────────────────────────────── */
#toast-container { position: fixed; top: 18px; right: 18px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast {
    background: #0f172a;
    color: #fff;
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 500;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .25);
    opacity: 0;
    transform: translateX(20px);
    transition: opacity var(--t-med), transform var(--t-med);
    max-width: 340px;
    pointer-events: auto;
    border: 1px solid rgba(255, 255, 255, .08);
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast.hide { opacity: 0; transform: translateX(20px); }
.toast-ok { background: linear-gradient(135deg, #065f46, #047857); }
.toast-error { background: linear-gradient(135deg, #991b1b, #b91c1c); }

@media (max-width: 720px) {
    #toast-container { top: 12px; right: 12px; left: 12px; }
    .toast { max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   DASHBOARD / HOMEPAGE FOR LOGGED-IN CUSTOMER
   ═══════════════════════════════════════════════════════════════════════ */

.dash-hero {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-bottom: 1px solid var(--c-border-soft);
    padding: 26px 0 22px;
}
.dash-hero-inner { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 14px; }
.dash-eyebrow { color: var(--c-primary); font-weight: 700; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; display: block; margin-bottom: 4px; }
.dash-title { font-size: 24px; margin: 0; letter-spacing: -.025em; line-height: 1.2; }
.dash-sub { color: var(--c-muted); margin: 6px 0 0; font-size: 13.5px; }

/* KPI stats grid */
.dash-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 18px;
}
.kpi-card {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--shadow-xs);
    transition: var(--t-fast);
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.kpi-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kpi-body { flex: 1; min-width: 0; }
.kpi-label { display: block; font-size: 11px; color: var(--c-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.kpi-value { display: block; font-size: 20px; font-weight: 700; margin-top: 2px; letter-spacing: -.02em; color: var(--c-text); }
.kpi-value.neg { color: #dc2626; }

/* Premium search card on dashboard */
.dash-search-wrap { position: relative; margin-top: 18px; }
.dash-search-card {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 14px;
    padding: 6px 6px 6px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--shadow-sm);
    transition: var(--t-fast);
}
.dash-search-card:focus-within { border-color: var(--c-primary); box-shadow: 0 0 0 4px rgba(10, 102, 194, .12); }
.dss-icon { flex-shrink: 0; }
.dash-search {
    border: none !important;
    background: transparent !important;
    padding: 10px 4px !important;
    font-size: 14.5px;
    flex: 1;
    min-width: 0;
}
.dash-search:focus { outline: none; box-shadow: none !important; }
.dss-cta {
    background: var(--c-primary-50);
    color: var(--c-primary);
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: var(--t-fast);
}
.dss-cta:hover { background: var(--c-primary); color: #fff; text-decoration: none; }
@media (max-width: 600px) { .dss-cta { display: none; } }

/* Dashboard grid */
.dash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 18px;
}
@media (max-width: 800px) { .dash-grid { grid-template-columns: 1fr; } }

.dash-card {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 16px 18px;
    box-shadow: var(--shadow-xs);
}
.dash-card-h, .dash-section-h {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.dash-card-h h3, .dash-section-h h3 { margin: 0; font-size: 14.5px; letter-spacing: -.01em; }
.dash-link { font-size: 12px; color: var(--c-primary); font-weight: 600; text-decoration: none; }
.dash-link:hover { color: var(--c-primary-600); }

.dash-list { display: flex; flex-direction: column; gap: 2px; }
.dash-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--c-text);
    transition: background var(--t-fast);
    gap: 12px;
}
.dash-row:hover { background: #f8fafc; text-decoration: none; }
.dash-row b { font-size: 13px; }
.dash-row-meta { font-size: 11.5px; color: var(--c-muted); margin-top: 2px; }
.dash-row-end { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.dash-amt { font-size: 13.5px; font-weight: 700; color: var(--c-text); }
.dash-amt.neg { color: #dc2626; }

.dash-empty {
    text-align: center;
    padding: 26px 18px;
    color: var(--c-muted);
}
.dash-empty-ico { font-size: 32px; margin-bottom: 6px; }
.dash-empty p { margin: 4px 0 10px; color: var(--c-text-2); font-weight: 500; }

/* Offer strip elite */
.offer-strip-elite { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.offer-tile {
    position: relative;
    flex: 0 0 auto;
    width: 240px;
    height: 110px;
    background-color: #e0e7ff;
    background-size: cover;
    background-position: center;
    border-radius: var(--r-lg);
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    transition: var(--t-fast);
    box-shadow: var(--shadow-sm);
}
.offer-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: #fff; text-decoration: none; }
.offer-tile-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.7)); }
.offer-tile-body { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 12px 14px; }
.offer-tile-body b { font-size: 14px; }
.offer-tile-body span { font-size: 11.5px; opacity: .9; }

/* Featured grid elite */
.feat-grid-elite { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.feat-tile {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    transition: var(--t-fast);
}
.feat-tile:hover { border-color: var(--c-primary); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.feat-tile-body { flex: 1; min-width: 0; }
.feat-tile-name { font-weight: 700; font-size: 13px; color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feat-tile-meta { color: var(--c-muted); font-size: 11.5px; margin: 2px 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feat-tile-price { font-size: 12px; }
.feat-tile-add {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--c-primary-50);
    color: var(--c-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    transition: var(--t-fast);
}
.feat-tile-add:hover { background: var(--c-primary); color: #fff; transform: scale(1.05); text-decoration: none; }

/* ═══════════════════════════════════════════════════════════════════════
   ACCOUNT PAGES — Page header + premium tables + empty states
   ═══════════════════════════════════════════════════════════════════════ */

.site-main > * { padding-left: 18px; padding-right: 18px; }
.site-main > .dash-hero,
.site-main > .ann-bar { padding-left: 0; padding-right: 0; }
.site-main > .wrap { padding-left: 18px; padding-right: 18px; max-width: 1240px; margin: 0 auto; padding-bottom: 20px;}

.page-h {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 26px 0 18px;
    max-width: 1240px;
    margin: 0 auto;
    flex-wrap: wrap;
}
.page-h h1 { margin: 0; font-size: 22px; letter-spacing: -.02em; }

/* Empty state */
.elite-empty {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    padding: 48px 24px;
    text-align: center;
    box-shadow: var(--shadow-xs);
    max-width: 1240px;
    margin: 14px auto 0;
}
.elite-empty-ico { font-size: 48px; margin-bottom: 8px; opacity: .9; }
.elite-empty h3 { margin: 8px 0 6px; font-size: 17px; }
.elite-empty p { color: var(--c-muted); margin: 0 0 18px; font-size: 13.5px; }

/* Reward balance pill */
.reward-bal {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    background: #fdf2f8;
    color: #be185d;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid #fce7f3;
}
.reward-bal b { color: #db2777; font-weight: 800; }
.reward-bal span { color: var(--c-muted); font-weight: 500; }

/* Gift store grid */
.gift-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.gift-tile {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 16px;
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: var(--t-fast);
}
.gift-tile:hover { border-color: var(--c-primary); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.gift-name { font-size: 14px; display: block; margin-bottom: 4px; }
.gift-desc { color: var(--c-muted); font-size: 12px; margin: 0; line-height: 1.4; min-height: 32px; }
.gift-pts {
    display: inline-block;
    background: #fdf2f8;
    color: #be185d;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 700;
    margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════
   ORDER PAGE — Premium search + cart
   ═══════════════════════════════════════════════════════════════════════ */

.order-pro { max-width: 1320px; margin: 0 auto; padding: 22px 18px 32px; }
.order-pro-h {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.order-pro-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 18px;
}
@media (max-width: 1000px) { .order-pro-grid { grid-template-columns: 1fr; } }

/* Search input premium */
.search-elite-wrap {
    position: relative;
    background: #fff;
    border: 1.5px solid var(--c-border);
    border-radius: 14px;
    padding: 4px 14px 4px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--shadow-sm);
    transition: var(--t-fast);
}
.search-elite-wrap:focus-within { border-color: var(--c-primary); box-shadow: 0 0 0 4px rgba(10, 102, 194, .14); }
.search-elite-ico { flex-shrink: 0; }
.search-elite {
    border: none !important;
    background: transparent !important;
    padding: 13px 0 !important;
    font-size: 15px;
    flex: 1;
    min-width: 0;
    color: var(--c-text);
}
.search-elite:focus { outline: none; box-shadow: none !important; }
.search-loader { color: var(--c-muted); }

.results-elite {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: calc(100vh - 240px);
    overflow-y: auto;
    padding-right: 4px;
}
.results-elite::-webkit-scrollbar { width: 6px; }
.results-elite::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

.search-placeholder {
    text-align: center;
    padding: 50px 20px;
    color: var(--c-muted);
}
.search-placeholder-ico { font-size: 38px; margin-bottom: 8px; opacity: .7; }
.search-placeholder p { margin: 6px 0 4px; font-weight: 600; color: var(--c-text-2); font-size: 14px; }
.search-placeholder small { font-size: 12px; }

/* ── Product search result card (customer — clean, no rate/free) ── */
.result-elite {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: var(--t-fast);
}
.result-elite:hover { border-color: var(--c-primary); box-shadow: 0 4px 16px rgba(10,102,194,.10); transform: translateY(-1px); }
.re-info { min-width: 0; flex: 1; }
.re-name { font-weight: 700; font-size: 13.5px; color: var(--c-text); margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.re-meta { color: var(--c-muted); font-size: 11.5px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.re-meta-2 { font-size: 11.5px; margin-top: 5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.re-packing { color: var(--c-muted); }
.re-mrp-inline { font-size: 12px; color: var(--c-muted); margin-top: 6px; font-weight: 500; }
.re-bonus {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    color: #065f46;
    padding: 2px 9px;
    border-radius: 99px;
    font-size: 10.5px;
    font-weight: 700;
    border: 1px solid #a7f3d0;
    letter-spacing: .01em;
}
.re-stock { padding: 2px 9px; border-radius: 99px; font-size: 10.5px; font-weight: 600; }
.re-stock.ok { background: #ecfdf5; color: #065f46; }
.re-stock.out { background: #fef2f2; color: #991b1b; }

.re-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.re-qty {
    width: 62px !important;
    padding: 8px 6px !important;
    font-size: 13px !important;
    text-align: center;
    border-radius: 9px !important;
    border: 1.5px solid var(--c-border) !important;
    background: var(--c-bg) !important;
    font-weight: 600;
    color: var(--c-text);
}
.re-qty:focus { border-color: var(--c-primary) !important; outline: none; box-shadow: 0 0 0 3px rgba(10,102,194,.12); }
.re-add {
    height: 38px;
    padding: 0 16px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, var(--c-primary), #1d8cf8);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
    transition: var(--t-fast);
    box-shadow: 0 2px 8px rgba(10,102,194,.25);
    white-space: nowrap;
}
.re-add:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(10,102,194,.35); }
.re-add[disabled] { background: #e5e7eb; color: #9ca3af; cursor: not-allowed; box-shadow: none; transform: none; }

@media (max-width: 600px) {
    .result-elite { flex-wrap: wrap; padding: 12px 14px; gap: 10px; }
    .re-info { width: 100%; }
    .re-actions { width: 100%; justify-content: space-between; }
    .re-qty { flex: 1; max-width: 100px; }
    .re-add { flex: 1; justify-content: center; }
}

/* Cart pane elite */
.cart-pane-elite {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    padding: 18px;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 76px;
    max-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
}
@media (max-width: 1000px) { .cart-pane-elite { position: static; max-height: none; } }

.cart-h-elite { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--c-border-soft); }
.cart-h-elite h3 { display: flex; align-items: center; gap: 8px; }
.cart-count-badge {
    background: var(--c-primary);
    color: #fff;
    padding: 2px 9px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    margin-left: 4px;
}

.cart-items-elite { flex: 1; overflow-y: auto; padding: 8px 0; }
.cart-items-elite .ci {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid var(--c-border-soft);
    gap: 10px;
}
.cart-items-elite .ci:last-child { border-bottom: none; }
.cart-items-elite .ci b { font-size: 12.5px; }

.cart-empty { text-align: center; padding: 30px 14px; color: var(--c-muted); }
.cart-empty-ico { font-size: 36px; margin-bottom: 6px; opacity: .8; }
.cart-empty p { margin: 4px 0 4px; font-weight: 600; color: var(--c-text-2); font-size: 13.5px; }
.cart-empty small { font-size: 11.5px; }

.cart-totals-elite { padding-top: 12px; border-top: 1px solid var(--c-border-soft); }
.ct-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px; color: var(--c-text-2); }
.ct-row b { color: var(--c-text); font-weight: 600; }
.ct-grand {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 2px solid var(--c-border);
    font-size: 16px;
    font-weight: 700;
}
.ct-grand b { color: var(--c-primary); font-size: 18px; }
.ct-rewards {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 8px 12px;
    background: #fdf2f8;
    color: #be185d;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
}
.ct-rewards b { color: #db2777; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════════
   GUEST LOGIN MODAL & PUBLIC SEARCH
   ═══════════════════════════════════════════════════════════════════════ */
.guest-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: du-fade-in .22s ease;
}
.guest-modal {
    background: #fff;
    border-radius: 20px;
    padding: 30px 28px 24px;
    max-width: 380px;
    width: 100%;
    position: relative;
    box-shadow: 0 30px 80px rgba(15, 23, 42, .25);
}
.guest-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--c-muted);
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 6px;
}
.guest-modal-close:hover { color: var(--c-text); background: var(--c-soft); }

/* Public search */
.home-search-wrap { position: relative; }
.home-search-public {
    font-size: 15px;
    padding: 12px 18px;
    border-radius: 12px;
    border: 1.5px solid var(--c-primary);
    box-shadow: 0 2px 14px rgba(10, 102, 194, .08);
    width: 100%;
    box-sizing: border-box;
}
.home-search-public:focus { outline: none; box-shadow: 0 4px 24px rgba(10, 102, 194, .2); }
.home-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 0 0 12px 12px;
    box-shadow: var(--shadow-lg);
    max-height: 65vh;
    overflow-y: auto;
    margin-top: 4px;
}
.hsr-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--c-border-soft); text-decoration: none; color: var(--c-text); transition: background var(--t-fast); }
.hsr-row:last-child { border-bottom: none; }
.hsr-row:hover { background: #f8fafc; text-decoration: none; }
.hsr-name { font-weight: 600; font-size: 13.5px; }
.hsr-meta { color: var(--c-muted); font-size: 11.5px; margin-top: 2px; }
.hsr-price { font-size: 12px; text-align: right; color: var(--c-primary); font-weight: 700; white-space: nowrap; margin-left: 12px; }
.hsr-empty { padding: 16px; text-align: center; color: var(--c-muted); font-size: 13px; }
.price-badge.guest { background: #fef3c7; color: #92400e; padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════
   LEGACY ERP layout (admin keeps using this)
   ═══════════════════════════════════════════════════════════════════════ */
.erp {
    display: grid;
    grid-template-columns: 230px 1fr;
    grid-template-rows: 52px 1fr;
    grid-template-areas: 'side top' 'side main';
    min-height: 100vh;
    background: var(--c-bg);
}
.erp .side { grid-area: side; background: #0b1220; color: #cbd5e1; padding: 16px 12px; overflow-y: auto; position: sticky; top: 0; height: 100vh; }
.erp .side .brand { color: #fff; margin-bottom: 16px; padding: 0 6px; }
.erp .side nav { display: flex; flex-direction: column; gap: 2px; }
.erp .side nav a { color: #cbd5e1; padding: 8px 12px; border-radius: 7px; font-size: 12.5px; transition: var(--t-fast); }
.erp .side nav a:hover { background: #1f2937; color: #fff; text-decoration: none; }
.erp .side .grp { padding: 12px 12px 4px; font-size: 10.5px; text-transform: uppercase; color: #6b7280; letter-spacing: .05em; font-weight: 600; }
.erp .top { grid-area: top; background: #fff; border-bottom: 1px solid var(--c-border); display: flex; justify-content: space-between; align-items: center; padding: 0 18px; position: sticky; top: 0; z-index: 5; }
.erp .content { grid-area: main; padding: 18px; }

.erp.no-side { display: flex; flex-direction: column; }
.erp-topbar { background: #fff; border-bottom: 1px solid var(--c-border); position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 0 18px; height: 56px; }
.erp-topbar .brand { font-weight: 700; color: var(--c-primary); font-size: 15px; display: flex; align-items: center; gap: 8px; }
.erp-topbar .brand .dot { width: 9px; height: 9px; background: var(--c-accent); border-radius: 50%; }
.erp-nav { display: flex; gap: 2px; flex: 1; overflow-x: auto; }
.erp-nav .nav-link { padding: 8px 12px; border-radius: 7px; font-size: 13px; color: var(--c-text-2); white-space: nowrap; text-decoration: none; }
.erp-nav .nav-link:hover, .erp-nav .nav-link.active { background: var(--c-primary-50); color: var(--c-primary); }
.erp-nav .nav-cta { background: var(--c-primary); color: #fff; font-weight: 600; }
.erp-nav .nav-cta:hover, .erp-nav .nav-cta.active { background: var(--c-primary); color: #fff; filter: brightness(.92); }
.erp-user { display: flex; align-items: center; gap: 10px; }
.erp-user-info { text-align: right; line-height: 1.2; }
.erp-user-name { display: block; font-weight: 600; font-size: 13px; }
.erp-balance { font-size: 11px; color: var(--c-muted); }
.erp-main { flex: 1; padding: 16px 18px; }
@media (max-width: 760px) { .erp { grid-template-columns: 1fr; grid-template-areas: 'top' 'main'; } .erp .side { display: none; } }

/* Stats bar (kept for compatibility) */
.stats-bar { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.stat-pill { background: #fff; border: 1px solid var(--c-border); border-radius: 99px; padding: 6px 16px; display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.stat-pill span { color: var(--c-muted); }
.stat-pill b { font-size: 14px; }
.stat-pill.neg b { color: #dc2626; }

/* Misc */
.prose p { margin: 6px 0; }
details summary { cursor: pointer; color: var(--c-primary); font-size: 12px; padding: 2px 0; }
kbd { background: #f1f5f9; border: 1px solid var(--c-border); padding: 1px 5px; border-radius: 4px; font-size: 11px; font-family: ui-monospace, monospace; }

/* Print */
@media print {
    .site-header, .mob-nav, .app-drawer, .drawer-overlay, #toast-container, .ann-bar, .ann-bar-top, .filter-bar, .btn-primary, .btn-ghost, .btn-elite-primary, .btn-elite-ghost, .admin-mobile-bar, .admin-drawer-overlay, .acc-footer { display: none !important; }
    body { background: #fff; }
}

/* =====================================================================
   PHASE 1 ADDITIONS — premium polish, mobile, marquee, admin drawer
   ===================================================================== */

/* ── Announcement bar marquee ────────────────────────────────────── */
.ann-bar-top {
    overflow: hidden;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .01em;
    box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.ann-mq {
    display: flex;
    width: 100%;
    overflow: hidden;
    padding: 7px 0;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ann-mq-track {
    display: inline-flex;
    flex: none;
    gap: 48px;
    padding-left: 48px;
    white-space: nowrap;
    animation: ann-marquee 32s linear infinite;
    will-change: transform;
}
.ann-bar-top:hover .ann-mq-track { animation-play-state: paused; }
.ann-mq-item { display: inline-flex; align-items: center; }
@keyframes ann-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .ann-mq-track { animation: none; padding-left: 18px; }
}

/* ── Brand logo image (when admin uploaded one) ──────────────────── */
.brand-logo, .sh-brand-logo {
    height: 30px;
    width: auto;
    max-width: 160px;
    display: inline-block;
    object-fit: contain;
    vertical-align: middle;
}
.sh-brand-logo { height: 32px; }
.auth-card .brand-logo { height: 36px; }

/* ── Sticky footer for ACCOUNT layout ─────────────────────────────── */
body.customer-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body.customer-layout .site-main { flex: 1 0 auto; }
body.customer-layout .acc-footer { flex-shrink: 0; }

.acc-footer {
    background: #0b1220;
    color: #cbd5e1;
    margin-top: 36px;
    padding: 28px 0 16px;
    font-size: 12.5px;
}
.acc-footer .wrap { display: flex; flex-direction: column; gap: 22px; }
.acc-foot-brand { text-align: left; }
.acc-foot-logo { color: #fff; font-weight: 800; font-size: 16px; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.acc-foot-dot { width: 9px; height: 9px; background: var(--c-accent); border-radius: 50%; display: inline-block; }
.acc-foot-tag { margin: 0; color: #9ca3af; font-size: 12.5px; }
.acc-foot-addr { margin: 8px 0 0; color: #9ca3af; font-size: 12px; }
.acc-foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.acc-footer h4 { color: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 10px; }
.acc-footer a { color: #cbd5e1; }
.acc-footer a:hover { color: #fff; }
.acc-footer ul { list-style: none; padding: 0; margin: 0; line-height: 2; }
.acc-footer .acc-foot-bottom {
    border-top: 1px solid #1f2937;
    margin-top: 18px;
    padding-top: 14px;
    text-align: center;
    color: #6b7280;
    font-size: 11.5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.acc-footer .acc-foot-bottom .pf-zefinx-link { color: var(--c-accent); font-weight: 700; text-decoration: none; }
.acc-footer .acc-foot-bottom .pf-zefinx-link:hover { text-decoration: underline; }
@media (max-width: 760px) {
    .acc-footer .acc-foot-cols {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        text-align: left;
    }
    .acc-footer h4 { font-size: 11px; }
    .acc-footer ul { line-height: 1.9; font-size: 12px; }
    .acc-foot-brand { text-align: left; }
    .acc-foot-logo { justify-content: flex-start; }
}

/* ── Public layout — ensure sticky footer (full viewport) ─────────── */
body.public {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body.public main { flex: 1 0 auto; }
body.public .footer { flex-shrink: 0; }

/* ── Mobile bottom nav — premium active indicator ────────────────── */
.mob-item {
    position: relative;
    transition: color var(--t-fast);
}
.mob-item.active {
    color: var(--c-primary) !important;
    font-weight: 700;
}
.mob-item.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 3px;
    background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
    border-radius: 0 0 4px 4px;
    box-shadow: 0 2px 6px rgba(10, 102, 194, .35);
}
.mob-item.active span { color: var(--c-primary); }
.mob-item.mob-cta.active::before { display: none; }

/* ── Premium prose for legal/info pages ──────────────────────────── */
.legal-page {
    max-width: 880px;
    margin: 0 auto;
    padding: 36px 22px 56px;
}
.legal-page .legal-hero {
    background: linear-gradient(135deg, var(--c-primary-50), #f0fdfa);
    border: 1px solid var(--c-border);
    border-radius: 18px;
    padding: 28px 26px;
    margin-bottom: 24px;
}
.legal-page .legal-hero .eyebrow {
    color: var(--c-primary);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.legal-page .legal-hero h1 { font-size: 28px; margin: 6px 0 6px; }
.legal-page .legal-hero p { color: var(--c-muted); margin: 0; font-size: 13.5px; }
.legal-page .prose {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 16px;
    padding: 28px 30px;
    box-shadow: var(--shadow-xs);
    font-size: 14px;
    line-height: 1.75;
    color: var(--c-text-2);
}
.legal-page .prose h2 { font-size: 17px; margin-top: 22px; color: var(--c-text); }
.legal-page .prose h3 { font-size: 14px; margin-top: 18px; color: var(--c-text); }
.legal-page .prose p { margin: 10px 0; }
.legal-page .prose ul, .legal-page .prose ol { padding-left: 22px; }
.legal-page .prose li { margin: 6px 0; }
.legal-page .prose a { color: var(--c-primary); }
@media (max-width: 600px) {
    .legal-page { padding: 18px 14px 80px; }
    .legal-page .legal-hero { padding: 20px 16px; border-radius: 14px; }
    .legal-page .legal-hero h1 { font-size: 22px; }
    .legal-page .prose { padding: 18px 16px; border-radius: 12px; font-size: 13.5px; }
}

/* =====================================================================
   ADMIN — Mobile responsive drawer + premium polish
   ===================================================================== */

/* Mobile top bar (visible only on small screens) */
.admin-mobile-bar {
    display: none;
    position: sticky;
    top: 0;
    z-index: 60;
    background: #0b1220;
    color: #fff;
    padding: 10px 14px;
    align-items: center;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.admin-mobile-bar .am-brand { color: #fff; font-weight: 700; font-size: 15px; flex: 1; display: flex; align-items: center; gap: 8px; }
.admin-mobile-bar .am-brand .dot { width: 8px; height: 8px; background: var(--c-accent); border-radius: 50%; }
.admin-mobile-bar .am-toggle {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 9px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    padding: 0;
}
.admin-mobile-bar .am-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    position: relative;
}
.admin-mobile-bar .am-toggle span::before,
.admin-mobile-bar .am-toggle span::after {
    content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: #fff; border-radius: 2px;
    transition: transform var(--t-med);
}
.admin-mobile-bar .am-toggle span::before { top: -6px; }
.admin-mobile-bar .am-toggle span::after  { top:  6px; }

/* Drawer overlay (mobile) */
.admin-drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px);
    z-index: 70;
    opacity: 0;
    transition: opacity var(--t-med);
}

/* When drawer is open */
body.admin.drawer-open { overflow: hidden; }
body.admin.drawer-open .admin-drawer-overlay { display: block; opacity: 1; }
body.admin.drawer-open .side {
    display: block !important;
    transform: translateX(0) !important;
}

/* Premium sidebar polish */
.erp .side .brand-logo { max-height: 36px; margin-bottom: 4px; }
.erp .side nav a {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}
.erp .side nav a.active,
.erp .side nav a[aria-current="page"] {
    background: linear-gradient(90deg, rgba(10,102,194,.22), rgba(10,102,194,.08));
    color: #fff;
    font-weight: 600;
}
.erp .side nav a.active::before {
    content: "";
    position: absolute;
    left: 0; top: 6px; bottom: 6px;
    width: 3px;
    background: var(--c-accent);
    border-radius: 0 3px 3px 0;
}

/* Top bar polish */
.erp .top {
    height: 52px;
    box-shadow: 0 1px 0 rgba(15,23,42,.04);
}
.erp .top .user { font-size: 13px; color: var(--c-text-2); display: flex; align-items: center; gap: 8px; }
.erp .top .top-search { flex: 1; max-width: 460px; margin-right: auto; }
.erp .top .top-search input { width: 100%; padding: 7px 12px; border: 1px solid var(--c-border); border-radius: 8px; font-size: 13px; background: #f8fafc; }
.erp .top .top-search input:focus { outline: none; border-color: var(--c-primary, #2563eb); background: #fff; }

/* Tablet / mobile breakpoints */
@media (max-width: 1024px) {
    .erp { grid-template-columns: 200px 1fr; }
}

@media (max-width: 760px) {
    .admin-mobile-bar { display: flex; }
    .erp {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        grid-template-areas: 'top' 'main';
    }
    .erp .top { display: none; }              /* desktop top bar hidden, mobile bar replaces it */
    .erp .content { grid-area: main; padding: 14px; }
    .erp .side {
        display: block;
        position: fixed;
        top: 0; left: 0;
        height: 100vh;
        width: 84%;
        max-width: 320px;
        z-index: 80;
        transform: translateX(-100%);
        transition: transform var(--t-med);
        box-shadow: 4px 0 24px rgba(0,0,0,.3);
    }
    /* Ensure the content area starts below the mobile bar */
    body.admin .erp { padding-top: 0; }
}

/* Make admin tables scroll on small screens instead of overflowing */
@media (max-width: 760px) {
    .t, .t-elite { display: block; overflow-x: auto; white-space: nowrap; max-width: 100%; }
    .erp .content .card { padding: 14px; border-radius: 12px; }
    .erp .content h1 { font-size: 19px; }
    .filters, .filter-bar { padding: 10px; }
    .filters input, .filters select, .filter-bar input, .filter-bar select { min-width: 0; flex: 1 1 140px; }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* ── Account layout — mobile polish ──────────────────────────────── */
@media (max-width: 760px) {
    .site-header-inner { padding: 0 14px; height: 54px; gap: 8px; }
    .sh-brand-name { font-size: 14px; }
    .sh-nav { display: none; } /* mobile uses bottom nav */
    .sh-user-info { display: none; }
    .sh-logout { font-size: 12px; padding: 6px 10px; }
}

/* Toast container — make sure it's above mobile nav */
#toast-container { z-index: 9999; }

/* =====================================================================
   PREMIUM PUBLIC FOOTER  (pub-footer)
   Used by layouts/public.php — visible on homepage, login, register,
   all info/legal pages and any unauthenticated page.
   ===================================================================== */

.pub-footer {
    background: #0b1220;
    color: #9ca3af;
    padding: 52px 0 0;
    margin-top: 56px;
    border-top: 1px solid #1a2540;
}
.pub-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid #1a2540;
}

/* Brand column */
.pf-brand-col { }
.pf-brand-logo-link { display: inline-block; margin-bottom: 14px; }
.pf-logo-img {
    height: 36px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: .92;
}
.pf-brand-name {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.02em;
    text-decoration: none;
    margin-bottom: 14px;
    line-height: 1;
}
.pf-brand-name:hover { color: #fff; text-decoration: none; }
.pf-brand-dot {
    width: 10px;
    height: 10px;
    background: var(--c-accent, #16a34a);
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(22,163,74,.2);
}
.pf-tagline {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 12px;
    line-height: 1.5;
}
.pf-address {
    font-size: 12px;
    color: #6b7280;
    margin: 0 0 10px;
    line-height: 1.65;
}
.pf-legal-tag {
    font-size: 11.5px;
    color: #6b7280;
    margin: 2px 0;
}
.pf-legal-tag span { color: #9ca3af; }

/* Link columns */
.pf-col { }
.pf-col-heading {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #1f2937;
}
.pf-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pf-links a {
    font-size: 13px;
    color: #9ca3af;
    text-decoration: none;
    transition: color .15s ease, padding-left .15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.pf-links a:hover { color: #fff; padding-left: 4px; text-decoration: none; }
.pf-contact-link { display: inline-flex; align-items: center; gap: 7px; }
.pf-contact-link svg { flex-shrink: 0; opacity: .7; }

/* Bottom bar */
.pf-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0 20px;
    flex-wrap: wrap;
    gap: 8px;
}
.pf-copyright {
    font-size: 12px;
    color: #6b7280;
}
.pf-devby {
    font-size: 12px;
    color: #6b7280;
}

/* Zefinx brand link — used in all footers */
.pf-zefinx-link {
    color: #60a5fa;
    font-weight: 600;
    text-decoration: none;
    transition: color .15s ease, opacity .15s ease;
    letter-spacing: -.01em;
}
.pf-zefinx-link:hover {
    color: #93c5fd;
    text-decoration: none;
    opacity: .9;
}

/* Tablet */
@media (max-width: 1024px) {
    .pub-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .pf-brand-col { grid-column: 1 / -1; }
}

/* Mobile */
@media (max-width: 600px) {
    .pub-footer { padding-top: 28px; margin-top: 28px; }
    /* Brand row spans full width, 3 link cols sit in a 3-column row below */
    .pub-footer-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 20px 12px;
    }
    .pf-brand-col {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px 20px;
        align-items: start;
    }
    /* Tagline + address span both brand sub-cols */
    .pf-tagline, .pf-address { grid-column: 1 / -1; margin-bottom: 0; }
    .pf-col-heading { font-size: 10.5px; margin-bottom: 10px; }
    .pf-links { gap: 7px; }
    .pf-links a { font-size: 12px; }
    .pf-bottom { flex-direction: column; align-items: center; text-align: center; gap: 4px; }
}

/* ── Auth layout footer ──────────────────────────────────────────── */
.auth-bg {
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding-bottom: 0;
}
.auth-footer {
    width: 100%;
    padding: 20px 24px 24px;
    text-align: center;
    margin-top: 12px;
}
.auth-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 4px;
    margin-bottom: 10px;
}
.auth-footer-links a {
    font-size: 11.5px;
    color: #94a3b8;
    text-decoration: none;
    transition: color .15s;
}
.auth-footer-links a:hover { color: #0a66c2; }
.auth-footer-sep {
    font-size: 11.5px;
    color: #cbd5e1;
    user-select: none;
}
.auth-footer-copy {
    font-size: 11.5px;
    color: #94a3b8;
    margin-top: 4px;
}
.auth-footer-copy a { color: #60a5fa; }

/* ── Account footer — bottom bar updated for Zefinx ─────────────── */
.acc-foot-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 14px 0;
    margin-top: 0;
    font-size: 12px;
    color: #6b7280;
    border-top: 1px solid #1a2540;
}
@media (max-width: 600px) {
    .acc-foot-bottom { flex-direction: column; align-items: center; text-align: center; }
    .auth-footer-links { gap: 4px 2px; }
}

/* ═══════════ FINAL ERP UPDATE — product list, popup, targets, discounts ═══════════ */

/* Product search list: company + latest expiry */
.re-company { font-size: 12.5px; color: #2563eb; font-weight: 600; margin-top: 1px; }
.re-expiry { display: inline-block; font-size: 11.5px; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; padding: 1px 7px; font-weight: 600; }

/* Pay Now button on dashboard pending bills */
.dash-row-static { display: flex; align-items: center; justify-content: space-between; padding: 12px 4px; border-bottom: 1px solid #f1f5f9; }
.btn-paynow { display: inline-block; margin-left: 10px; background: #0a66c2; color: #fff; font-size: 12.5px; font-weight: 700; padding: 6px 14px; border-radius: 8px; text-decoration: none; transition: .15s; }
.btn-paynow:hover { background: #0850a0; }

/* ── Place-order target popup ─────────────────────────────────────── */
.pot-overlay {
    position: fixed; inset: 0;
    background: rgba(2, 6, 23, .6);
    display: flex; align-items: center; justify-content: center;
    z-index: 2000; padding: 16px;
    backdrop-filter: blur(4px);
    opacity: 0; transition: opacity .3s ease;
}
.pot-overlay.pot-open { opacity: 1; }
.pot-modal {
    background: #fff;
    border-radius: 20px;
    width: 100%; max-width: 520px;
    max-height: 90vh; overflow-y: auto;
    box-shadow: 0 32px 80px rgba(2, 6, 23, .28);
    transform: translateY(24px) scale(.97);
    transition: transform .3s cubic-bezier(.34, 1.4, .64, 1), opacity .3s ease;
    opacity: 0;
}
.pot-overlay.pot-open .pot-modal { transform: none; opacity: 1; }

/* Promo banner at top */
.pot-promo-banner {
    position: relative;
    background: linear-gradient(135deg, #065f46 0%, #0f766e 50%, #1d4ed8 100%);
    padding: 22px 20px 18px;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
}
.pot-promo-banner::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(255,255,255,.12) 0%, transparent 60%);
}
.pot-promo-inner { position: relative; z-index: 1; }
.pot-promo-eyebrow { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.8); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.pot-promo-headline { font-size: 20px; font-weight: 900; color: #fff; line-height: 1.25; margin-bottom: 6px; }
.pot-promo-sub { font-size: 13px; color: rgba(255,255,255,.82); margin-bottom: 14px; }
.pot-promo-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pot-promo-pill { background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 700; backdrop-filter: blur(4px); }
.pot-close {
    position: absolute; top: 14px; right: 14px; z-index: 2;
    background: rgba(255,255,255,.18); border: 0; color: #fff;
    width: 32px; height: 32px; border-radius: 50%;
    font-size: 22px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.pot-close:hover { background: rgba(255,255,255,.32); }

/* Body */
.pot-body { padding: 18px 20px 4px; display: flex; flex-direction: column; gap: 16px; }

/* Reward box */
.pot-reward-box { background: linear-gradient(135deg, #f0fdf4, #ecfdf5); border: 1.5px solid #86efac; border-radius: 16px; padding: 16px 18px; }
.pot-reward-box.pot-reward-low { background: linear-gradient(135deg, #fefce8, #fef9c3); border-color: #fde047; }
.pot-reward-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pot-reward-title { font-size: 14px; font-weight: 800; color: #065f46; }
.pot-reward-box.pot-reward-low .pot-reward-title { color: #854d0e; }
.pot-reward-badge { background: linear-gradient(135deg, #16a34a, #15803d); color: #fff; font-size: 16px; font-weight: 900; padding: 4px 14px; border-radius: 999px; box-shadow: 0 4px 12px rgba(22,163,74,.3); }
.pot-tier-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }
.pot-tier-item { background: #fff; border-radius: 12px; padding: 10px 12px; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.pot-tier-label { display: block; font-size: 10.5px; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.pot-tier-val { display: block; font-size: 14.5px; font-weight: 900; color: #0f172a; }
.pot-tier-val.pot-target { color: #0a66c2; }
.pot-tier-val.pot-add { color: #16a34a; }
.pot-reward-msg { font-size: 12.5px; color: #166534; line-height: 1.55; margin: 0; }
.pot-reward-box.pot-reward-low .pot-reward-msg { color: #713f12; }

/* Product list */
.pot-products { background: #f8fafc; border: 1px solid #eef2f7; border-radius: 16px; padding: 14px 16px; }
.pot-products-title { font-size: 12px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.pot-prod-list { display: flex; flex-direction: column; gap: 8px; max-height: 180px; overflow-y: auto; }
.pot-prod-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background: #fff; border-radius: 10px; border: 1px solid #f1f5f9; }
.pot-prod-info { min-width: 0; flex: 1; }
.pot-prod-name { display: block; font-size: 13px; font-weight: 700; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pot-prod-pack { display: block; font-size: 11px; color: #94a3b8; margin-top: 1px; }
.pot-prod-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.pot-prod-qty { font-size: 12.5px; font-weight: 700; color: #475569; background: #f1f5f9; padding: 2px 8px; border-radius: 6px; }
.pot-prod-amt { font-size: 13px; font-weight: 800; color: #0a66c2; }

/* Action buttons */
.pot-actions {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 12px; padding: 16px 20px 22px;
    border-top: 1px solid #f1f5f9; margin-top: 4px;
}
.pot-btn-shop {
    padding: 13px; border-radius: 14px;
    border: 2px solid #00C853; background: #fff;
    color: #065f46; font-weight: 800; font-size: 14px;
    cursor: pointer; transition: background .15s, color .15s;
}
.pot-btn-shop:hover { background: #f0fdf4; }
.pot-btn-confirm {
    padding: 13px; border-radius: 14px; border: 0;
    background: linear-gradient(135deg, #00C853, #2196F3);
    color: #fff; font-weight: 800; font-size: 14px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 200, 83, .3);
    transition: transform .15s, box-shadow .15s;
}
.pot-btn-confirm:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0, 200, 83, .4); }
.pot-btn-confirm:disabled { opacity: .6; cursor: not-allowed; transform: none; }

@media (max-width: 540px) {
    .pot-promo-headline { font-size: 17px; }
    .pot-tier-row { grid-template-columns: 1fr 1fr; }
    .pot-actions { grid-template-columns: 1fr; }
    .pot-btn-shop { order: 2; }
    .pot-btn-confirm { order: 1; }
}

/* Target cards */
.target-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.target-card { background: #fff; border: 1px solid #eef2f7; border-radius: 16px; padding: 16px 18px; box-shadow: 0 1px 3px rgba(0, 0, 0, .04); }
.tc-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.tc-label { font-size: 12.5px; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.tc-value { font-size: 18px; color: #0f172a; }
.tc-bar { height: 10px; background: #eef2f7; border-radius: 999px; overflow: hidden; }
.tc-bar-fill { height: 100%; background: linear-gradient(90deg, #0a66c2, #38bdf8); border-radius: 999px; transition: width .4s ease; }
.tc-bar-fill.alt { background: linear-gradient(90deg, #16a34a, #4ade80); }
.tc-foot { display: flex; justify-content: space-between; font-size: 12.5px; margin-top: 8px; color: #334155; }

/* Most-discounted product cards */
.disc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.disc-card { position: relative; background: #fff; border: 1px solid #eef2f7; border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 1px 3px rgba(0, 0, 0, .04); transition: .15s; }
.disc-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .08); }
.disc-badge { position: absolute; top: 10px; left: 10px; background: #dc2626; color: #fff; font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; z-index: 2; }
.disc-img { height: 110px; background: #f8fafc center/cover no-repeat; display: flex; align-items: center; justify-content: center; }
.disc-img-ph { font-size: 38px; opacity: .5; }
.disc-body { padding: 12px 14px; }
.disc-name { font-weight: 700; font-size: 13.5px; line-height: 1.3; color: #0f172a; }
.disc-company { font-size: 12px; color: #2563eb; font-weight: 600; margin-top: 2px; }
.disc-exp { font-size: 11.5px; color: #b45309; margin-top: 4px; }

@media (max-width: 560px) {
    .target-grid { grid-template-columns: 1fr; }
    .po-stats { grid-template-columns: repeat(3, 1fr); }
}

/* ═══════════ ERP UI UPDATE — target-top, split cards, pay page ═══════════ */

/* Target hero (top of dashboard) */
.dash-target-top { margin-top: 18px; }
.target-hero { background: linear-gradient(135deg, #0a1f44 0%, #0a66c2 100%); border-radius: 22px; padding: 22px 24px; color: #fff; box-shadow: 0 14px 40px rgba(10, 102, 194, .25); }
.target-hero-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.target-hero .dash-eyebrow { color: #bfdbfe; }
.target-hero-title { margin: 4px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.target-reward-chip { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); border-radius: 14px; padding: 10px 16px; text-align: right; backdrop-filter: blur(6px); }
.target-reward-chip span { display: block; font-size: 11.5px; color: #dbeafe; text-transform: uppercase; letter-spacing: .04em; }
.target-reward-chip b { font-size: 20px; }
.target-hero .target-card.premium { background: rgba(255, 255, 255, .97); border: none; }
.tc-ring-row { display: flex; align-items: center; gap: 16px; margin: 12px 0; }
.tc-ring { --p: 0; --c: #0a66c2; width: 76px; height: 76px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; background: conic-gradient(#0a66c2 calc(var(--p) * 1%), #e8eef6 0); position: relative; }
.tc-ring.alt { background: conic-gradient(#16a34a calc(var(--p) * 1%), #e8eef6 0); }
.tc-ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #fff; }
.tc-ring span { position: relative; font-weight: 800; font-size: 16px; color: #0f172a; }
.tc-ring-meta { display: flex; flex-direction: column; gap: 8px; }
.tc-ring-meta div { display: flex; flex-direction: column; line-height: 1.2; }
.tc-ring-meta b { font-size: 14.5px; color: #0f172a; }
.tc-ring-meta b.neg { color: #dc2626; }

/* Split detail/chart cards (orders + bills) */
.split-card .split-list { display: flex; flex-direction: column; gap: 10px; }
.split-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid #eef2f7; border-radius: 14px; text-decoration: none; color: inherit; background: #fff; transition: .15s; }
.split-row:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .06); transform: translateY(-1px); }
.split-left { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.split-left b { font-size: 14px; color: #0f172a; }
.split-left .pill { align-self: flex-start; text-transform: capitalize; }
.split-right { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 8px; }
.mini-chart { display: flex; align-items: flex-end; gap: 3px; height: 38px; width: 100%; justify-content: flex-end; }
.mini-chart span { width: 8px; border-radius: 3px 3px 0 0; opacity: .85; }
.bill-ring { --p: 0; --c: #dc2626; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--c) calc(var(--p) * 1%), #f1f5f9 0); position: relative; }
.bill-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #fff; }
.bill-ring span { position: relative; font-size: 11px; font-weight: 800; color: #0f172a; }

/* Customer manual payment page */
.pay-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; margin-top: 14px; }
.pay-card { background: #fff; border: 1px solid #eef2f7; border-radius: 18px; padding: 20px 22px; box-shadow: 0 1px 3px rgba(0, 0, 0, .04); }
.pay-h { margin: 16px 0 10px; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: #64748b; }
.pay-h:first-child { margin-top: 0; }
.pay-amount-box { background: linear-gradient(135deg, #0a66c2, #38bdf8); color: #fff; border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; }
.pay-amount-box .muted { color: #e0f2fe !important; }
.pay-amount { font-size: 26px; font-weight: 800; }
.pay-pending-note { font-size: 12.5px; color: #fff7ed; background: rgba(255, 255, 255, .18); align-self: flex-start; padding: 2px 10px; border-radius: 999px; margin-top: 6px; }
.pay-qr-wrap { text-align: center; }
.pay-qr { width: 200px; height: 200px; object-fit: contain; border: 1px solid #e5e7eb; border-radius: 14px; padding: 8px; background: #fff; }
.pay-upi { margin-top: 8px; font-size: 14px; }
.pay-upi-only { font-size: 15px; padding: 10px 0; }
.pay-bank { display: flex; flex-direction: column; gap: 8px; }
.pb-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; background: #f8fafc; border-radius: 10px; font-size: 13.5px; }
.pb-row span { color: #64748b; }
.pb-row b { color: #0f172a; }
.pay-form { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.pay-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: #334155; }
.pay-form input { padding: 11px 13px; border: 1px solid #d8e0ea; border-radius: 11px; font-size: 15px; }
.pay-form .btn-elite-primary { justify-content: center; padding: 13px; font-size: 15px; }

@media (max-width: 760px) {
    .pay-grid { grid-template-columns: 1fr; }
    .split-row { grid-template-columns: 1fr; }
    .split-right { align-items: flex-start; }
    .mini-chart { justify-content: flex-start; }
    .target-hero-head { flex-direction: column; align-items: flex-start; }
    .target-reward-chip { text-align: left; align-self: stretch; }
}

/* ===== Dashboard: target reward chips ===== */
.target-reward-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.target-reward-chip { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); color: #fff; border-radius: 12px; padding: 8px 14px; font-size: 13px; font-weight: 700; backdrop-filter: blur(4px); }
.target-reward-chip b { display: block; font-size: 16px; margin-top: 2px; }

/* ===== Dashboard: split2 cards (list + chart) ===== */
.split2-card { background: #fff; border: 1px solid #eef2f7; border-radius: 18px; box-shadow: 0 1px 3px rgba(0, 0, 0, .04); overflow: hidden; }
.split2-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 0; }
.split2-head h3 { margin: 0; font-size: 15.5px; color: #0f172a; }
.split2-body { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; padding: 14px 18px 18px; }
.split2-left { min-width: 0; }
.split2-right { border-left: 1px solid #f1f5f9; padding-left: 16px; display: flex; flex-direction: column; }
.split2-right h4 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; }

/* ===== Mini bar chart ===== */
.bar-chart { display: flex; align-items: flex-end; gap: 12px; height: 150px; padding-top: 6px; }
.bc-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; height: 100%; justify-content: flex-end; }
.bc-track { width: 100%; max-width: 46px; height: 100px; background: #f1f5f9; border-radius: 8px 8px 0 0; display: flex; align-items: flex-end; overflow: hidden; position: relative; }
.bc-fill { width: 100%; border-radius: 8px 8px 0 0; min-height: 3px; transition: height .4s ease; }
.bc-val { position: absolute; top: -18px; left: 0; right: 0; text-align: center; font-size: 12px; font-weight: 800; color: #0f172a; }
.bc-track { overflow: visible; }
.bc-label { font-size: 11px; color: #64748b; font-weight: 600; text-align: center; }
.bc-amt { font-size: 11px; color: #0f172a; font-weight: 700; }

/* ===== Recent Orders / list footer ===== */
.ro-list-footer { margin-top: 12px; padding-top: 12px; border-top: 1px solid #f1f5f9; }

/* ===== Dashboard: Pending Bills rows ===== */
.pb-row-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border-radius: 12px; border: 1px solid #f1f5f9; background: #fff; margin-bottom: 8px; transition: box-shadow .15s, border-color .15s; }
.pb-row-card:last-child { margin-bottom: 0; }
.pb-row-card:hover { border-color: #e2e8f0; box-shadow: 0 4px 14px rgba(15, 23, 42, .05); }
.pb-row-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pb-row-info b { font-size: 13px; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-row-amt { font-size: 14.5px; font-weight: 800; color: #dc2626; }
.pb-row-act { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.pb-row-act .btn-paynow { margin-left: 0; }
.pill.waiting { background: #f3e8ff; color: #7c3aed; }

/* ===== Dashboard: Collection Overview (light) ===== */
.collect-card .collect-graph { gap: 10px; }
.collect-card .cg-total { font-size: 26px; }

/* ===== Frequently ordered: expiry line ===== */
.feat-tile-exp { font-size: 11px; color: #b45309; font-weight: 600; }

/* ===== Most Ordered Products — default / no-result grid in search pane ===== */
.mo-header { padding: 10px 14px 8px; font-size: 13px; font-weight: 700; color: #0f172a; border-bottom: 1px solid #eef2f7; }
.mo-header.mo-noresult { background: #fefce8; color: #854d0e; border-color: #fde047; }
.mo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; padding: 12px; }
/* Browse sections (discount + all products) */
.ord-section { margin-bottom: 10px; }
.ord-section-h { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px; font-size: 14px; font-weight: 800; color: #0f172a; border-bottom: 1px solid #eef2f7; background: #fafbfc; }
.mo-loading { padding: 16px; color: #94a3b8; font-size: 13px; grid-column: 1 / -1; }
.mo-img { position: relative; }
.mo-discount-badge { position: absolute; top: 6px; left: 6px; background: #dc2626; color: #fff; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 999px; z-index: 1; }
.mo-card { background: #fff; border: 1px solid #eef2f7; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s, transform .15s; }
.mo-card:hover { box-shadow: 0 6px 18px rgba(15,23,42,.08); transform: translateY(-2px); }
.mo-img { height: 90px; background: #f8fafc; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mo-img img { width: 100%; height: 100%; object-fit: cover; }
.mo-img-ph { font-size: 32px; opacity: .5; }
.mo-body { padding: 8px 10px 4px; flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mo-name { font-size: 12.5px; font-weight: 700; color: #0f172a; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mo-company { font-size: 11px; color: #2563eb; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo-pack, .mo-exp { font-size: 11px; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo-exp { color: #b45309; }
.mo-rate { display: block; font-size: 13px; font-weight: 800; color: #059669; margin-top: 4px; }
.mo-foot { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-top: 1px solid #f1f5f9; }
.mo-qty { width: 44px; padding: 5px 6px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 13px; text-align: center; }
.mo-foot .re-add { flex: 1; padding: 6px 8px; font-size: 12px; border-radius: 8px; }
@media (max-width: 600px) {
    .mo-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 10px; }
}

/* ===== Current offers carousel ===== */
.offer-carousel { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 8px 30px rgba(0, 0, 0, .12); }
.oc-track { position: relative; height: 240px; }
.oc-slide { position: absolute; inset: 0; background: #1e293b center/cover no-repeat; opacity: 0; transition: opacity .6s ease; display: flex; align-items: center; }
.oc-slide.active { opacity: 1; }
.oc-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2, 6, 23, .82) 0%, rgba(2, 6, 23, .55) 45%, rgba(2, 6, 23, .15) 100%); }
.oc-body { position: relative; z-index: 2; padding: 0 44px; max-width: 620px; color: #fff; }
.oc-eyebrow { display: inline-block; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .3); padding: 4px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 12px; }
.oc-title { font-size: 28px; font-weight: 900; line-height: 1.15; margin: 0 0 8px; text-shadow: 0 2px 12px rgba(0, 0, 0, .4); }
.oc-sub { font-size: 14.5px; opacity: .92; margin: 0 0 14px; max-width: 460px; }
.oc-expiry { font-size: 12px; opacity: .85; margin-bottom: 14px; }
.oc-btn { display: inline-block; background: #fff; color: #0f172a; font-weight: 800; padding: 10px 22px; border-radius: 12px; text-decoration: none; font-size: 14px; transition: .15s; }
.oc-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.oc-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255, 255, 255, .85); color: #0f172a; font-size: 20px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: .15s; }
.oc-arrow:hover { background: #fff; }
.oc-arrow.prev { left: 14px; }
.oc-arrow.next { right: 14px; }
.oc-dots { position: absolute; bottom: 14px; left: 0; right: 0; z-index: 3; display: flex; justify-content: center; gap: 8px; }
.oc-dot { width: 9px; height: 9px; border-radius: 50%; border: none; background: rgba(255, 255, 255, .45); cursor: pointer; padding: 0; transition: .15s; }
.oc-dot.active { background: #fff; width: 22px; border-radius: 999px; }

/* ===== Reports redesign ===== */
.rep-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.rep-export { display: flex; gap: 8px; }
.rep-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; }
.rep-chip { background: #fff; border: 1px solid #d8e0ea; color: #334155; border-radius: 999px; padding: 7px 16px; font-size: 13px; font-weight: 600; cursor: pointer; transition: .15s; }
.rep-chip:hover { border-color: #2563eb; color: #2563eb; }
.rep-chip.active { background: #2563eb; border-color: #2563eb; color: #fff; }
.rep-custom { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.rep-custom input { padding: 7px 10px; border: 1px solid #d8e0ea; border-radius: 10px; font-size: 13px; }
.rep-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.rep-kpi { border-radius: 16px; padding: 16px 18px; color: #fff; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 4px 14px rgba(0, 0, 0, .08); }
.rep-kpi.blue { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.rep-kpi.green { background: linear-gradient(135deg, #16a34a, #15803d); }
.rep-kpi.red { background: linear-gradient(135deg, #dc2626, #b91c1c); }
.rep-kpi.teal { background: linear-gradient(135deg, #0d9488, #0f766e); }
.rk-label { font-size: 12.5px; opacity: .9; font-weight: 600; }
.rk-value { font-size: 24px; font-weight: 900; }
.rk-sub { font-size: 11.5px; opacity: .82; }
.rep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.rep-card { background: #fff; border: 1px solid #eef2f7; border-radius: 16px; padding: 16px 18px; box-shadow: 0 1px 3px rgba(0, 0, 0, .04); }
.rep-card h3 { margin: 0 0 14px; font-size: 15px; color: #0f172a; }
.rep-bars { display: flex; align-items: flex-end; gap: 6px; height: 150px; }
.rb-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end; min-width: 0; }
.rb-track { width: 100%; max-width: 28px; height: 120px; background: #f1f5f9; border-radius: 6px 6px 0 0; display: flex; align-items: flex-end; overflow: hidden; }
.rb-fill { width: 100%; border-radius: 6px 6px 0 0; min-height: 2px; transition: height .4s ease; }
.rb-fill.blue { background: #2563eb; }
.rb-fill.green { background: #16a34a; }
.rb-label { font-size: 10px; color: #94a3b8; }
.rep-hbars { display: flex; flex-direction: column; gap: 10px; }
.rh-row { display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 10px; }
.rh-name { font-size: 12.5px; color: #334155; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rh-track { background: #f1f5f9; height: 10px; border-radius: 999px; overflow: hidden; }
.rh-fill { height: 100%; background: linear-gradient(90deg, #2563eb, #60a5fa); border-radius: 999px; }
.rh-val { font-size: 12.5px; font-weight: 700; color: #0f172a; }
.rep-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

@media (max-width: 760px) {
    .split2-body { grid-template-columns: 1fr; }
    .split2-right { border-left: none; padding-left: 0; border-top: 1px solid #f1f5f9; padding-top: 14px; }
    .rep-grid { grid-template-columns: 1fr; }
    .rep-custom { margin-left: 0; }
    .oc-track { height: 200px; }
    .oc-title { font-size: 22px; }
    .rh-row { grid-template-columns: 90px 1fr auto; }
}

/* ===== Dashboard period mini cards (orders / collection) ===== */
.period-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0 18px 18px; }
.period-cards-3 { grid-template-columns: repeat(3, 1fr); }
.period-card { background: #f8fafc; border: 1px solid #eef2f7; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.pc-label { font-size: 11.5px; color: #64748b; font-weight: 600; }
.pc-value { font-size: 19px; font-weight: 900; color: #0f172a; line-height: 1; }
.pc-track { height: 6px; background: #e8edf3; border-radius: 999px; overflow: hidden; margin-top: 2px; }
.pc-fill { height: 100%; border-radius: 999px; min-width: 3px; transition: width .4s ease; }

/* ===== Target card reward line + achieved state ===== */
.tc-reward { margin-top: 12px; font-size: 13px; color: #475569; background: #f1f5f9; border-radius: 10px; padding: 9px 12px; }
.tc-reward b { color: #0f172a; }
.tc-reward.done { background: #ecfdf5; color: #15803d; }
.tc-reward.done b { color: #15803d; }
.target-card.achieved { border-color: #86efac; box-shadow: 0 4px 14px rgba(22, 163, 74, .12); }

@media (max-width: 760px) {
    .period-cards, .period-cards-3 { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Phase 2: product grid (dashboard + /products) ===== */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.prod-card { background: #fff; border: 1px solid #eef2f7; border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: box-shadow .18s, transform .18s; }
.prod-card:hover { box-shadow: 0 8px 24px rgba(15, 23, 42, .08); transform: translateY(-2px); }
.prod-thumb { position: relative; aspect-ratio: 1/1; background: #f1f5f9; display: flex; align-items: center; justify-content: center; }
.prod-thumb img { width: 100%; height: 100%; object-fit: cover; }
.prod-thumb-ph { font-size: 40px; opacity: .5; }
.prod-badge { position: absolute; top: 8px; left: 8px; background: #dc2626; color: #fff; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; }
.prod-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; }
.prod-name { font-size: 13.5px; font-weight: 700; color: #0f172a; line-height: 1.25; }
.prod-company { font-size: 12px; color: #2563eb; font-weight: 600; }
.prod-pack { font-size: 12px; color: #64748b; }
.prod-order { margin-top: 8px; align-self: flex-start; }

/* ===== Phase 2: product filters + pager ===== */
.prod-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; align-items: center; }
.prod-filters .pf-search { flex: 1 1 220px; min-width: 180px; }
.prod-filters input, .prod-filters select { padding: 9px 12px; border: 1px solid #e2e8f0; border-radius: 10px; font: inherit; background: #fff; }
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 22px 0 8px; }
.pager-btn { padding: 8px 16px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; text-decoration: none; color: #0f172a; font-weight: 600; font-size: 13px; }
.pager-btn:hover { background: #f8fafc; }
.pager-info { font-size: 13px; color: #64748b; }

/* ===== Phase 2: company / category chips ===== */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.brand-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: #fff; border: 1px solid #e2e8f0; border-radius: 999px; text-decoration: none; color: #0f172a; font-weight: 600; font-size: 13px; transition: background .15s, border-color .15s; }
.brand-chip:hover { background: #eff6ff; border-color: #bfdbfe; }
.brand-chip.alt:hover { background: #f0fdf4; border-color: #bbf7d0; }
.brand-chip .bc-count { background: #f1f5f9; color: #64748b; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }

/* ===== Phase 2: dashboard chart captions + combined collection graph ===== */
.chart-cap { display: block; font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.chart-strip { padding: 14px 18px 4px; border-top: 1px solid #f1f5f9; margin-top: 6px; }
.bar-chart.wide { gap: 16px; }
.collect-graph { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.collect-graph .cg-total { font-size: 22px; font-weight: 900; color: #0f172a; }
.cg-bar { height: 14px; border-radius: 999px; background: red; overflow: hidden; }
.cg-legend{
    display:flex;
    align-items:center;
}

.pending-right{
    margin-left:auto;
}
.cg-paid { height: 100%; background: #16a34a; border-radius: 999px; transition: width .4s ease; }
.cg-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: #475569; }
.cg-legend b { color: #0f172a; margin-left: 4px; }
.cg-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.cg-dot.green { background: #16a34a; }
.cg-dot.red { background: #dc2626; }

/* ===== Phase 2: import summary pills ===== */
.imp-summary { display: flex; flex-wrap: wrap; gap: 12px; }
.imp-pill { background: #f8fafc; border: 1px solid #eef2f7; border-radius: 12px; padding: 12px 18px; text-align: center; min-width: 110px; font-size: 12.5px; color: #64748b; font-weight: 600; }
.imp-pill span { display: block; font-size: 24px; font-weight: 900; color: #0f172a; }
.imp-pill.ok span { color: #16a34a; }
.imp-pill.upd span { color: #2563eb; }
.imp-pill.skip span { color: #d97706; }
/* Import preview table rows */
.imp-row-new { background: #f0fdf4; }
.imp-row-upd { background: #fffbeb; }
.imp-badge { display:inline-block; padding:2px 8px; border-radius:20px; font-size:11px; font-weight:700; white-space:nowrap; }
.imp-badge-new { background:#dcfce7; color:#15803d; }
.imp-badge-upd { background:#fef9c3; color:#92400e; }

@media (max-width: 760px) {
    .prod-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .prod-filters .pf-search { flex-basis: 100%; }
}

/* ===== Early-payment reward — premium invoice card ===== */
.reward-card { position: relative; margin-top: 16px; border-radius: 18px; padding: 20px 22px; overflow: hidden; background: linear-gradient(135deg, #0f3d2e 0%, #145c41 55%, #1f7a4d 100%); box-shadow: 0 12px 34px rgba(16, 88, 60, .28); color: #fff; }
.reward-card-glow { position: absolute; top: -60px; right: -40px; width: 220px; height: 220px; background: radial-gradient(circle, rgba(250, 204, 21, .35), transparent 70%); pointer-events: none; }
.reward-card-main { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 22px; align-items: stretch; justify-content: space-between; }
.rc-left { flex: 1 1 260px; min-width: 0; }
.rc-eyebrow { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: rgba(250, 204, 21, .18); color: #fde68a; border: 1px solid rgba(250, 204, 21, .35); padding: 4px 12px; border-radius: 999px; margin-bottom: 12px; }
.rc-headline { margin: 0 0 6px; font-size: 23px; font-weight: 800; letter-spacing: -.01em; }
.rc-headline b { color: #fde047; }
.rc-sub { margin: 0 0 14px; font-size: 13.5px; color: rgba(255, 255, 255, .82); max-width: 420px; }
.rc-sub b { color: #fff; }
.rc-progress { height: 9px; border-radius: 999px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.rc-progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #facc15, #fde047); box-shadow: 0 0 14px rgba(250, 204, 21, .6); transition: width .8s cubic-bezier(.34, 1.2, .64, 1); }
.rc-progress-cap { display: block; margin-top: 7px; font-size: 11.5px; color: rgba(255, 255, 255, .7); font-weight: 600; }
.rc-right { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, .14); text-align: right; }
.rc-amt-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: rgba(255, 255, 255, .7); font-weight: 700; }
.rc-amt { font-size: 30px; font-weight: 900; color: #fde047; line-height: 1.05; }
.rc-status { font-size: 12px; font-weight: 800; color: #86efac; margin-bottom: 6px; }
.rc-cta { display: inline-flex; align-items: center; gap: 6px; background: #fde047; color: #0f3d2e !important; font-weight: 800; font-size: 13.5px; padding: 9px 18px; border-radius: 12px; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.rc-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(250, 204, 21, .4); text-decoration: none; }
.rc-tiers { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; }
.rc-tier { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; padding: 10px 8px; text-align: center; opacity: .72; transition: .2s; }
.rc-tier b { display: block; font-size: 18px; font-weight: 900; color: #fff; }
.rc-tier span { font-size: 11px; color: rgba(255, 255, 255, .7); }
.rc-tier.active { opacity: 1; background: rgba(250, 204, 21, .16); border-color: rgba(250, 204, 21, .5); box-shadow: 0 4px 14px rgba(250, 204, 21, .2); }
.rc-tier.active b { color: #fde047; }
.reward-card.expired { background: linear-gradient(135deg, #f8fafc, #f1f5f9); color: #475569; box-shadow: 0 4px 14px rgba(15, 23, 42, .06); display: flex; align-items: center; gap: 14px; padding: 18px 20px; border: 1px solid #e2e8f0; }
.rc-expired-ico { font-size: 28px; }
.rc-expired-title { display: block; font-size: 15.5px; font-weight: 800; color: #334155; }
.rc-expired-sub { font-size: 13px; color: #64748b; }

/* ===== Reward tag — bills list ===== */
.reward-tag { display: inline-block; font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.reward-tag.pct-4 { background: #dcfce7; color: #15803d; }
.reward-tag.pct-3 { background: #d1fae5; color: #047857; }
.reward-tag.pct-2 { background: #ecfccb; color: #4d7c0f; }
.reward-tag.pct-1 { background: #fef9c3; color: #a16207; }
.reward-tag.expired-tag { background: #f1f5f9; color: #94a3b8; }
.reward-tag.paid-tag { background: #eef2ff; color: #4338ca; }
.reward-amt { display: block; font-size: 12.5px; font-weight: 800; color: #0f172a; margin-top: 3px; }

/* ===== Reward cell — dynamic countdown (bills list) ===== */
.reward-cell { display: flex; flex-direction: column; gap: 2px; padding: 8px 11px; border-radius: 12px; background: linear-gradient(135deg, #f0fdf4, #ecfdf5); border: 1px solid #bbf7d0; min-width: 190px; }
.reward-cell.expired { background: #f8fafc; border-color: #e2e8f0; }
.reward-cell-head { font-size: 12.5px; font-weight: 800; color: #15803d; }
.reward-cell-head.muted { color: #94a3b8; }
.reward-cell-line { font-size: 12px; color: #475569; }
.reward-cell-line b { color: #0f172a; }
.reward-cell-line .pct-4 { color: #15803d; }
.reward-cell-line .pct-3 { color: #047857; }
.reward-cell-line .pct-2 { color: #4d7c0f; }
.reward-cell-line .pct-1 { color: #a16207; }
.reward-cell-val { font-size: 12px; color: #475569; }
.reward-cell-val b { color: #15803d; font-weight: 800; }

@media (max-width: 640px) {
    .reward-card-main { flex-direction: column; gap: 16px; }
    .rc-right { align-items: flex-start; text-align: left; padding-left: 0; border-left: none; border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 14px; width: 100%; }
    .rc-tiers { grid-template-columns: repeat(2, 1fr); }
    .rc-headline { font-size: 20px; }
}

/* ===== Phase 2: bill status filter chips ===== */
.bill-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.bf-chip { padding: 7px 16px; border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; text-decoration: none; color: #475569; font-weight: 600; font-size: 13px; transition: background .15s, color .15s, border-color .15s; }
.bf-chip:hover { background: #f8fafc; }
.bf-chip.active { background: #0f172a; color: #fff; border-color: #0f172a; }

/* ===== Phase 2: report KPI cards + section headings ===== */
.gst-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 16px 0 8px; }
.gst-kpi { background: #fff; border: 1px solid #eef2f7; border-radius: 12px; padding: 14px 16px; }
.gst-kpi span { display: block; font-size: 11.5px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: .03em; }
.gst-kpi b { display: block; font-size: 19px; font-weight: 800; color: #0f172a; margin-top: 5px; }
.gst-kpi.accent { background: linear-gradient(135deg, #eff6ff, #f0f9ff); border-color: #bfdbfe; }
.gst-kpi.accent b { color: #1d4ed8; }
.rep-h { margin: 26px 0 10px; font-size: 16px; color: #0f172a; }

/* ===== Phase 2: wallet / rewards summary cards ===== */
.wallet-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 16px 0 22px; }
.wallet-card { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #eef2f7; border-radius: 16px; padding: 16px 18px; box-shadow: 0 1px 3px rgba(15, 23, 42, .04); }
.wallet-card .wc-ico { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; background: #f1f5f9; }
.wallet-card .wc-label { display: block; font-size: 12px; font-weight: 600; color: #64748b; }
.wallet-card .wc-value { display: block; font-size: 21px; font-weight: 900; color: #0f172a; margin-top: 2px; }
.wallet-card.paid .wc-ico { background: #dcfce7; }
.wallet-card.pending .wc-ico { background: #fef3c7; }
.wallet-card.due .wc-ico { background: #fee2e2; }
.wallet-card.count .wc-ico { background: #e0e7ff; }
.wallet-card.reward .wc-ico { background: #fce7f3; }
@media (max-width: 560px) {
    .wallet-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
    .wallet-card { padding: 12px; gap: 10px; }
    .wallet-card .wc-ico { width: 38px; height: 38px; font-size: 18px; }
    .wallet-card .wc-value { font-size: 17px; }
}

/* ===== Payments page — outstanding bills cards ===== */
.pay-section-h { display: flex; align-items: center; justify-content: space-between; margin: 24px 0 14px; }
.pay-section-h h2 { margin: 0; font-size: 17px; font-weight: 800; color: #0f172a; letter-spacing: -.01em; }
.due-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.due-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #eef2f7; border-radius: 16px; padding: 16px 18px; box-shadow: 0 1px 3px rgba(15, 23, 42, .04); transition: box-shadow .18s, transform .18s; }
.due-card:hover { box-shadow: 0 8px 24px rgba(15, 23, 42, .08); transform: translateY(-2px); }
.due-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.due-num { font-size: 14.5px; font-weight: 800; color: #0f172a; text-decoration: none; }
.due-num:hover { color: var(--c-primary); }
.due-date { display: block; font-size: 12px; color: #94a3b8; margin-top: 2px; }
.due-amt-wrap { text-align: right; flex-shrink: 0; }
.due-amt-label { display: block; font-size: 11px; color: #94a3b8; font-weight: 600; }
.due-amt { font-size: 19px; font-weight: 900; color: #dc2626; }
.due-reward { margin: 12px 0; padding: 10px 12px; border-radius: 12px; background: linear-gradient(135deg, #f0fdf4, #ecfdf5); border: 1px solid #bbf7d0; display: flex; flex-direction: column; gap: 2px; }
.due-reward.expired { background: #f8fafc; border-color: #e2e8f0; }
.due-reward-head { font-size: 12.5px; font-weight: 800; color: #15803d; }
.due-reward-head.muted { color: #94a3b8; }
.due-reward-line { font-size: 12px; color: #475569; }
.due-reward-line b { color: #0f172a; }
.due-reward-val { font-size: 12px; color: #475569; }
.due-reward-val b { color: #15803d; font-weight: 800; }
.due-card-foot { margin-top: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.due-card-foot .btn-elite-primary { margin-left: auto; }
.elite-empty.compact { padding: 28px 20px; }
@media (max-width: 480px) {
    .due-grid { grid-template-columns: 1fr; }
}

/* ===== Phase 2: clean policy reading layout ===== */
body.policy-doc { background: #f8fafc; margin: 0; }
.policy-top { background: #fff; border-bottom: 1px solid #eef2f7; position: sticky; top: 0; z-index: 10; }
.policy-top-in { max-width: 820px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; }
.policy-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 16px; color: #0f172a; text-decoration: none; }
.policy-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-accent, #f59e0b); display: inline-block; }
.policy-close { font-size: 13px; color: #64748b; text-decoration: none; font-weight: 600; }
.policy-close:hover { color: #0f172a; }
.policy-main { max-width: 820px; margin: 0 auto; padding: 32px 20px 48px; }
.policy-main .legal-page { background: #fff; border: 1px solid #eef2f7; border-radius: 16px; padding: 36px 40px; }
.policy-main .legal-hero { border-bottom: 1px solid #f1f5f9; padding-bottom: 18px; margin-bottom: 22px; }
.policy-main .legal-hero .eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; }
.policy-main .legal-hero h1 { font-size: 28px; margin: 8px 0 6px; color: #0f172a; }
.policy-main .legal-hero p { color: #64748b; margin: 0; }
.policy-main .prose { color: #334155; font-size: 14.5px; line-height: 1.7; }
.policy-main .prose h2 { font-size: 18px; color: #0f172a; margin: 26px 0 10px; }
.policy-main .prose ul { padding-left: 20px; }
.policy-main .prose li { margin: 5px 0; }
.policy-main .prose a { color: #2563eb; }
.policy-foot { text-align: center; color: #94a3b8; font-size: 12px; padding: 0 20px 32px; }
@media (max-width: 560px) {
    .policy-main { padding: 18px 14px 36px; }
    .policy-main .legal-page { padding: 22px 18px; }
    .policy-main .legal-hero h1 { font-size: 22px; }
}

/* ===================================================================
   ERP v3 — Suppliers / Purchases shared utilities + components
   =================================================================== */
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.row.gap { gap: 12px; }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; width: 100%; }

.badge.ok { background: #dcfce7; color: #15803d; }
.badge.warn { background: #fef3c7; color: #92400e; }
.badge.muted { background: #f1f5f9; color: #64748b; }

.btn-ghost.small, .btn-primary.small { padding: 4px 10px; font-size: 12px; border-radius: 8px; }
.btn-ghost.danger { color: #dc2626; border-color: #fecaca; }
.btn-ghost.danger:hover { background: #fef2f2; border-color: #fca5a5; }

/* stat tiles */
.stat-row { display: flex; gap: 12px; flex-wrap: wrap; }
.stat { flex: 1 1 160px; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 12px; padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; }
.stat span { font-size: 11.5px; color: #64748b; font-weight: 600; }
.stat strong { font-size: 20px; font-weight: 900; color: #0f172a; line-height: 1; }

/* horizontal scroll wrapper for wide tables */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* product search dropdown (purchase entry) */
.prod-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, .12); max-height: 320px; overflow-y: auto; z-index: 40; }
.pr-item { padding: 9px 14px; cursor: pointer; border-bottom: 1px solid #f1f5f9; }
.pr-item:last-child { border-bottom: none; }
.pr-item:hover { background: #eff6ff; }
.pr-empty { padding: 12px 14px; color: #94a3b8; font-size: 13px; }

/* purchase line-item table */
.purchase-lines th, .purchase-lines td { padding: 6px 6px; }
.purchase-lines input { padding: 6px 8px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 12.5px; }
.purchase-lines .f-pname { font-size: 12.5px; font-weight: 600; color: #0f172a; }

/* purchase totals panel */
.purchase-totals { display: flex; flex-direction: column; gap: 6px; max-width: 340px; margin-left: auto; }
.purchase-totals > div { display: flex; justify-content: space-between; font-size: 13px; color: #475569; }
.purchase-totals .grand { border-top: 1px solid #e2e8f0; margin-top: 4px; padding-top: 8px; font-size: 16px; font-weight: 900; color: #0f172a; }
.purchase-totals .grand strong { color: #15803d; }

@media (max-width: 760px) {
    .purchase-totals { max-width: none; }
}

@media print {
    .side, .top, nav, .btn-ghost, .btn-primary { display: none !important; }
    .content { margin: 0 !important; }
}

/* batch-aware billing chips (admin order view) */
.batch-chip { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #dbeafe; border-radius: 8px; padding: 4px 8px; font-size: 11.5px; cursor: default; }
.batch-chip .bc-name { font-weight: 800; color: #1d4ed8; }
.batch-chip .bc-meta { color: #64748b; }
.batch-chip .bc-qty { border: 1px solid #cbd5e1; border-radius: 6px; }
.batch-row td { border-top: none !important; }

/* ERP report toolbar + export buttons */
.rep-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 0 0 16px; }
.rep-toolbar label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: #64748b; font-weight: 600; }
.rep-toolbar input, .rep-toolbar select { padding: 8px 11px; border: 1px solid #e2e8f0; border-radius: 9px; font: inherit; background: #fff; }
.export-bar { display: flex; gap: 8px; margin-left: auto; }
.export-bar a { display: inline-flex; align-items: center; gap: 5px; padding: 8px 13px; border-radius: 9px; border: 1px solid #e2e8f0; background: #fff; text-decoration: none; color: #0f172a; font-size: 12.5px; font-weight: 600; }
.export-bar a:hover { background: #f8fafc; }
.export-bar a.csv:hover { border-color: #16a34a; color: #15803d; }
.export-bar a.xlsx:hover { border-color: #047857; color: #047857; }
.export-bar a.pdf:hover { border-color: #dc2626; color: #b91c1c; }
.export-bar a.print:hover { border-color: #2563eb; color: #1d4ed8; }

/* report sub-nav tabs */
.rep-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; border-bottom: 1px solid #eef2f7; padding-bottom: 0; }
.rep-tabs a { padding: 9px 15px; border-radius: 10px 10px 0 0; text-decoration: none; color: #64748b; font-size: 13px; font-weight: 600; border: 1px solid transparent; border-bottom: none; }
.rep-tabs a.active { background: #fff; color: #1d4ed8; border-color: #eef2f7; }
.rep-tabs a:hover { color: #1d4ed8; }

/* profit / report numeric helpers */
td.pos, .pos { color: #15803d; font-weight: 700; }

/* ── Admin Dashboard: Quick Actions ─────────────────────────────── */
.quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}
.qa-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: 1.5px solid transparent;
    transition: var(--t-fast);
    white-space: nowrap;
}
.qa-btn.primary   { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.qa-btn.primary:hover { background: var(--c-primary-600); color: #fff; border-color: var(--c-primary-600); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.qa-btn.green     { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.qa-btn.green:hover  { background: #16a34a; color: #fff; border-color: #16a34a; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.qa-btn.amber     { background: #fef9c3; color: #854d0e; border-color: #fde68a; }
.qa-btn.amber:hover  { background: #d97706; color: #fff; border-color: #d97706; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.qa-btn.rose      { background: #ffe4e6; color: #9f1239; border-color: #fecdd3; }
.qa-btn.rose:hover   { background: #e11d48; color: #fff; border-color: #e11d48; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.qa-btn.slate     { background: #f1f5f9; color: #334155; border-color: #e2e8f0; }
.qa-btn.slate:hover  { background: #334155; color: #fff; border-color: #334155; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.qa-btn.purple    { background: #f3e8ff; color: #6b21a8; border-color: #e9d5ff; }
.qa-btn.purple:hover { background: #7c3aed; color: #fff; border-color: #7c3aed; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
@media (max-width: 600px) { .qa-btn { padding: 8px 12px; font-size: 12px; } }

/* ── Dashboard: period comparison cards ─────────────────────────── */
.dash-period-card {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 16px 18px;
    box-shadow: var(--shadow-xs);
}
.dash-period-card h3 { font-size: 14px; margin: 0 0 12px; }
.period-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--c-border-soft); font-size: 13px; }
.period-row:last-child { border-bottom: none; }
.period-row .label { color: var(--c-muted); font-weight: 500; }
.period-row .count { font-weight: 600; min-width: 36px; text-align: right; color: var(--c-text-2); }
.period-row .val   { font-weight: 700; min-width: 90px; text-align: right; color: var(--c-text); }

/* ── Dashboard: alert row styling ───────────────────────────────── */
.alert-row-low   td { background: #fff7ed; }
.alert-row-exp   td { background: #fff1f2; }
td.neg, .neg { color: #dc2626; font-weight: 700; }