/* Shared tokens and settings hub styles. Linked in App.razor after the Radzen theme. */
:root {
    --fs-accent: #4f46e5;
    --fs-accent-700: #4338ca;
    --fs-accent-200: #dcdafb;
    --fs-accent-50: #f1f0fe;
    --fs-ink: #111827;
    --fs-muted: #6b7280;
    --fs-border: #e6e8ee;
    --fs-warn: #b45309;
    --fs-page: #f6f7fb;
    /* Radzen buttons, links and controls in the same purple */
    --rz-primary: #4f46e5;
    --rz-primary-light: #6366f1;
    --rz-primary-lighter: #f1f0fe;
    --rz-primary-dark: #4338ca;
    --rz-primary-darker: #3730a3;
}

.hub {
    max-width: 1000px;
    margin: 0 auto;
    padding: 24px 16px 40px;
}

.hub-section {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px 2px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fs-muted);
}

.hub-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}

@media (max-width: 700px) {
    .hub-grid {
        grid-template-columns: 1fr;
    }
}

/* Empty states: icon, title, one line, optional link */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 36px 24px;
}

.empty-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 6px;
    border-radius: 14px;
    background: var(--fs-accent-50);
    color: var(--fs-accent);
}

    .empty-icon .rzi {
        font-size: 28px;
    }

.empty-link {
    margin-top: 10px;
    padding: 8px 14px;
    border-radius: 8px;
    background: var(--fs-accent);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}

    .empty-link:hover {
        background: var(--fs-accent-700);
        color: #fff;
    }