:root {
    --primary: #4f46e5;
    --primary-dark: #4338ca;
    --primary-light: #eef2ff;
    --accent: #06b6d4;
    --success: #16a34a;
    --danger: #dc2626;
    --warning: #f59e0b;
    --sidebar-w: 250px;
    --bg: #f4f6fb;
    --text-dark: #1e293b;
}

* { box-sizing: border-box; }

body {
    background: var(--bg);
    font-family: 'Segoe UI', Tahoma, Verdana, sans-serif;
    color: var(--text-dark);
}

/* ---------------- Sidebar ---------------- */
.sidebar {
    width: var(--sidebar-w);
    height: 100vh;
    position: fixed;
    top: 0; left: 0;
    background: linear-gradient(180deg, #1e1b4b 0%, #312e81 60%, #4338ca 100%);
    color: #fff;
    padding-top: 0;
    z-index: 1030;
    transition: transform .25s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar .brand {
    flex: 0 0 auto;
    padding: 22px 20px;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .5px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar .brand i { color: var(--accent); }

/* Scrollable nav area so long menus don't get cut off the viewport */
.sidebar .nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.35) transparent;
}

.sidebar .nav::-webkit-scrollbar {
    width: 6px;
}

.sidebar .nav::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar .nav::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,.3);
    border-radius: 10px;
}

.sidebar .nav::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255,255,255,.5);
}

.sidebar .nav-link {
    color: rgba(255,255,255,.8);
    padding: 12px 22px;
    font-size: .95rem;
    display: flex;
    align-items: center;
    gap: 12px;
    border-left: 3px solid transparent;
    transition: all .15s ease;
}

.sidebar .nav-link i { width: 18px; text-align: center; }

.sidebar .nav-link:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
}

.sidebar .nav-link.active {
    background: rgba(255,255,255,.12);
    color: #fff;
    border-left: 3px solid var(--accent);
    font-weight: 600;
}

.sidebar .nav-section {
    padding: 14px 22px 6px;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,.4);
}

/* ---------------- Main content ---------------- */
.main-content {
    margin-left: var(--sidebar-w);
    min-height: 100vh;
}

.topbar {
    background: #fff;
    padding: 14px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    position: sticky;
    top: 0;
    z-index: 1020;
}

.topbar .store-badge {
    background: var(--primary-light);
    color: var(--primary-dark);
    padding: 5px 14px;
    border-radius: 20px;
    font-size: .8rem;
    font-weight: 600;
}

.page-wrap { padding: 26px; }

/* ---------------- Cards ---------------- */
.stat-card {
    border: none;
    border-radius: 16px;
    padding: 22px;
    color: #fff;
    box-shadow: 0 8px 20px rgba(79,70,229,.15);
    position: relative;
    overflow: hidden;
}

