:root {
    --sidebar-width: 260px;
    --brand-navy: #191970;
    --brand-navy-dark: #12134a;
    --brand-accent: #ff5a1f;
}

body {
    background: #f4f6fb;
}

/* ---------- Sidebar ---------- */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: var(--brand-navy);
    overflow-y: auto;
    z-index: 1030;
    transition: transform .2s ease-in-out;
}

.sidebar-brand {
    color: #fff;
    font-weight: 700;
    font-size: 1.4rem;
    padding: 1.25rem 1.25rem 0.25rem;
}

.sidebar-brand small {
    display: block;
    font-size: .7rem;
    font-weight: 400;
    color: #b9b9d8;
    letter-spacing: .04em;
}

.sidebar .nav-link {
    color: #d6d6ec;
    font-size: .92rem;
    font-weight: 500;
    padding: .7rem 1.25rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    border-left: 3px solid transparent;
}

.sidebar .nav-link i {
    font-size: 1.1rem;
    width: 1.3rem;
    text-align: center;
}

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

.sidebar .nav-link.active {
    background: rgba(255, 255, 255, .1);
    color: #fff;
    border-left-color: var(--brand-accent);
}

.sidebar .nav-children .nav-link {
    padding-left: 2.75rem;
    font-size: .85rem;
}

.sidebar .nav-toggle::after {
    content: "\F282";
    font-family: "bootstrap-icons";
    margin-left: auto;
    font-size: .8rem;
    transition: transform .15s ease;
}

.sidebar .nav-toggle[aria-expanded="true"]::after {
    transform: rotate(90deg);
}

/* ---------- Main area ---------- */
.main-wrapper {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.main-wrapper.no-sidebar {
    margin-left: 0;
}

.topbar {
    background: #fff;
    border-bottom: 1px solid #e6e8f0;
    padding: .75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.wallet-chip {
    background: #eef0fb;
    border: 1px solid #d7dcf5;
    border-radius: 999px;
    padding: .35rem .9rem;
    font-weight: 700;
    color: var(--brand-navy);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

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

@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
    }
    .sidebar.show {
        transform: translateX(0);
    }
    .main-wrapper {
        margin-left: 0;
    }
}

/* ---------- Bill Payments big icon grid ---------- */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1.5rem;
}

.category-tile {
    background: #fff;
    border-radius: 10px;
    padding: 2.4rem 1rem 1.8rem;
    text-align: center;
    text-decoration: none;
    border: 1px solid #e4e6ef;
    box-shadow: 0 2px 6px rgba(20, 20, 60, .04);
    transition: transform .15s ease, box-shadow .15s ease;
    display: block;
}

.category-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(20, 20, 60, .12);
}

.category-icon {
    width: 86px;
    height: 86px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.1rem;
    font-size: 2.6rem;
    line-height: 1;
    color: #fff;
}

.category-tile .category-name {
    font-weight: 500;
    font-size: 1.05rem;
    color: #2b3cd8;
}

.stat-card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #eceef5;
    padding: 1.25rem;
}