:root {
    --sidebar-width: 270px;
    --primary:       #4B39EF;
    --primary-light: #EEF0FF;
    --sidebar-bg:    #F8F9FA;
    --sidebar-border:#DEE2E6;
}

body { background: #F0F2F5; }

/* ── Sidebar ── */
#sidebar {
    width: var(--sidebar-width);
    min-height: 100vh;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.sidebar-brand-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #212529;
    line-height: 1.1;
}
.sidebar-brand-sub {
    font-size: 0.85rem;
    font-weight: 600;
    color: #28a745;
}

.nav-section-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #6c757d;
    padding: 0.25rem 0.75rem;
    list-style: none;
}

#sidebar .nav-link {
    color: #212529;
    border-radius: 8px;
    font-size: 0.9rem;
    padding: 0.55rem 0.75rem;
    display: flex;
    align-items: center;
}
#sidebar .nav-link:hover { background: #e9ecef; }
#sidebar .nav-link.active {
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 600;
}
#sidebar .nav-link.active i { color: var(--primary); }

.sidebar-user-info { min-width: 0; }
.sidebar-user-info .fw-semibold,
.sidebar-user-info .text-muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Page content ── */
#page-content { min-height: 100vh; }

.page-header {
    background: #fff;
    border-bottom: 1px solid var(--sidebar-border);
    padding: 1.25rem 1.5rem;
}
.page-header h1 { font-size: 1.4rem; font-weight: 700; margin: 0; }

/* ── Cards ── */
.card { border: 1px solid var(--sidebar-border); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.card-header { background: #fff; font-weight: 600; }

/* ── KPI cards ── */
.kpi-card { border-radius: 12px; }
.kpi-card .kpi-icon {
    width: 48px; height: 48px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
}
.kpi-card .kpi-value { font-size: 1.8rem; font-weight: 700; line-height: 1; }
.kpi-card .kpi-label { font-size: 0.8rem; color: #6c757d; margin-top: 2px; }

/* ── Status badges ── */
.badge-status-approved  { background: #d1fae5; color: #065f46; }
.badge-status-pending   { background: #fef9c3; color: #854d0e; }
.badge-status-rejected  { background: #fee2e2; color: #991b1b; }
.badge-status-submitted { background: #dbeafe; color: #1e40af; }

/* ── Review card ── */
.review-card { border-radius: 10px; }
.review-card .reviewer-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--primary-light); color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1rem; flex-shrink: 0;
}
.review-reply { background: #f8f9fa; border-left: 3px solid var(--primary); border-radius: 0 6px 6px 0; }

/* ── Audit form ── */
.audit-section { border-left: 4px solid var(--primary); }

/* ── Document tile ── */
.doc-tile {
    width: 140px; border-radius: 10px;
    background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.08);
    padding: 1rem; text-align: center;
}
.doc-tile .doc-icon {
    width: 48px; height: 48px; border-radius: 8px;
    background: #dc3545; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; margin: 0 auto .5rem;
}

/* ── Login page ── */
.login-wrapper {
    min-height: 100vh; background: linear-gradient(135deg, #4B39EF 0%, #2563EB 100%);
    display: flex; align-items: center; justify-content: center;
}
.login-card { width: 100%; max-width: 420px; border-radius: 16px; }

/* ── Pagination ── */
.pagination .page-link { color: var(--primary); }
.pagination .page-item.active .page-link { background: var(--primary); border-color: var(--primary); }

/* ── Utilities ── */
.btn-primary { background: var(--primary); border-color: var(--primary); }
.btn-primary:hover { background: #3a2ad0; border-color: #3a2ad0; }
.text-primary { color: var(--primary) !important; }