.app {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    padding: var(--space-lg);

    display: flex;
    flex-direction: column;
    gap: var(--space-lg);

    background:
        radial-gradient(circle at 20% 8%, rgba(123,108,255,0.32), transparent 55%),
        radial-gradient(circle at 30% 45%, rgba(255,91,189,0.10), transparent 65%),
        linear-gradient(
            180deg,
            #0b0a1c 0%,
            #09081a 55%,
            #070715 100%
        );

    border-right: 1px solid rgba(255,255,255,0.07);
}



/* Main area */
.main {
    flex: 1;
    padding: var(--space-xl);
    overflow-y: auto;
}

.sidebar-profile {
    text-align: center;
}

.sidebar-profile .avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;

    background: linear-gradient(
        135deg,
        var(--accent-start),
        var(--accent-end)
    );

    box-shadow:
        0 0 0 4px rgba(255,255,255,0.04),
        0 0 22px rgba(123,108,255,0.55);
}


.sidebar-profile .name {
    font-weight: 600;
}

.sidebar-profile .role {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.sidebar-nav a {
    position: relative;
    text-decoration: none;
    color: var(--text-secondary);

    padding: 10px 14px;
    border-radius: var(--radius-md);

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

/* Hover – mörk lila (referensstil) */
.sidebar-nav a:hover {
    color: var(--text-primary);
    background: rgba(123,108,255,0.18);
    box-shadow:
        inset 0 0 0 1px rgba(123,108,255,0.25),
        0 8px 18px rgba(0,0,0,0.4);
}


/* Active – gradient + sidolist */
.sidebar-nav a.active {
    color: var(--text-primary);
    background: linear-gradient(
        135deg,
        rgba(255,91,189,0.18),
        rgba(123,108,255,0.18)
    );
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.08),
        0 10px 20px rgba(0,0,0,0.35);
}

.sidebar-nav a.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(
        135deg,
        var(--accent-start),
        var(--accent-end)
    );
}


.grid {
    display: grid;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid-2 {
    grid-template-columns: 2fr 1fr;
}

.grid-3 { grid-template-columns: repeat(3, 1fr); }