:root {
    --sjv-orange: #f47b20;
    --sjv-dark: #1f2733;
    --sjv-sidebar: #202a38;
    --sjv-sidebar-hover: #2c3a4d;
    --sjv-muted: #8a97a8;
}

body {
    background: #f4f6f9;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    color: #2b3440;
}

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

.sidebar {
    width: 250px;
    background: var(--sjv-sidebar);
    color: #cdd6e2;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.sidebar .brand {
    display: flex; align-items: center; gap: .55rem;
    font-size: 1.15rem; font-weight: 700; color: #fff;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.sidebar .brand i { color: var(--sjv-orange); font-size: 1.4rem; }

.sidebar .nav-link {
    color: #cdd6e2; padding: .6rem 1.25rem;
    display: flex; align-items: center; gap: .65rem;
    border-left: 3px solid transparent; font-size: .94rem;
}
.sidebar .nav-link:hover { background: var(--sjv-sidebar-hover); color: #fff; }
.sidebar .nav-link.active {
    background: var(--sjv-sidebar-hover); color: #fff;
    border-left-color: var(--sjv-orange);
}
.sidebar .nav-section {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--sjv-muted); padding: 1rem 1.25rem .35rem;
}

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
    background: #fff; border-bottom: 1px solid #e6eaef;
    padding: .65rem 1.25rem; display: flex; align-items: center; gap: 1rem;
    position: sticky; top: 0; z-index: 5;
}
.topbar .page-title { font-weight: 600; font-size: 1.05rem; }
.topbar .user-box { margin-left: auto; display: flex; align-items: center; font-size: .9rem; }

.content { padding: 1.4rem; flex: 1; }
.footer { padding: .8rem 1.25rem; color: var(--sjv-muted); font-size: .82rem; border-top: 1px solid #e6eaef; background: #fff; }

/* ---------- Cards / stats ---------- */
.stat-card { border: none; border-radius: .6rem; box-shadow: 0 1px 3px rgba(16,24,40,.08); }
.stat-card .stat-value { font-size: 1.7rem; font-weight: 700; }
.stat-card .stat-label { color: var(--sjv-muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; }
.stat-icon { font-size: 1.8rem; opacity: .85; }

.card { border: none; border-radius: .6rem; box-shadow: 0 1px 3px rgba(16,24,40,.07); }
.card-header { background: #fff; border-bottom: 1px solid #eef1f5; font-weight: 600; }

.btn-primary { background: var(--sjv-orange); border-color: var(--sjv-orange); }
.btn-primary:hover { background: #db6a13; border-color: #db6a13; }
.text-orange { color: var(--sjv-orange); }

.table thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: #5b6675; }
.table-sm td, .table-sm th { padding: .45rem .6rem; }

/* ---------- Login ---------- */
.login-wrap {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #202a38 0%, #2c3a4d 100%);
}
.login-card { width: 100%; max-width: 390px; }
.login-card .brand-head {
    text-align: center; padding: 1.4rem 0 .4rem;
}
.login-card .brand-head i { font-size: 2.4rem; color: var(--sjv-orange); }

@media (max-width: 768px) {
    .sidebar { position: fixed; left: -260px; z-index: 1000; transition: left .25s; }
    .sidebar.open { left: 0; }
}

/* Report hub cards */
.report-card { transition: transform .12s ease, box-shadow .12s ease; }
.report-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); border-color: var(--brand, #f47b20); }

/* Print: hide chrome on invoice */
@media print {
    .sidebar, .topbar, .btn, form { display: none !important; }
    .content { margin: 0 !important; padding: 0 !important; }
    .card { border: none !important; box-shadow: none !important; }
}