/* ════════════════════════════════════
   Top bar — shared across all pages
════════════════════════════════════ */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-8);
    height: var(--topbar-height);
    border-bottom: 0.5px solid var(--color-border-subtle);
    background: var(--color-bg-base);
    flex-shrink: 0;
    width: 100%;
}

.topbar__left {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.topbar__nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.topbar__nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.96rem var(--space-3);
    border-radius: var(--radius-md);
    font-size: 1.3rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.topbar__nav-link i {
    font-size: 1.6rem;
}

.topbar__nav-link:hover {
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    opacity: 1;
}

.topbar__nav-link--active {
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
}

.topbar__right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.topbar__week-label {
    font-size: 1.2rem;
    color: var(--color-text-muted);
}

.topbar__week-nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* ════════════════════════════════════
   User menu & avatar
════════════════════════════════════ */
.user-menu {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.8rem var(--space-3) 0.8rem var(--space-2);
    border: 0.5px solid var(--color-border-subtle);
    border-radius: var(--radius-full);
    cursor: pointer;
    background: transparent;
    transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
    color: var(--color-text-secondary);
    font-size: 1.3rem;
    font-family: var(--font-sans);
}

.user-menu:hover {
    border-color: var(--color-border-base);
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
}

.user-avatar {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-accent-text);
    font-size: 1.1rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--font-sans);
}

/* ════════════════════════════════════
   Mobile (≤ 700px / 70rem)
════════════════════════════════════ */
@media (max-width: 70rem) {

    .topbar {
        padding: 0 var(--space-4);
    }

    .topbar__nav {
        display: none;
    }

    .topbar__week-label {
        display: none;
    }

    .topbar__week-nav {
        gap: var(--space-1);
    }

    .user-menu {
        font-size: 1.2rem;
        padding: 0.6rem var(--space-2) 0.6rem var(--space-1);
    }

    /* Hide the name text on mobile, keep avatar only */
    .user-menu span {
        display: none;
    }

    .user-avatar {
        width: 3rem;
        height: 3rem;
        font-size: 1.2rem;
    }
}

/* ════════════════════════════════════
   Theme toggle button
════════════════════════════════════ */
.theme-toggle {
    width: 3.4rem;
    height: 3.4rem;
    border-radius: var(--radius-md);
    border: 0.5px solid var(--color-border-subtle);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    flex-shrink: 0;
}

.theme-toggle:hover {
    background: var(--color-bg-surface);
    border-color: var(--color-border-base);
    color: var(--color-text-primary);
}

/* ════════════════════════════════════
   Smooth color transitions on theme switch
   Applied to all elements globally
════════════════════════════════════ */
*,
*::before,
*::after {
    transition:
        background-color var(--transition-base),
        border-color var(--transition-base),
        color var(--transition-base),
        box-shadow var(--transition-base);
}

/*
 * Exclude elements where transitions would look wrong —
 * animations, transforms, and layout properties should
 * not be caught by the global rule.
 */
.ti,
[class^="ti-"],
[class*=" ti-"] {
    transition: color var(--transition-fast);
}