/*
 * Talking Time role-aware root dashboard styles.
 *
 * Requirement 6.1, 6.5, 6.6, 6.7, 5.5
 */

.tt-area .tt-dashboard {
    padding: 28px 24px 60px;
    max-width: 1280px;
    margin: 0 auto;
}

.tt-area .tt-dashboard__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.tt-area .tt-dashboard__title {
    font-size: var(--tt-font-size-xl);
    font-weight: 700;
    margin: 0;
}

.tt-area .tt-dashboard__subtitle {
    font-size: var(--tt-font-size-md);
    color: var(--tt-text-muted);
    margin: 0;
}

.tt-area .tt-dashboard__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
    background: var(--tt-surface);
    border-radius: var(--tt-radius-lg);
    border: 1px dashed var(--tt-primary-soft);
    color: var(--tt-text-muted);
    font-size: var(--tt-font-size-md);
    text-align: center;
    min-height: 240px;
    box-shadow: var(--tt-shadow-sm);
}

.tt-area .tt-dashboard__role-toggle {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--tt-surface-raised);
    border-radius: var(--tt-radius-md);
    border: 1px solid rgba(74, 123, 200, 0.18);
}

.tt-area .tt-dashboard__role-toggle-btn {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--tt-text-muted);
    font-family: var(--tt-font-base);
    font-size: var(--tt-font-size-sm);
    font-weight: 600;
    padding: 8px 14px;
    border-radius: var(--tt-radius-sm);
    cursor: pointer;
}

.tt-area .tt-dashboard__role-toggle-btn.is-active {
    background: var(--tt-talk-teal);
    color: var(--tt-text-inverse);
    box-shadow: var(--tt-shadow-sm);
}