.stat-card .icon-circle {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: rgba(255,255,255,.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
}

.stat-card h3 { font-size: 1.7rem; font-weight: 700; margin: 8px 0 2px; }
.stat-card p { margin: 0; opacity: .9; font-size: .85rem; }

.bg-grad-1 { background: linear-gradient(135deg,#4f46e5,#6366f1); }
.bg-grad-2 { background: linear-gradient(135deg,#06b6d4,#0891b2); }
.bg-grad-3 { background: linear-gradient(135deg,#16a34a,#22c55e); }
.bg-grad-4 { background: linear-gradient(135deg,#f59e0b,#f97316); }
.bg-grad-5 { background: linear-gradient(135deg,#db2777,#ec4899); }
.bg-grad-6 { background: linear-gradient(135deg,#0d9488,#14b8a6); }

.card {
    border: none;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
}

.card-header {
    background: #fff;
    border-bottom: 1px solid #eef0f5;
    border-radius: 14px 14px 0 0 !important;
    font-weight: 600;
    padding: 16px 20px;
}

.table thead th {
    background: #f8f9fc;
    border-bottom: none;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #64748b;
    padding: 12px 16px;
}

.table td { padding: 12px 16px; vertical-align: middle; }

.badge-low { background: #fee2e2; color: #b91c1c; }
.badge-ok { background: #dcfce7; color: #15803d; }
.badge-mid { background: #fef3c7; color: #b45309; }

.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
}
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }

/* ---------------- WhatsApp buttons (invoice / PO send-to-supplier) ---------------- */
.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    border: none;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(18, 140, 126, .35);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-whatsapp i { font-size: 1.05rem; }
.btn-whatsapp:hover,
.btn-whatsapp:focus {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(18, 140, 126, .45);
    filter: brightness(1.05);
}
.btn-whatsapp:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(18, 140, 126, .35); }
/* Icon-only variant (the "send automatically via API" button) */
.btn-whatsapp-icon {
    width: 40px;
    padding: 0;
    justify-content: center;
    background: linear-gradient(135deg, #128c7e 0%, #075e54 100%);
    box-shadow: 0 2px 8px rgba(7, 94, 84, .35);
}
.btn-whatsapp-icon:hover { box-shadow: 0 5px 14px rgba(7, 94, 84, .45); }

.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,#1e1b4b,#4338ca 55%,#06b6d4);
    position: relative;
    overflow: hidden;
    padding: 24px;
}

/* Soft decorative glows in the background */
.login-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(10px);
    opacity: .35;
    pointer-events: none;
}
.login-orb-1 {
    width: 420px; height: 420px;
    background: radial-gradient(circle, var(--accent), transparent 70%);
    top: -140px; left: -120px;
}
.login-orb-2 {
    width: 480px; height: 480px;
    background: radial-gradient(circle, #a855f7, transparent 70%);
    bottom: -180px; right: -140px;
}

.login-shell {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    max-width: 900px;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0,0,0,.35);
}

/* Left showcase panel (desktop only) */
.login-showcase {
    flex: 1 1 52%;
    background: linear-gradient(150deg,#1e1b4b 0%,#4338ca 60%,#06b6d4 130%);
    color: #fff;
    padding: 48px 44px;
    position: relative;
}
.login-showcase-inner { max-width: 380px; }

.brand-mark {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 40px;
}
.brand-mark-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.25);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
    backdrop-filter: blur(4px);
}
.brand-mark-text {
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: .3px;
}
.brand-mark-text b { font-weight: 800; }

.login-showcase h2 {
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 1.85rem;
    line-height: 1.3;
    margin-bottom: 16px;
}
.login-showcase p {
    color: rgba(255,255,255,.8);
    font-size: .95rem;
    line-height: 1.6;
    margin-bottom: 28px;
}
.showcase-points {
    list-style: none;
    padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 12px;
}
.showcase-points li {
    font-size: .92rem;
    color: rgba(255,255,255,.92);
    display: flex; align-items: center; gap: 10px;
}
.showcase-points i { color: #34d399; font-size: 1rem; }

/* Right login card */
.login-card {
    flex: 1 1 48%;
    background: #fff;
    width: 380px;
    max-width: 100%;
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-card .logo {
    width: 58px; height: 58px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 16px;
    box-shadow: 0 8px 20px rgba(79,70,229,.35);
}

.login-title {
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: 1.4rem;
    color: var(--text-dark);
}
.login-title span { color: var(--primary); }

.input-icon-wrap { position: relative; }
.input-icon-wrap i {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: .9rem;
}
.input-icon-wrap .form-control { padding-left: 38px; }

.login-card .btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border: none;
    box-shadow: 0 10px 24px rgba(79,70,229,.35);
}
.login-card .btn-primary:hover { filter: brightness(1.07); }

@media (max-width: 991px) {
    .login-shell { max-width: 420px; }
    .login-card { width: 100%; padding: 40px 30px; }
}

/* Backdrop shown behind the sidebar on mobile; click it to close the menu */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 1020;
}

@media (max-width: 991px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.show { transform: translateX(0); }
    .main-content { margin-left: 0; }
    .sidebar-backdrop.show { display: block; }
}

/* Slightly tighter spacing so the full Operations list (now longer for
   shopkeepers too) stays comfortable to scan without feeling cramped. */
.sidebar .nav-link { padding: 10px 22px; font-size: .9rem; }
.sidebar .nav-section { padding: 12px 22px 5px; }

/* ---------------- Printable documents (Invoice / PO) ---------------- */
.doc-card { overflow: hidden; }

.doc-band {
    height: 6px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    margin: -1px -1px 0;
}

.doc-body { padding: 2rem; position: relative; }

.doc-logo {
    width: 46px; height: 46px;
    border-radius: 12px;
    background: var(--primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
/* When a store has uploaded its own logo image (instead of the
   default icon box), keep the same footprint but show the actual
   picture, letterboxed on a light background. */
.doc-logo-img {
    object-fit: contain;
    background: #f1f5f9;
    padding: 4px;
}

/* ---------------- Store logo uploader (Profile / Store Management) ---------------- */
.logo-uploader {
    display: flex;
    align-items: center;
    gap: 18px;
}
.logo-uploader-preview {
    width: 72px; height: 72px;
    border-radius: 14px;
    background: var(--primary-light);
    color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}
.logo-uploader-preview img {
    width: 100%; height: 100%;
    object-fit: contain;
}

.doc-title-tag {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--primary);
    background: var(--primary-light);
    padding: 4px 10px;
    border-radius: 6px;
}

.doc-table thead th {
    background: var(--primary-light);
    color: var(--primary-dark);
    border-bottom: none;
}

.doc-totals-box {
    background: #f8f9fc;
    border-radius: 12px;
    padding: 18px 22px;
}

.doc-totals-box .grand-row {
    border-top: 2px solid #e2e8f0;
    margin-top: 8px;
    padding-top: 10px;
    font-size: 1.05rem;
}

.doc-footer-note {
    border-top: 1px dashed #dfe3ec;
    margin-top: 44px;
    padding-top: 16px;
}

.doc-stamp {
    position: absolute;
    top: 90px;
    right: 10px;
    transform: rotate(16deg);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 3px;
    padding: 6px 26px;
    border: 3px solid currentColor;
    border-radius: 10px;
    opacity: .22;
    pointer-events: none;
    text-transform: uppercase;
    z-index: 0;
}
.doc-stamp.stamp-green { color: var(--success); }
.doc-stamp.stamp-amber { color: var(--warning); }
.doc-stamp.stamp-red { color: var(--danger); }

@media print {
    .sidebar, .topbar, .no-print { display: none !important; }
    .main-content { margin-left: 0 !important; }
    .page-wrap { padding: 0 !important; }
    body { background: #fff !important; }
    .card { box-shadow: none !important; border: none !important; border-radius: 0 !important; }
    .doc-band { margin: 0; }
    .doc-body { padding: .5rem 0 0; }
    table { page-break-inside: auto; }
    tr { page-break-inside: avoid; page-break-after: auto; }
    @page { margin: 14mm; }
}

/* ---------------- Customers page ---------------- */
.page-header-icon {
    width: 46px; height: 46px;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(79,70,229,.25);
}

.avatar-circle {
    width: 38px; height: 38px;
    border-radius: 50%;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: .5px;
}

.customer-row-link { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.customer-row-link .cust-name { color: var(--text-dark); font-weight: 600; transition: color .15s ease; }
.customer-row-link .cust-sub { color: #94a3b8; font-size: .78rem; }
.customer-row-link:hover .cust-name { color: var(--primary); }

.table-hover-row tbody tr { transition: background-color .12s ease; }
.table-hover-row tbody tr:hover { background-color: #f8f9ff; }

.search-card .input-group-text {
    background: #fff;
    border-right: none;
    color: #94a3b8;
}
.search-card .form-control { border-left: none; }
.search-card .form-control:focus { box-shadow: none; border-color: #dfe3ec; }
.search-card .input-group:focus-within .input-group-text { color: var(--primary); }

.due-toggle .btn-check:checked + .btn-outline-danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

.balance-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 700;
    font-size: .85rem;
}
.balance-pill.due { background: #fee2e2; color: #b91c1c; }
.balance-pill.clear { background: #dcfce7; color: #15803d; }

.empty-state { padding: 56px 20px; text-align: center; color: #94a3b8; }
.empty-state i { font-size: 2.4rem; margin-bottom: 12px; opacity: .5; display: block; }

/* ---------------- Notifications bell dropdown ---------------- */
.notif-bell {
    position: relative;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: #f4f6fb;
    color: #475569;
    font-size: 1.05rem;
    transition: background .15s ease, color .15s ease;
}
.notif-bell:hover { background: var(--primary-light); color: var(--primary); }
.notif-dot {
    position: absolute;
    top: -2px; right: -2px;
    min-width: 18px; height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}
.notif-dropdown {
    width: 340px;
    max-width: 88vw;
    max-height: 380px;
    overflow-y: auto;
    border: none;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(15,23,42,.15);
}
.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #f1f5f9;
    transition: background .12s ease;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: #f8f9ff; }
.notif-item i {
    width: 32px; height: 32px;
    flex-shrink: 0;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem;
}
.notif-item.warn i { background: #fef3c7; color: #b45309; }
.notif-item.info i { background: #eef2ff; color: var(--primary); }
.notif-empty {
    padding: 30px 16px;
    text-align: center;
    color: #94a3b8;
    font-size: .85rem;
}

/* ---------------- Dashboard: mini financial stat + chart wrappers ---------------- */
.mini-stat {
    background: #fff;
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    height: 100%;
}
.mini-stat-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 1.05rem;
}
.mini-stat h4 { font-size: 1.15rem; font-weight: 700; margin: 0 0 2px; }
.mini-stat p { margin: 0; color: #64748b; font-size: .78rem; }

.chart-wrap { position: relative; height: 260px; width: 100%; }
.chart-wrap-donut { height: 220px; }

.bg-grad-progress { background: linear-gradient(90deg, var(--primary), var(--accent)); }

/* =========================================================
   Mobile responsiveness
   ========================================================= */
@media (max-width: 991px) {
    .page-wrap { padding: 18px; }
    .chart-wrap { height: 220px; }
}

@media (max-width: 767px) {
    .page-wrap { padding: 14px; }
    .row.g-3 { --bs-gutter-x: 0.75rem; --bs-gutter-y: 0.75rem; }

    .topbar { padding: 10px 14px; }
    .topbar h5 { font-size: .95rem; }
    .topbar .store-badge { display: none; }

    .stat-card { padding: 16px; border-radius: 14px; }
    .stat-card .icon-circle { width: 40px; height: 40px; font-size: 1.05rem; border-radius: 11px; }
    .stat-card h3 { font-size: 1.25rem; margin: 6px 0 2px; }
    .stat-card p { font-size: .74rem; }

    .mini-stat { padding: 12px 14px; gap: 10px; }
    .mini-stat-icon { width: 38px; height: 38px; font-size: .95rem; border-radius: 10px; }
    .mini-stat h4 { font-size: 1rem; }
    .mini-stat p { font-size: .72rem; }

    .card-header { padding: 12px 14px; font-size: .9rem; }
    .card-body { padding: 14px; }

    .chart-wrap { height: 200px; }
    .chart-wrap-donut { height: 200px; }

    .table thead th, .table td { padding: 10px 12px; font-size: .82rem; }

    .doc-body { padding: 1.1rem; overflow-x: auto; }
    .login-card { padding: 34px 22px; }
}

@media (max-width: 420px) {
    .stat-card h3 { font-size: 1.1rem; }
    .notif-dropdown { width: 300px; }
}