:root {
    --app-primary: #3b2ea3; /* ajuste pra sua cor */
    --app-primary-2: #2b237a;
    --app-surface: #ffffff;
    --app-border: rgba(0,0,0,.08);
    --app-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.app-topbar {
    background: linear-gradient(90deg, var(--app-primary), var(--app-primary-2));
    box-shadow: var(--app-shadow);
}

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

.avatar-sm {
    width: 26px;
    height: 26px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.16);
}

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

.app-sidebar {
    width: 280px;
    background: var(--app-surface);
    border-right: 1px solid var(--app-border);
}

.sidebar-inner {
    padding: 18px 14px;
}

.sidebar-section-title {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(0,0,0,.55);
    margin: 6px 10px 10px;
}

.app-main {
    flex: 1;
}

.nav-pills .nav-link {
    border-radius: 12px;
    color: rgba(0,0,0,.75);
    padding: .55rem .75rem;
    display: flex;
    align-items: center;
    gap: .25rem;
}

    .nav-pills .nav-link:hover {
        background: rgba(59,46,163,.07);
        color: rgba(0,0,0,.9);
    }

    .nav-pills .nav-link.active {
        background: rgba(59,46,163,.12);
        color: var(--app-primary);
        font-weight: 700;
    }

.nav-link-sub {
    font-size: .92rem;
    padding-left: .75rem;
}

.app-sidebar-offcanvas {
    background: linear-gradient(180deg, var(--app-primary), var(--app-primary-2));
    color: #fff;
}

    .app-sidebar-offcanvas .nav-link {
        color: rgba(255,255,255,.85);
    }

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

        .app-sidebar-offcanvas .nav-link.active {
            background: rgba(255,255,255,.18);
            color: #fff;
        }

.card {
    border: 1px solid var(--app-border);
    border-radius: 16px;
    box-shadow: 0 8px 18px rgba(0,0,0,.05);
}

.btn {
    border-radius: 12px;
}

.form-control, .form-select {
    border-radius: 12px;
}



/* ===========================
   Sidebar estilo Hostinger
   =========================== */

.host-sidebar {
    background: #ffffff;
    border-right: 1px solid rgba(16, 24, 40, .08);
}

    /* largura e “ar” */
    .host-sidebar .sidebar-inner {
        padding: 14px 10px;
        width: 260px; /* parecido com Hostinger */
    }

    /* títulos MENU / CONTA */
    .host-sidebar .sidebar-section-title {
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: rgba(16, 24, 40, .55);
        margin: 12px 10px 10px;
    }

    /* lista e itens */
    .host-sidebar .nav {
        gap: 4px !important;
    }

        .host-sidebar .nav .nav-link,
        .host-sidebar .nav button.nav-link {
            border-radius: 10px;
            padding: 10px 10px;
            color: rgba(16, 24, 40, .82);
            background: transparent;
            border: 1px solid transparent;
            position: relative;
            transition: all .12s ease;
            font-weight: 600;
        }

            /* ícones alinhados e consistentes */
            .host-sidebar .nav .nav-link i,
            .host-sidebar .nav button.nav-link i {
                font-size: 1.05rem;
                width: 22px;
                text-align: center;
                opacity: .9;
            }

            /* hover suave */
            .host-sidebar .nav .nav-link:hover,
            .host-sidebar .nav button.nav-link:hover {
                background: rgba(99, 91, 255, .06); /* roxinho suave */
                border-color: rgba(99, 91, 255, .12);
                color: rgba(16, 24, 40, .92);
            }

            /* item ativo no estilo “hostinger”: fundo suave + barra à esquerda */
            .host-sidebar .nav .nav-link.active {
                background: rgba(99, 91, 255, .10);
                border-color: rgba(99, 91, 255, .16);
                color: #3b2ea3; /* sua cor principal */
            }

                .host-sidebar .nav .nav-link.active::before {
                    content: "";
                    position: absolute;
                    left: -6px;
                    top: 10px;
                    bottom: 10px;
                    width: 4px;
                    border-radius: 4px;
                    background: #3b2ea3; /* sua cor principal */
                }

    /* subitens (collapse Leads) */
    .host-sidebar .nav-link-sub {
        font-weight: 600;
        padding: 9px 10px;
        border-radius: 10px;
        color: rgba(16, 24, 40, .78);
    }

        /* subitem ativo também */
        .host-sidebar .nav-link-sub.active {
            background: rgba(99, 91, 255, .10);
            border: 1px solid rgba(99, 91, 255, .16);
        }

    /* botão (collapsible) parecer link normal */
    .host-sidebar button.nav-link {
        box-shadow: none !important;
    }

    /* linha divisória mais leve */
    .host-sidebar hr {
        border-color: rgba(16, 24, 40, .08);
    }