html, body {
    min-height: 100%;
}

body {
    background: #f5f7fb;
    color: #1f2937;
}

.app-navbar {
    background: var(--navbar-color) !important;
    min-height: 4.25rem;
}

.app-navbar .navbar-item,
.app-navbar .navbar-link,
.app-navbar a {
    color: #fff;
}

.app-navbar .button.is-light {
    color: #1f2937;
}

.brand-mark {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(255,255,255,.16);
    margin-right: 10px;
}

.app-shell {
    display: flex;
    min-height: calc(100vh - 4.25rem);
}

.app-sidebar {
    width: 260px;
    flex: 0 0 260px;
    background: var(--sidebar-color);
    color: #fff;
    padding: 1.5rem 1rem;
}

.app-main {
    flex: 1;
    min-width: 0;
}

.app-sidebar .menu-list a {
    color: #cbd5e1;
    border-radius: 8px;
    margin-bottom: 4px;
    padding: .75rem .9rem;
}

.app-sidebar .menu-list a:hover,
.app-sidebar .menu-list a.is-active {
    background: rgba(255,255,255,.10);
    color: #fff;
}

.sidebar-label,
.sidebar-muted {
    color: #94a3b8 !important;
}

.sidebar-user {
    display: flex;
    gap: .75rem;
    align-items: center;
}

.avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.stat-card {
    height: 100%;
    border-radius: 14px;
    box-shadow: 0 8px 25px rgba(15, 23, 42, .06);
}

.stat-number {
    font-size: 1.8rem;
    font-weight: 800;
}

.status-card {
    border-radius: 16px;
    height: 100%;
}

@media (max-width: 900px) {
    .app-sidebar {
        width: 220px;
        flex-basis: 220px;
    }
}

@media (max-width: 700px) {
    .app-shell {
        display: block;
    }
    .app-sidebar {
        width: 100%;
        min-height: auto;
    }
    .app-navbar .navbar-menu {
        display: block;
    }
}