/* ==========================================================
   Header Component Styles
   Extracted from style.css — used by components/header.html
   ========================================================== */

.header {
    height: var(--header-height, 60px);
    background: #fff;
    border-bottom: 1px solid var(--border, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 50
}

.header-left {
    display: flex;
    align-items: center;
    gap: 1rem
}

.menu-btn {
    display: none;
    width: 36px;
    height: 36px;
    background: var(--bg-body, #f8fafc);
    border: none;
    border-radius: var(--radius, 8px);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: var(--text-sec, #475569)
}

.menu-btn svg {
    width: 20px;
    height: 20px
}

.breadcrumb {
    font-size: .875rem;
    color: var(--text-muted, #94a3b8)
}

.breadcrumb a {
    color: var(--primary);
    text-decoration: none
}

.header-right {
    display: flex;
    align-items: center;
    gap: .75rem
}

/* Mobile adjustments for header */
@media (max-width: 768px) {
    .menu-btn {
        display: flex
    }
}