/* Component: Topbar
   Usage: Global navigation bar for all layouts.
   Refactored from: admin.css, dashboard.css, coaching_board.css, application.css
*/

@layer components {
    .topbar {
        /* Dimensions */
        width: auto;
        height: 5rem;
        padding: 0 2rem;

        /* Layout */
        display: flex;
        align-items: center;
        justify-content: space-between;

        /* Appearance (Glassmorphism default) */
        background: var(--glass-bg); /* defined in colors.css */
        backdrop-filter: blur(var(--glass-blur));
        -webkit-backdrop-filter: blur(var(--glass-blur));
        border-bottom: 1px solid var(--glass-border);

        /* Layering */
        position: sticky;
        top: 0;
        z-index: 50;
    }

    /* Contextual Variants
       If the topbar needs to look different in Admin vs Student
    */

    .topbar--admin {
        background: color-mix(in srgb, var(--ocean-950) 90%, transparent);
        border-bottom-color: color-mix(in srgb, var(--white) 5%, transparent);
    }

    .topbar--student {
        background: var(--bg-surface);
    }
}