/* style.css - CSS seminimal mungkin, mengandalkan Bootstrap 5 + CSS variables branding */

body {
    background-color: var(--brand-bg, #f4f6f9);
    color: var(--brand-text, #212529);
}

.login-body {
    min-height: 100vh;
    background: linear-gradient(135deg, #f4f6f9 0%, #e9ecef 100%);
}
.login-card { width: 100%; max-width: 380px; border-radius: 12px; border: none; }

.app-navbar {
    background-color: var(--brand-navbar, #fff);
    border-bottom: 1px solid var(--brand-border, #dee2e6);
    padding: .6rem 1rem;
    position: sticky; top: 0; z-index: 1030;
}

.app-wrapper { display: flex; min-height: calc(100vh - 120px); }

.app-sidebar {
    width: 230px;
    flex-shrink: 0;
    background-color: var(--brand-sidebar, #1e293b);
    min-height: 100%;
    padding-top: 1rem;
}
.app-sidebar .nav-link {
    color: rgba(255,255,255,.75);
    padding: .6rem 1.2rem;
    border-radius: 0;
    font-size: .92rem;
}
.app-sidebar .nav-link i { width: 20px; display: inline-block; }
.app-sidebar .nav-link:hover, .app-sidebar .nav-link.active {
    background-color: rgba(255,255,255,.08);
    color: #fff;
    border-left: 3px solid var(--brand-primary, #0d6efd);
}

.app-content { flex: 1; padding: 1.5rem; min-width: 0; }

.card {
    background-color: var(--brand-card, #fff);
    border: 1px solid var(--brand-border, #dee2e6);
    border-radius: var(--brand-radius, 8px);
}

.stat-card { border-radius: var(--brand-radius, 8px); }
.stat-card .icon-box {
    width: 48px; height: 48px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}

.app-footer { border-top: 1px solid var(--brand-border, #dee2e6); background: var(--brand-card, #fff); }

@media (max-width: 991.98px) {
    .app-sidebar {
        position: fixed; left: -230px; top: 56px; bottom: 0; z-index: 1020;
        transition: left .2s ease;
    }
    .app-sidebar.show { left: 0; }
}