/* ============================================================
   SHIVARAH SILVER JEWELLERY — Distributor Management System
   Core stylesheet (green / gold brand theme)
   ============================================================ */

:root {
    --navy-900: #0b2e1c;
    --navy-800: #103c24;
    --navy-700: #1c5c37;
    --navy-600: #2a7a4a;
    --gold-500: #c9a227;
    --gold-400: #d9b84a;
    --gold-100: #faf3dd;

    --bg-app: #f5ead9;
    --bg-card: #ffffff;
    --text-primary: #2a2b24;
    --text-secondary: #6b6a5e;
    --text-muted: #98978a;
    --border-color: #e9e1d0;
    --font-heading: 'Playfair Display', Georgia, serif;

    --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(16, 24, 60, 0.06);
    --shadow-md: 0 6px 16px rgba(16, 24, 60, 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: #d7e6dc;
    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-family: var(--font-heading); font-size: 17px; 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: rgba(217,184,74,0.65); margin: 16px 12px 6px;
}
.sidebar-nav .nav-link {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 9px;
    color: #cfe3d6; 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: #8fbf9c; }
.sidebar-nav .nav-link:hover { background: rgba(255,255,255,0.06); color: #fff; }
.sidebar-nav .nav-link.active { background: var(--gold-500); color: var(--navy-900); font-weight: 600; }
.sidebar-nav .nav-link.active i { color: var(--navy-900); }

.sidebar-footer { padding: 14px 18px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 11.5px; color: rgba(217,184,74,0.5); }

/* ---------- 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: var(--navy-900); 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: var(--navy-900); }

.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-family: var(--font-heading); font-size: 24px; font-weight: 700; color: var(--navy-700); margin: 0; }
.page-header p { color: var(--text-secondary); font-size: 13px; margin: 3px 0 0; }

.rate-pill {
    display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px;
    background: var(--navy-900); color: #fff; padding: 7px 16px; border-radius: 20px; font-size: 12.5px;
    max-width: 100%;
}
/* Each metal's dropdown/label + its value wraps as one atomic unit — without this, a narrow
   screen could wrap mid-label (e.g. "Gold" on one line, "22K" on the next) instead of moving
   the whole "Silver ₹255/g" group down as a clean second line. */
.rate-pill-group { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rate-pill-label { color: var(--gold-400); font-weight: 700; }
.rate-pill-value { font-weight: 600; }
.rate-pill-sep { width: 1px; height: 14px; background: rgba(255,255,255,0.25); }
@media (max-width: 360px) {
    .rate-pill-sep { display: none; }
}
.rate-dropdown { position: relative; }
.rate-dropdown-toggle {
    background: transparent; border: none; color: var(--gold-400); font-weight: 700; font-size: 12.5px;
    font-family: inherit; padding: 0; margin: 0; cursor: pointer; display: flex; align-items: center; gap: 6px;
}
.rate-dropdown-toggle i { font-size: 9px; transition: transform .15s ease; color: var(--gold-400); }
.rate-dropdown.open .rate-dropdown-toggle i { transform: rotate(180deg); }
.rate-dropdown-menu {
    display: none; position: absolute; top: calc(100% + 10px); left: 0; min-width: 120px;
    background: var(--navy-900); border: 1px solid rgba(217,184,74,0.3); border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.4); overflow: hidden; z-index: 60; padding: 4px;
}
.rate-dropdown-menu.show { display: block; }
.rate-dropdown-item {
    padding: 8px 12px; font-size: 12.5px; font-weight: 600; color: #cfe3d6; cursor: pointer; border-radius: 7px;
}
.rate-dropdown-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
.rate-dropdown-item.selected { background: var(--gold-500); color: var(--navy-900); }

/* ---------- 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: #e5f2ea; 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;
}
.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-family: var(--font-heading); font-size: 17px; font-weight: 700; color: var(--navy-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; }

/* Groups several related panels under one labeled banner (e.g. Settings' "Invoice
   Settings" cluster) — heavier than a panel-header so it reads as a page section,
   not just another card title. */
.settings-section-title { margin: 28px 0 6px; padding-top: 4px; border-top: 1px solid var(--border-color); }
.settings-section-title:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.settings-section-title h2 { font-family: var(--font-heading); font-size: 19px; font-weight: 700; color: var(--navy-700); margin: 16px 0 4px; }
.settings-section-title p { color: var(--text-muted); font-size: 13px; margin: 0 0 10px; }
.settings-feature-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 16px; }
.settings-feature-list li { background: var(--gold-100); color: var(--gold-500); font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 999px; }

/* Masters > Categories: a category with subcategories links through to its own
   drill-down page (?parent=id) rather than expanding inline. */
.cat-drill-link { color: inherit; text-decoration: none; }
.cat-drill-link:hover { color: var(--gold-500); }
.cat-drill-link i { font-size: 12px; color: var(--gold-500); margin-left: 4px; }

/* 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(201,162,39,0.25);
    border-radius: 50%; right: -180px; bottom: -180px;
}
.login-brand { display: flex; flex-direction: column; align-items: center; }
.login-brand img { width: 96px; margin-bottom: 16px; background: #fff; border-radius: 18px; padding: 8px; }
.login-brand h2 { font-family: var(--font-heading); font-size: 26px; font-weight: 800; letter-spacing: 2px; margin: 0; color: var(--gold-400); }
.login-brand-sub { font-size: 11px; font-weight: 600; letter-spacing: 3px; color: #b9d9c4; margin-top: 4px; }
.login-divider { width: 60px; height: 2px; background: var(--gold-500); margin: 18px 0 22px; opacity: .8; }
.login-tagline { color: #cfe3d7; max-width: 320px; text-align: center; font-size: 13.5px; margin: 0 0 24px; }
.login-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.login-features li { font-size: 13px; font-weight: 600; color: #eef7f0; padding-left: 18px; position: relative; }
.login-features li::before { content: ""; position: absolute; left: 0; top: 5px; width: 7px; height: 7px; background: var(--gold-500); border-radius: 2px; }

.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-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 30px; }
.login-form-brand img { width: 26px; height: 26px; object-fit: contain; }
.login-form-brand span { font-size: 12px; font-weight: 800; letter-spacing: 1.2px; color: var(--navy-700); }
.login-form h3 { font-family: var(--font-heading); font-weight: 700; font-size: 26px; color: var(--navy-700); margin-bottom: 4px; }
.login-form p.subtitle { color: var(--text-secondary); font-size: 13.5px; margin-bottom: 28px; }
.login-form-footer { text-align: center; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-color); font-size: 11.5px; color: var(--text-muted); }

.input-icon { position: relative; }
.input-icon > i:first-child { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 14px; pointer-events: none; }
.input-icon .form-control-modern { padding-left: 40px; }
.input-icon .input-icon-toggle {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    border: none; background: none; color: var(--text-muted); padding: 4px 6px; line-height: 1;
}
.input-icon .input-icon-toggle:hover { color: var(--text-primary); }
.input-icon .form-control-modern:has(+ .input-icon-toggle) { padding-right: 38px; }

@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-brand img { width: 64px; margin-bottom: 10px; }
    .login-brand h2 { font-size: 19px; }
    .login-tagline, .login-features { display: none; }
    .login-divider { margin: 14px 0; }
    .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(28,92,55,0.12); }
.btn-navy { background: var(--navy-800); color: #fff; border: none; border-radius: 10px; padding: 12px; font-weight: 700; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-navy:hover { background: var(--navy-700); color: #fff; }

/* Bootstrap's .btn-close positions itself assuming the alert's default (larger) padding —
   this app's flash messages use a shorter "py-2 small" alert, so the default top:0 fixed
   offset leaves the × sitting too high instead of centered against the shorter box. */
.alert-dismissible .btn-close { top: 50%; transform: translateY(-50%); }

/* ---------- 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(13,23,48,0.5); 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; }
}