/* ==========================================================================
   Header — klebende Kopfleiste mit Hamburger, Seitentitel, globaler Suche,
   Theme-Umschalter und Benutzermenü
   ========================================================================== */

.main-header {
    /* Über beide Grid-Zeilen, damit sticky überhaupt Weg zum Kleben hat –
       align-self begrenzt die tatsächliche Höhe auf die Header-Zeile. */
    grid-row: 1 / -1;
    align-self: start;
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    height: var(--header-h);
    min-width: 0;
    padding: 0 var(--space-5);
    background: var(--surface-raised);
    border-bottom: 1px solid var(--border-subtle);
}

.header-left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.header-right {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
}

/* ── Hamburger ───────────────────────────────────────────────────────── */
.sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}
.sidebar-toggle:hover {
    background: var(--surface-sunken);
    color: var(--text-primary);
}
.sidebar-toggle .icon { font-size: 20px; }

/* ── Seitentitel ─────────────────────────────────────────────────────── */
.header-title {
    font-size: var(--fs-15);
    font-weight: var(--fw-semibold);
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Globale Suche ───────────────────────────────────────────────────── */
.header-search {
    position: relative;
    flex: 0 1 400px;
    width: min(400px, 100%);
    max-width: 100%;
}

.header-search-shell {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    min-width: 260px;
    height: 38px;
    padding: 0 var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    color: var(--text-muted);
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}
.header-search-shell:hover,
.header-search-shell:focus-within {
    background: var(--surface-raised);
    border-color: var(--border-default);
}
.header-search-shell:focus-within {
    box-shadow: var(--shadow-focus);
    border-color: var(--border-focus);
}
.header-search-shell .icon { font-size: 16px; flex-shrink: 0; }

.header-search-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font-size: var(--fs-13);
    outline: none;
}
.header-search-input::placeholder { color: var(--text-muted); }
.header-search-input::-webkit-search-cancel-button { display: none; }

.header-search-kbd {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    padding: 2px 6px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xs);
    background: var(--surface-raised);
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: var(--fs-11);
    line-height: 1;
}
.header-search-shell:focus-within .header-search-kbd { opacity: 0; }

/* ── Suchergebnisse ──────────────────────────────────────────────────── */
.header-search-results {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    right: 0;
    z-index: calc(var(--z-header) + 2);
    max-height: min(60vh, 460px);
    padding: var(--space-2);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
}
.header-search-results[hidden] { display: none; }

.header-search-group + .header-search-group { margin-top: var(--space-2); }

.header-search-group-title {
    padding: var(--space-2) var(--space-3) var(--space-1);
    font-size: var(--fs-11);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
}

.header-search-result-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
}
.header-search-result-item:hover,
.header-search-result-item.is-active {
    background: var(--surface-sunken);
    text-decoration: none;
}

.header-search-result-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    color: var(--text-secondary);
}
.header-search-result-item:hover .header-search-result-icon,
.header-search-result-item.is-active .header-search-result-icon {
    background: var(--brand-soft);
    color: var(--brand);
}

.header-search-result-body { flex: 1; min-width: 0; }

.header-search-result-title {
    font-size: var(--fs-13);
    font-weight: var(--fw-medium);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.header-search-result-title mark {
    padding: 0 1px;
    border-radius: 2px;
    background: var(--brand-soft);
    color: var(--brand);
    font-weight: var(--fw-semibold);
}

.header-search-result-meta {
    font-size: var(--fs-11);
    line-height: 1.4;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-search-result-kbd {
    flex-shrink: 0;
    font-size: var(--fs-11);
    color: var(--text-disabled);
}

.header-search-empty {
    padding: var(--space-5) var(--space-4);
    text-align: center;
    font-size: var(--fs-13);
    color: var(--text-muted);
}

/* ── Icon-Buttons im Header ──────────────────────────────────────────── */
.header-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-secondary);
    font-size: var(--fs-13);
    font-weight: var(--fw-medium);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}
.header-btn:hover {
    background: var(--surface-sunken);
    color: var(--text-primary);
    text-decoration: none;
}
.header-btn .icon { font-size: 19px; }
.header-btn-wide { width: auto; padding: 0 var(--space-3); }

/* ── Benutzermenü ────────────────────────────────────────────────────── */
.header-user-menu { position: relative; }

.header-profile-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 38px;
    padding: 0 var(--space-2) 0 4px;
    border: 0;
    border-radius: var(--radius-pill);
    background: none;
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
}
.header-profile-btn:hover { background: var(--surface-sunken); text-decoration: none; }

.header-profile-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-pill);
    background: var(--brand-soft);
    color: var(--brand);
    font-size: var(--fs-12);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
}

.header-profile-name {
    max-width: 150px;
    font-size: var(--fs-13);
    font-weight: var(--fw-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Dropdown ────────────────────────────────────────────────────────── */
.dropdown-menu {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    z-index: var(--z-dropdown);
    min-width: 200px;
    padding: var(--space-1);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    box-shadow: var(--shadow-lg);
    animation: dropdownIn var(--duration-fast) var(--ease-out);
}
.dropdown-menu.hidden { display: none !important; }

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-secondary);
    font-size: var(--fs-13);
    font-weight: var(--fw-medium);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}
.dropdown-item:hover {
    background: var(--surface-sunken);
    color: var(--text-primary);
    text-decoration: none;
}
.dropdown-item .icon { font-size: 16px; color: var(--text-muted); }
.dropdown-item:hover .icon { color: var(--text-secondary); }

.dropdown-item.text-danger { color: var(--danger); }
.dropdown-item.text-danger:hover { background: var(--danger-bg); color: var(--danger); }
.dropdown-item.text-danger .icon { color: var(--danger); }

.dropdown-divider {
    height: 1px;
    margin: var(--space-1) 0;
    border: 0;
    background: var(--border-subtle);
}

.dropdown-header {
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-11);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
}

@keyframes dropdownIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

/* ── Theme-Umschalter: nur das aktive Icon zeigen ────────────────────── */
#btn-theme .icon { display: none; }
:root[data-theme="light"] #btn-theme .icon-theme-light,
:root[data-theme="dark"]  #btn-theme .icon-theme-dark,
:root:not([data-theme="light"]):not([data-theme="dark"]) #btn-theme .icon-theme-auto {
    display: inline-flex;
}

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .main-header {
        padding: 0 var(--space-3);
        gap: var(--space-2);
    }
    .header-title { display: none; }

    .header-search {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }
    .header-search-shell {
        min-width: 0;
        height: 36px;
    }
    .header-search-kbd { display: none; }

    .header-search-results {
        position: fixed;
        top: calc(var(--header-h) + var(--space-2));
        left: var(--space-3);
        right: var(--space-3);
        max-height: calc(100vh - var(--header-h) - var(--space-5));
    }

    .header-profile-name { display: none; }
}

@media (max-width: 480px) {
    .header-search-shell .icon:first-child { margin-left: 0; }
    .header-btn { width: 34px; height: 34px; }
}