/* ============================================================
   VIJAY PLYWOOD — Distributor Management System
   Core stylesheet (blue & red brand theme, matching the VP logo)
   ============================================================ */

:root {
    /* --navy-* = primary blue scale, --gold-* = accent red scale (names kept for
       minimal churn across this file; the logo itself is a blue/red mark) */
    --navy-900: #0a1f44;
    --navy-800: #123a7a;
    --navy-700: #1a4fa0;
    --navy-600: #2563eb;
    --gold-500: #dc2626;
    --gold-400: #ef4444;
    --gold-100: #fee2e2;

    --bg-app: #f2f4f9;
    --bg-card: #ffffff;
    --text-primary: #1c2338;
    --text-secondary: #667085;
    --text-muted: #98a2b3;
    --border-color: #e6e9f0;

    --green-600: #16a34a;
    --green-100: #e8f8ee;
    --red-600: #dc2626;
    --red-100: #fdecec;
    --amber-600: #d97706;
    --amber-100: #fef3e0;
    --blue-600: #2563eb;
    --blue-100: #e9f0fe;

    --radius: 12px;
    --shadow-sm: 0 1px 2px rgba(10, 31, 68, 0.06);
    --shadow-md: 0 6px 16px rgba(10, 31, 68, 0.08);
    --sidebar-w: 256px;
    --topbar-h: 66px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
    overflow-x: hidden;
}

body {
    background: var(--bg-app);
    color: var(--text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14.5px;
}

a { text-decoration: none; }

/* ---------- Layout shell ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w);
    background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
    color: #d7e4f7;
    position: fixed;
    top: 0; bottom: 0; left: 0;
    display: flex;
    flex-direction: column;
    z-index: 1030;
    transition: transform .25s ease;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar-brand img { width: 38px; height: 38px; border-radius: 8px; background: #fff; object-fit: contain; padding: 3px; }
.sidebar-brand .brand-text { line-height: 1.15; }
.sidebar-brand .brand-text strong { display: block; font-size: 15.5px; letter-spacing: .3px; color: #fff; }
.sidebar-brand .brand-text span { font-size: 10.5px; color: var(--gold-400); letter-spacing: .5px; text-transform: uppercase; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: 14px 10px; }
.sidebar-nav .nav-section-title {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px;
    color: #7e96c4; margin: 16px 12px 6px;
}
.sidebar-nav .nav-link {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 9px;
    color: #cfdff2; font-size: 13.8px; font-weight: 500;
    margin-bottom: 2px; transition: background .15s, color .15s;
}
.sidebar-nav .nav-link i { font-size: 16px; width: 18px; text-align: center; color: #93abd6; }
.sidebar-nav .nav-link:hover { background: rgba(255,255,255,0.06); color: #fff; }
.sidebar-nav .nav-link.active { background: var(--gold-500); color: #fff; font-weight: 600; }
.sidebar-nav .nav-link.active i { color: #fff; }

.sidebar-footer { padding: 14px 18px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 11.5px; color: #7e96c4; }

/* ---------- Main content ---------- */
.main-content { margin-left: var(--sidebar-w); flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    height: var(--topbar-h);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px; position: sticky; top: 0; z-index: 1020;
}
.topbar .search-box {
    display: flex; align-items: center; gap: 8px;
    background: var(--bg-app); border: 1px solid var(--border-color);
    border-radius: 10px; padding: 8px 14px; width: 360px; max-width: 40vw;
}
.topbar .search-box input { border: none; background: transparent; outline: none; width: 100%; font-size: 13.5px; }
.topbar .search-box i { color: var(--text-muted); }

.topbar-actions { display: flex; align-items: center; gap: 14px; }
.icon-btn {
    width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border-color);
    background: var(--bg-card); display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary); position: relative; cursor: pointer;
}
.icon-btn:hover { background: var(--bg-app); }
.icon-btn .badge-dot {
    position: absolute; top: -3px; right: -3px; background: var(--red-600); color: #fff;
    font-size: 9.5px; min-width: 16px; height: 16px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; padding: 0 3px; font-weight: 700;
}
.user-chip { display: flex; align-items: center; gap: 10px; padding-left: 8px; cursor: pointer; }
.user-avatar {
    width: 36px; height: 36px; border-radius: 50%; background: var(--navy-800);
    color: var(--gold-400); display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px;
}
.user-chip .user-meta { line-height: 1.15; }
.user-chip .user-meta strong { display: block; font-size: 13px; color: var(--text-primary); }
.user-chip .user-meta span { font-size: 11px; color: var(--text-muted); }

