:root {
    --vij-navy: #1b2a4a;
    --vij-navy-dark: #131f38;
    --vij-blue: #2d5d8b;
    --vij-accent: #c98a2c;
    --vij-bg: #f4f6fa;
    --sidebar-width: 250px;
}

* { box-sizing: border-box; }

body {
    font-family: 'Inter', 'Segoe UI', sans-serif;
    background: var(--vij-bg);
    color: #222;
    margin: 0;
}

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

/* ---------------- Sidebar ---------------- */
.sidebar {
    width: var(--sidebar-width);
    background: var(--vij-navy);
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: transform .25s ease;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1.25rem 1.25rem;
    font-weight: 700;
    font-size: 1.05rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.sidebar-brand i { color: var(--vij-accent); font-size: 1.4rem; }

.sidebar-nav { padding: .75rem .6rem; flex: 1; overflow-y: auto; }

.sidebar-nav .nav-link,
.sidebar-footer .nav-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    color: rgba(255,255,255,.75);
    padding: .65rem .9rem;
    border-radius: .5rem;
    font-size: .92rem;
    margin-bottom: .2rem;
    text-decoration: none;
}

.sidebar-nav .nav-link i,
.sidebar-footer .nav-link i { width: 1.1rem; text-align: center; }

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

.sidebar-nav .nav-link.active {
    background: var(--vij-blue);
    color: #fff;
    font-weight: 600;
}

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 1030;
}

.sidebar-footer {
    padding: .75rem .6rem 1.25rem;
    border-top: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: .65rem;
    color: rgba(255,255,255,.5);
    font-size: .82rem;
    padding: .5rem .9rem .25rem;
}

.sidebar-user i { width: 1.1rem; text-align: center; font-size: 1rem; }

.sidebar-logout-btn {
    width: 100%;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

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

.topbar {
    background: #fff;
    border-bottom: 1px solid #e3e6ee;
    padding: .9rem 1.5rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.topbar-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0;
    color: var(--vij-navy);
}

.topbar-spacer { flex: 1; }

.sidebar-toggle { font-size: 1.4rem; color: var(--vij-navy); padding: 0; }

.content-area {
    padding: 1.5rem;
    flex: 1;
}

/* ---------------- Shared components ---------------- */
.stat-card {
    background: #fff;
    border-radius: .75rem;
    padding: 1.25rem 1.4rem;
    box-shadow: 0 1px 3px rgba(20,30,60,.08);
    border-left: 4px solid var(--vij-blue);
    height: 100%;
}

.stat-card .stat-value { font-size: 1.8rem; font-weight: 700; color: var(--vij-navy); }
.stat-card .stat-label { color: #6b7280; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; }
.stat-card.accent { border-left-color: var(--vij-accent); }
.stat-card.success { border-left-color: #2e7d52; }
.stat-card.muted { border-left-color: #9aa3b2; }

.card {
    border: 1px solid #e3e6ee;
    border-radius: .75rem;
}

.card-header {
    background: #fff;
    border-bottom: 1px solid #e3e6ee;
    font-weight: 600;
    color: var(--vij-navy);
}

.btn-primary {
    background-color: var(--vij-blue);
    border-color: var(--vij-blue);
}
.btn-primary:hover { background-color: var(--vij-navy); border-color: var(--vij-navy); }

.btn-vij-accent {
    background-color: var(--vij-accent);
    border-color: var(--vij-accent);
    color: #fff;
}
.btn-vij-accent:hover { background-color: #a8731f; border-color: #a8731f; color: #fff; }

.table thead th {
    background: #eef1f8;
    color: var(--vij-navy);
    font-weight: 600;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    border-bottom: none;
}

.badge-status-active { background: #2e7d52; }
.badge-status-inactive { background: #9aa3b2; }

.document-preview {
    background: #fff;
    border: 1px solid #d8dce6;
    border-radius: .5rem;
    padding: 2.2rem 2.5rem;
    max-width: 850px;
    margin: 0 auto;
    font-size: .92rem;
    line-height: 1.55;
}

/* Page-accurate previews: exact paper size + margins matching the
   generated PDF (reportlab) / DOCX (python-docx) page setup, so what you
   see on screen reflects the real downloaded document's geometry. Wrapped
   in a horizontally-scrollable container so the full-size page stays
   accurate on small screens instead of being squashed. */
.doc-page-wrapper {
    overflow-x: auto;
    padding: 1.5rem 0;
}

.doc-page {
    background: #fff;
    border: 1px solid #d8dce6;
    box-shadow: 0 2px 12px rgba(20, 30, 60, .1);
    margin: 0 auto;
    font-size: 11px;
    line-height: 1.5;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* Matches appointment_letter_template.docx section properties exactly:
   Letter (8.5 x 11in), margins T/B/L/R = 1.375/0.75/1.0/1.0in. */
.doc-page-letter {
    width: 8.5in;
    min-height: 11in;
    padding: 1.375in 1in .75in 1in;
}

/* Matches sal slip.xlsx page_setup/page_margins exactly:
   A4 (8.27 x 11.69in), margins T/B = 0.75in, L/R = 0.7in. */
.doc-page-a4 {
    width: 8.27in;
    min-height: 11.69in;
    padding: .75in .7in;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
        box-shadow: 0 0 25px rgba(0,0,0,.25);
    }
    .sidebar.show { transform: translateX(0); }
    .sidebar-backdrop.show { display: block; }
    .main-area { margin-left: 0; }
}

@media (max-width: 575.98px) {
    .content-area { padding: 1rem; }
    .topbar { padding: .75rem 1rem; }
    .document-preview { padding: 1.25rem; }
}