.btn-quick-add {
    background: var(--gold-500); color: #fff; border: none;
    font-weight: 600; font-size: 13px; padding: 9px 16px; border-radius: 10px;
    display: flex; align-items: center; gap: 6px;
}
.btn-quick-add:hover { background: var(--gold-400); color: #fff; }

.page-body { padding: 24px; flex: 1; }

.page-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.page-header h1 { font-size: 21px; font-weight: 700; margin: 0; }
.page-header p { color: var(--text-secondary); font-size: 13px; margin: 3px 0 0; }

/* ---------- Date filter pills ---------- */
.date-filter { display: flex; gap: 6px; background: var(--bg-card); padding: 4px; border-radius: 10px; border: 1px solid var(--border-color); flex-wrap: wrap; }
.date-filter a {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 8px; color: var(--text-secondary);
    white-space: nowrap; text-align: center;
}
.date-filter a.active { background: var(--navy-800); color: #fff; }
.date-filter a:hover:not(.active) { background: var(--bg-app); }

/* On phones, wrap into a tidy 2-column grid instead of a ragged left-aligned wrap —
   every option lines up evenly; an odd last item (Custom) spans its own row. */
@media (max-width: 576px) {
    .date-filter { gap: 6px; }
    .date-filter a { flex: 1 1 calc(50% - 6px); padding: 9px 6px; }
}

/* ---------- Section tab pills (Sales/Purchase/Inventory sub-tabs, report sections, etc.) ----------
   One shared component instead of per-page inline styles. */
.tab-pills {
    display: flex; gap: 4px; background: var(--bg-card); padding: 5px; border-radius: 12px;
    border: 1px solid var(--border-color); margin-bottom: 20px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.tab-pills::-webkit-scrollbar { display: none; }
.tab-pills a {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 16px; border-radius: 8px; font-size: 13.5px; font-weight: 600; text-align: center;
    color: var(--text-secondary); white-space: nowrap; transition: background .15s, color .15s;
}
.tab-pills a:hover:not(.active) { background: var(--bg-app); color: var(--text-primary); }
.tab-pills a:active:not(.active) { background: var(--border-color); }

/* On phones, wrap into a tidy 2-column grid instead of a scrolling strip — every tab
   stays visible with no swipe needed. An odd last tab stretches to fill its own row. */
@media (max-width: 576px) {
    .tab-pills { flex-wrap: wrap; overflow-x: visible; }
    .tab-pills a { flex: 1 1 calc(50% - 4px); white-space: normal; font-size: 12.5px; padding: 9px 6px; }
}
.tab-pills a.active { background: var(--navy-800); color: #fff; }

/* ---------- Stat cards ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.stat-grid-3 { grid-template-columns: repeat(3, 1fr); }
.stat-grid-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1400px) { .stat-grid, .stat-grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1000px) { .stat-grid, .stat-grid-3, .stat-grid-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .stat-grid, .stat-grid-3, .stat-grid-5 { grid-template-columns: 1fr; } }

.stat-card {
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius);
    padding: 18px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.stat-card .stat-icon {
    width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
    font-size: 18px; margin-bottom: 12px;
}
.stat-card .stat-label { font-size: 12px; color: var(--text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.stat-card .stat-value { font-size: 22px; font-weight: 800; margin-top: 4px; color: var(--text-primary); }
.stat-card .stat-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
.stat-card .stat-trend { font-size: 11.5px; font-weight: 700; margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; }
.stat-trend.up { color: var(--green-600); }
.stat-trend.down { color: var(--red-600); }

.icon-blue { background: var(--blue-100); color: var(--blue-600); }
.icon-green { background: var(--green-100); color: var(--green-600); }
.icon-red { background: var(--red-100); color: var(--red-600); }
.icon-amber { background: var(--amber-100); color: var(--amber-600); }
.icon-navy { background: #e1ecfa; color: var(--navy-700); }
.icon-gold { background: var(--gold-100); color: var(--gold-500); }

/* ---------- Cards / panels ---------- */
.panel {
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); margin-bottom: 20px;
}
/* Side-by-side panels marked h-100 (e.g. Recent Invoices / Top Customers) already match
   height via the Bootstrap row's flex-stretch, but their content sat at natural height,
   leaving mismatched blank space instead of both tables/bodies stretching to fill it evenly. */
.panel.h-100 { display: flex; flex-direction: column; }
.panel.h-100 > .table-responsive,
.panel.h-100 > .panel-body { flex: 1 1 auto; }
.panel-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--border-color); }
.panel-header h2 { font-size: 15px; font-weight: 700; margin: 0; }
.panel-header .panel-link { font-size: 12.5px; font-weight: 600; color: var(--navy-700); }
.panel-header form { flex: 0 1 auto; width: 220px; max-width: 260px; min-width: 0; }
.panel-header form input,
.panel-header form select { width: 100% !important; }

/* Multi-field filter bar (category + search combos) needs its own controls sized
   individually instead of squeezed into the single-input 220px allowance above. */
.panel-header form.filter-bar { width: auto; max-width: none; flex: 1 1 auto; }
.panel-header form.filter-bar select,
.panel-header form.filter-bar input { width: auto !important; }

@media (max-width: 576px) {
    .panel-header { flex-direction: column; align-items: stretch; }
    .panel-header form { width: 100%; max-width: 100%; }
}

/* ---------- Filter bar: category/type select + search box, side by side on
   desktop. flex-wrap + a min-width per item means it folds onto its own line
   the moment it would otherwise get squeezed — no breakpoint to get wrong. ---------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-bar .filter-select {
    flex: 1 1 150px; min-width: 140px; border: 1px solid var(--border-color); border-radius: 8px;
    padding: 8px 12px; font-size: 13px; background: var(--bg-card); color: var(--text-primary);
}
.filter-bar .filter-search {
    flex: 2 1 200px; min-width: 180px; display: flex; align-items: center; gap: 8px;
    border: 1px solid var(--border-color); border-radius: 8px; padding: 8px 12px; background: var(--bg-card);
}
.filter-bar .filter-search i { color: var(--text-muted); font-size: 13px; flex-shrink: 0; }
.filter-bar .filter-search input { border: none; outline: none; background: transparent; width: 100%; font-size: 13px; color: var(--text-primary); min-width: 0; }
.filter-bar .filter-search input::placeholder { color: var(--text-muted); }

@media (max-width: 576px) {
    .filter-bar .filter-select,
    .filter-bar .filter-search { flex: 1 1 100%; }
}
.panel-body { padding: 18px 20px; }

/* ---------- Tables ---------- */
.table-clean { width: 100%; border-collapse: collapse; font-size: 13px; }
.table-clean thead th {
    text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
    color: var(--text-muted); font-weight: 700; padding: 10px 12px; border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}
.table-clean tbody td { padding: 12px; border-bottom: 1px solid var(--border-color); vertical-align: middle; }
.table-clean tbody tr:last-child td { border-bottom: none; }
.table-clean tbody tr:hover { background: #fafbfe; }

/* Stacked-card layout on narrow screens — no horizontal scrolling to read a row.
   JS (responsive-tables.js) copies each <th> label into a data-label attribute
   on the matching cells so this works for every table without per-page markup. */
@media (max-width: 767px) {
    .table-clean thead { display: none; }
    .table-clean, .table-clean tbody { display: block; width: 100%; }
    .table-clean tbody tr {
        display: block; background: var(--bg-card); border: 1px solid var(--border-color);
        border-radius: 10px; padding: 4px 14px; margin-bottom: 10px;
    }
    .table-clean tbody tr:hover { background: var(--bg-card); }
    .table-clean tbody td {
        display: flex; justify-content: space-between; align-items: center; gap: 12px;
        padding: 9px 0; border-bottom: 1px dashed var(--border-color); text-align: right; white-space: normal;
    }
    .table-clean tbody td:last-child { border-bottom: none; }
    .table-clean tbody td::before {
        content: attr(data-label); font-size: 10.5px; font-weight: 700; text-transform: uppercase;
        letter-spacing: .3px; color: var(--text-muted); text-align: left; flex-shrink: 0;
    }
    .table-clean tbody td:not([data-label])::before,
    .table-clean tbody td[data-label=""]::before { content: none; }
    /* Cells with multi-line content (e.g. name + business name) read better stacked than squeezed right */
    .table-clean tbody td:has(div) { flex-direction: column; align-items: flex-start; text-align: left; gap: 3px; }
    .table-clean tbody td:first-child {
        font-size: 14.5px; font-weight: 700; border-bottom: 1px solid var(--border-color);
        padding-bottom: 10px; margin-bottom: 2px; text-align: left;
    }
    .table-clean tbody td:first-child::before { content: none; }

    /* Line-item entry rows (invoice/order/return/adjustment forms) set inline
       px widths on <td> for their desktop table layout — ignore those in card
       mode so inputs/selects get the full row width instead of being squeezed. */
    .table-clean tbody td[style*="width"] { width: auto !important; min-width: 0 !important; }
    .table-clean tbody td:has(select, input) { flex-direction: column; align-items: stretch; text-align: left; gap: 4px; }
    .table-clean tbody td select, .table-clean tbody td input { width: 100%; }
}

.badge-status { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; display: inline-block; }
.badge-paid { background: var(--green-100); color: var(--green-600); }
.badge-partial { background: var(--amber-100); color: var(--amber-600); }
.badge-unpaid { background: var(--red-100); color: var(--red-600); }

.avatar-sm { width: 30px; height: 30px; border-radius: 50%; background: var(--navy-800); color: var(--gold-400); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11.5px; }

/* ---------- Login page ---------- */
.login-wrap { min-height: 100vh; display: flex; }
.login-side {
    flex: 1.1; background: radial-gradient(circle at 20% 20%, var(--navy-700), var(--navy-900) 70%);
    display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; padding: 40px;
    position: relative; overflow: hidden;
}
.login-side::after {
    content: ""; position: absolute; width: 500px; height: 500px; border: 1px solid rgba(220,38,38,0.25);
    border-radius: 50%; right: -180px; bottom: -180px;
}
.login-side img { width: 120px; margin-bottom: 18px; background: #fff; border-radius: 20px; padding: 10px; }
.login-side h2 { font-weight: 700; margin-bottom: 6px; }
.login-side p { color: #cfdff2; max-width: 340px; text-align: center; font-size: 13.5px; }
.login-form-wrap { flex: 1; display: flex; align-items: center; justify-content: center; background: var(--bg-card); }
.login-form { width: 100%; max-width: 380px; padding: 20px; }
.login-form h3 { font-weight: 800; font-size: 24px; margin-bottom: 4px; }
.login-form p.subtitle { color: var(--text-secondary); font-size: 13.5px; margin-bottom: 28px; }

@media (max-width: 767px) {
    .login-wrap { flex-direction: column; min-height: 100vh; }
    .login-side { flex: 0 0 auto; padding: 28px 24px; }
    .login-side::after { display: none; }
    .login-side img { width: 72px; margin-bottom: 10px; }
    .login-side h2 { font-size: 19px; }
    .login-side p { display: none; }
    .login-form-wrap { flex: 1; }
    .login-form { padding: 28px 20px; }
}
.form-control-modern {
    border: 1px solid var(--border-color); border-radius: 10px; padding: 12px 14px; font-size: 14px; width: 100%;
}
.form-control-modern:focus { outline: none; border-color: var(--navy-700); box-shadow: 0 0 0 3px rgba(26,79,160,0.15); }
.btn-navy { background: var(--navy-800); color: #fff; border: none; border-radius: 10px; padding: 12px; font-weight: 700; width: 100%; }
.btn-navy:hover { background: var(--navy-700); color: #fff; }

/* ---------- Misc ---------- */
.text-gold { color: var(--gold-500); }
.progress-thin { height: 6px; border-radius: 4px; background: var(--bg-app); overflow: hidden; }
.progress-thin > div { height: 100%; background: var(--gold-500); }

.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(10,31,68,0.55); z-index: 1025; }

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

@media (max-width: 576px) {
    /* Every module already has its own "New X" button on the page itself,
       so the topbar shortcut is redundant clutter on a phone-width screen. */
    .quick-add-wrap { display: none; }

    /* Topbar: tighten padding/gaps so hamburger + search + bell + avatar
       reliably fit without overflowing narrow (320-360px) phone screens. */
    .topbar { padding: 0 12px; gap: 12px; }
    .topbar > .d-flex.gap-3 { gap: 8px !important; flex: 1; min-width: 0; }
    .topbar .search-box { padding: 8px 10px; width: 100%; max-width: none; }
    .topbar-actions { gap: 10px; flex-shrink: 0; margin-left: auto; }
    .user-chip { padding-left: 0; gap: 6px; }
    .user-chip .bi-chevron-down { display: none; }
}

/* ---------- Print (Reports / Profit "Print / PDF" buttons) ----------
   window.print() prints the whole page by default, so without this the sidebar,
   topbar, filter pills and action buttons all end up on paper too. This strips
   the app chrome down to just the report panel/table, full width. */
@media print {
    .sidebar, .sidebar-backdrop, .topbar, .tab-pills, .date-filter, .no-print,
    .page-header .d-flex, .panel-header .d-flex, .quick-add-wrap, .modal { display: none !important; }
    .app-shell { display: block !important; min-height: 0; }
    .main-content { margin-left: 0 !important; }
    .page-body { padding: 0 !important; }
    .panel { border: none !important; box-shadow: none !important; margin-bottom: 0; }
    .panel-header { border-bottom: 2px solid #000; }
    body { background: #fff !important; }
    .table-responsive { overflow: visible !important; }
    table { font-size: 12px; }
}