/* ee-shell-header.css — zone A of the project shell (docs/project-shell.md):
 * floating header with project name + variant switcher, module segment bar
 * (the existing #iconPd1–7), KPIs, project settings, HarvAI. ALL modules.
 * Colours and geometry only from ee-shell-tokens.css (--ees-*).
 * Scoped to .topNavigationBar.ees-header (set in the markup, so no flash of the
 * old round icons before JS runs); body.ees-shell is set by project-shell-header.js.
 */

/* ── Bar ─────────────────────────────────────────────────────────────── */
.topNavigationBar.ees-header {
    position: absolute;
    top: var(--ees-header-top);
    left: var(--ees-gap);
    right: var(--ees-gap);
    width: auto;
    height: var(--ees-header-h);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 10px 0 12px;
    border-radius: var(--ees-radius-lg);
    background: var(--ees-glass-bg);
    -webkit-backdrop-filter: var(--ees-backdrop);
    backdrop-filter: var(--ees-backdrop);
    border: 1px solid var(--ees-glass-border);
    box-shadow: var(--ees-glass-shadow);
    color: var(--ees-text);
    font-family: var(--ees-font);
    pointer-events: auto;
    z-index: 5;
}

.ees-header .ees-icon {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

/* ── Left: logo, project name, variant ──────────────────────────────── */
.ees-header .ees-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 1 calc(var(--ees-left-w) - 12px);
    min-width: 140px;
}

.ees-header .ees-logo {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--ees-accent);
    color: var(--ees-accent-text);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.5px;
}

.ees-header .ees-brand-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ees-header .ees-project-name {
    font-weight: 650;
    font-size: 14px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ees-header .ees-variant-button {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    align-self: flex-start;
    margin: 1px 0 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 11.5px;
    color: var(--ees-text-dim);
    cursor: pointer;
}

.ees-header .ees-variant-button:disabled {
    cursor: default;
}

.ees-header .ees-variant-button .ees-caret {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.7;
}

.ees-header .ees-variant-button:not(.is-multi) .ees-caret {
    display: none;
}

.ees-header .ees-variant-button.is-multi:hover {
    color: var(--ees-text);
}

/* Variant menu: moved to <body> by JS (the header lives in the transformed .popup-content) */
.ees-variant-menu {
    position: fixed;
    z-index: 99995;
    min-width: 180px;
    max-height: 60vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px;
    border-radius: var(--ees-radius-md);
    background: var(--ees-glass-bg);
    -webkit-backdrop-filter: var(--ees-backdrop);
    backdrop-filter: var(--ees-backdrop);
    border: 1px solid var(--ees-glass-border);
    box-shadow: var(--ees-glass-shadow), var(--ees-float-shadow);
    font-family: var(--ees-font);
}

.ees-variant-menu[hidden] {
    display: none;
}

.ees-variant-menu .ees-variant-item {
    text-align: left;
    padding: 7px 10px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--ees-text);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
}

.ees-variant-menu .ees-variant-item:hover,
.ees-variant-menu .ees-variant-item:focus-visible {
    background: var(--ees-surface-3);
    outline: none;
}

.ees-variant-menu .ees-variant-item[aria-checked="true"] {
    background: var(--ees-accent-soft);
    color: var(--ees-accent-strong);
    font-weight: 600;
}

/* ── Middle: module segment bar (existing #iconPd1–7) ───────────────── */
.topNavigationBar.ees-header #pd-slider-container {
    position: static;
    width: auto;
    top: auto;
    padding: 0;
    margin: 0 auto;
    flex: 0 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.topNavigationBar.ees-header #pd-slider-container::-webkit-scrollbar {
    display: none;
}

.topNavigationBar.ees-header .pd-icon-container {
    display: flex;
    justify-content: flex-start !important; /* beats the payLevel centring in ee-project-styles.css */
    gap: 2px;
    width: max-content;
    padding: 3px;
    border-radius: calc(var(--ees-radius-sm) + 3px);
    background: var(--ees-surface-2);
    border: 1px solid var(--ees-border);
}

/* Order of the target design; the DOM order stays, handleIconClick maps by DOM index */
.ees-header #iconPd4 { order: 1; }
.ees-header #iconPd5 { order: 2; }
.ees-header #iconPd1 { order: 3; }
.ees-header #iconPd2 { order: 4; }
.ees-header #iconPd3 { order: 5; }
.ees-header #iconPd6 { order: 6; }
.ees-header #iconPd7 { order: 7; }

.ees-header .iconBoxPd {
    flex: none;
    max-width: none;
    border-radius: var(--ees-radius-sm);
}

.ees-header .iconBoxPd .spinner-overlay {
    gap: 0;
    background: var(--ees-surface-3);
}

.ees-header .iconBoxPd .spinner {
    width: 14px;
    height: 14px;
    border-width: 2px;
    border-color: var(--ees-border-strong);
    border-top-color: var(--ees-accent);
}

.ees-header .iconButtonPd,
.ees-header #iconPdButtonPd4 {
    display: flex;
    align-items: center;
    gap: 7px;
    width: auto;
    height: auto;
    margin: 0;
    padding: 6px 11px 6px 7px;
    border-radius: var(--ees-radius-sm);
    color: var(--ees-text-dim);
    fill: currentColor;
    stroke: currentColor;
    font-size: 12.5px;
    white-space: nowrap;
    transform: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ees-header .iconButtonPd:hover {
    background: var(--ees-surface-3);
    color: var(--ees-text);
}

.ees-header .iconButtonPd:focus-visible {
    outline: 2px solid var(--ees-accent);
    outline-offset: 1px;
}

.ees-header .iconButtonPd.clicked {
    background: var(--ees-accent-soft);
    color: var(--ees-text);
    box-shadow: inset 0 0 0 1px var(--ees-accent);
}

/* icon with ring: 26px instead of the old 60px circle; no hover swap */
.ees-header .iconButtonPd .iconPd,
.ees-header .iconButtonPd:hover .iconPd,
.ees-header .iconButtonPd:not(:hover) .iconPd,
.ees-header .iconButtonPd.clicked .iconPd,
.ees-header #iconPdButtonPd4:hover .iconPd {
    position: relative;
    width: 26px;
    height: 26px;
    flex: none;
    padding: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: none;
    color: inherit;
    fill: currentColor;
    stroke: currentColor;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    opacity: 1;
    transform: none;
}

.ees-header .iconButtonPd.clicked .iconPd {
    color: var(--ees-accent);
}

.ees-header .iconPd .progress-ring {
    position: absolute;
    inset: 0;
    width: 26px;
    height: 26px;
}

.ees-header .iconPd .progress-background {
    stroke: var(--ees-border-strong);
    stroke-width: 5;
}

.ees-header .iconPd .progress-bar {
    stroke: var(--ees-accent); /* JS colours Netz/Finanzierung/Genehmigung by score (inline) */
    stroke-width: 5;
}

.ees-header .iconPd .headerIcon,
.ees-header #dashboardIconSvg {
    width: 13px;
    height: 13px;
    margin: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.ees-header #dashboardIconSvg {
    width: 16px;
    height: 16px;
}

/* the configuration icon carries one hard-coded dark tick */
.ees-header #configurationIconSvg path {
    fill: currentColor;
}

/* label: the former hover pill, now always shown as text */
.ees-header .iconButtonPd .pillViewPd,
.ees-header .iconButtonPd:hover .pillViewPd,
.ees-header .iconButtonPd:not(:hover) .pillViewPd,
.ees-header .iconButtonPd.clicked .pillViewPd {
    position: static;
    display: block;
    min-width: 0;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    fill: currentColor;
    opacity: 1;
    transform: none;
    transition: none;
}

/* ── Right: KPIs (values written by project-area.js) ────────────────── */
.ees-header .ees-kpis {
    display: flex;
    gap: 2px;
    flex: none;
}

body:not(.paylevel-unlocked) .ees-header .ees-kpis {
    display: none; /* same audience as the old tile in the configuration module */
}

.ees-header .ees-kpi {
    padding: 4px 11px;
    text-align: right;
    border-left: 1px solid var(--ees-border);
}

.ees-header .ees-kpi:first-child {
    border-left: 0;
}

.ees-header .ees-kpi b {
    display: block;
    white-space: nowrap;
    font-size: 14.5px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    color: var(--ees-text);
}

.ees-header .ees-kpi b span {
    font-size: 0.7em;
    font-weight: 500;
    color: var(--ees-text-dim); /* "/ total ha" from updateAllConstructionHealthPanelKPIs */
}

.ees-header .ees-kpi > span {
    font-size: 10.5px;
    color: var(--ees-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.ees-header .ees-kpi-roi b {
    color: var(--ees-accent-strong); /* text contrast >= 4.5:1 in light mode */
}

/* ── Right: project settings (gear + progress ring) and HarvAI ──────── */
.ees-header .ees-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
}

.topNavigationBar.ees-header #projectSettingContainer,
.topNavigationBar.ees-header .aiIconContainer {
    position: static;
    width: auto;
    height: auto;
    display: block;
    pointer-events: auto;
    z-index: auto;
}

.topNavigationBar.ees-header .aiIconContainer[hidden] {
    display: none !important;
}

.ees-header .profileIcon,
.ees-header .aiIcon {
    position: relative;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--ees-surface-2);
    border: 1px solid var(--ees-border);
    color: var(--ees-text);
    fill: none;
    opacity: 1;
    transform: none;
    filter: none;
    cursor: pointer;
}

.ees-header .profileIcon:hover,
.ees-header .aiIcon:hover {
    background: var(--ees-surface-3);
}

.ees-header .profileIcon:focus-visible,
.ees-header .aiIcon:focus-visible {
    outline: 2px solid var(--ees-accent);
    outline-offset: 1px;
}

.ees-header .aiIcon {
    background: var(--ees-accent-soft);
    color: var(--ees-accent);
}

/* the settings progress ring stays as a small ring around the gear */
.ees-header svg#progress-profile-ring {
    position: absolute;
    inset: 3px;
    width: 28px;
    height: 28px;
    transform: rotate(-90deg);
}

.ees-header #progress-profile-ring .progress-background {
    stroke: var(--ees-border);
    stroke-width: 3;
}

.ees-header #progress-profile-ring .progress-bar {
    stroke-width: 3;
}

.ees-header #profileIconSvg {
    position: relative;
    width: 16px;
    height: 16px;
}

/* ── Modules below the header: content must start under it ──────────
 * Desktop: dashboard (.dashboardView-content) and the floating widget grids of
 * Netz/Finanzierung/Genehmigung/Bau/Betrieb (.ee-floating-widgets) keep their
 * 120px — already below the header (var(--ees-top) = 82px). max() only guards a
 * taller header, nothing moves. Konfiguration: zones B–E use var(--ees-top). */
body.ees-shell .dashboardView-content,
body.ees-shell .ee-floating-widgets {
    padding-top: max(120px, var(--ees-top));
}

/* ── Floating buttons out of the way (project-shell-header.js eesAdoptBugButton /
 *    eesAdoptAdminButton): bug report and admin mode as header icons with tooltip ── */
.topNavigationBar.ees-header #ee-bug-reporter-btn,
.topNavigationBar.ees-header #eeAdminModeEnableBtn {
    position: static;
    width: 36px;
    height: 36px;
    flex: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    border-radius: 10px;
    border: 1px solid var(--ees-border);
    background: var(--ees-surface-2);
    color: var(--ees-text);
    box-shadow: none;
    opacity: 1;
    transform: none;
    cursor: pointer;
}

.topNavigationBar.ees-header #ee-bug-reporter-btn:hover,
.topNavigationBar.ees-header #eeAdminModeEnableBtn:hover {
    transform: none;
    box-shadow: none;
    background: var(--ees-surface-3);
}

.topNavigationBar.ees-header #ee-bug-reporter-btn:focus-visible,
.topNavigationBar.ees-header #eeAdminModeEnableBtn:focus-visible {
    outline: 2px solid var(--ees-accent);
    outline-offset: 1px;
}

/* the bug icon keeps its signal colour, on the calm header button */
.topNavigationBar.ees-header #ee-bug-reporter-btn .ee-bug-icon svg {
    width: 18px;
    height: 18px;
    fill: var(--ees-danger);
}

.topNavigationBar.ees-header #ee-bug-reporter-btn.ee-capturing {
    background: var(--ees-warn-soft);
}

.topNavigationBar.ees-header #eeAdminModeEnableBtn .ees-icon {
    width: 17px;
    height: 17px;
}

/* the header's HarvAI button opens the agent widget: no second floating bubble */
body.ees-shell:has(#aiIconContainer:not([hidden])) .ee-agent-bubble {
    display: none !important;
}

/* ── Not enough room (measured by eesFitSegments, project-shell-header.js):
 *    inactive segments icon only, then all; never cut off ───────────── */
.topNavigationBar.ees-header.ees-seg-compact .iconButtonPd:not(.clicked) .pillViewPd,
.topNavigationBar.ees-header.ees-seg-icons .iconButtonPd .pillViewPd {
    display: none;
}

.topNavigationBar.ees-header.ees-seg-compact .iconButtonPd:not(.clicked),
.topNavigationBar.ees-header.ees-seg-icons .iconButtonPd {
    padding-right: 7px;
}

/* ── Narrow desktops: inactive segments as icon only (title = tooltip) ── */
@media (max-width: 1360px) {
    .ees-header .iconButtonPd:not(.clicked) .pillViewPd {
        display: none;
    }

    .ees-header .iconButtonPd:not(.clicked) {
        padding-right: 7px;
    }
}

@media (max-width: 1024px) {
    .ees-header .ees-kpi-kwh {
        display: none;
    }

    .ees-header .ees-brand {
        flex-basis: 200px;
    }
}

/* ── Phone: two rows (project + KPIs, segments scrollable), 96px ────── */
@media (max-width: 767px) {
    .topNavigationBar.ees-header {
        position: absolute !important; /* ee-responsive.css pins the old bar fixed to 0 */
        top: var(--ees-header-top) !important;
        left: var(--ees-gap) !important;
        right: var(--ees-gap) !important;
        height: var(--ees-header-h);
        flex-wrap: wrap;
        align-content: center;
        gap: 4px 8px;
        padding: 6px 8px;
        background: var(--ees-glass-bg) !important;
        z-index: 600 !important; /* above the mobile module panels (z-index 500) */
    }

    .ees-header .ees-brand {
        order: 1;
        flex: 1 1 0;
        min-width: 0;
        gap: 8px;
    }

    .ees-header .ees-logo {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        font-size: 11px;
    }

    .ees-header .ees-kpis {
        order: 2;
    }

    .ees-header .ees-kpi {
        padding: 2px 6px;
    }

    .ees-header .ees-kpi b {
        font-size: 12.5px;
    }

    .ees-header .ees-kpi > span {
        font-size: 9.5px;
    }

    .ees-header .ees-actions {
        order: 3;
    }

    .ees-header .profileIcon,
    .ees-header .aiIcon,
    .topNavigationBar.ees-header #ee-bug-reporter-btn,
    .topNavigationBar.ees-header #eeAdminModeEnableBtn {
        width: 32px;
        height: 32px;
    }

    /* project settings popup is not available on phones (ee-responsive.css) */
    .topNavigationBar.ees-header #projectSettingContainer {
        display: none !important;
    }

    .topNavigationBar.ees-header .aiIconContainer {
        position: static !important;
        top: auto !important;
        bottom: auto !important;
        right: auto !important;
    }

    .topNavigationBar.ees-header #pd-slider-container {
        display: block !important; /* ee-responsive.css hid the old icon row */
        order: 4;
        flex: 1 0 100%;
        margin: 0;
    }

    .topNavigationBar.ees-header .pd-icon-container {
        display: flex !important;
    }

    .ees-header .iconButtonPd,
    .ees-header #iconPdButtonPd4 {
        padding: 4px 9px 4px 5px;
    }

    .ees-header .iconButtonPd:not(.clicked) .pillViewPd {
        display: block; /* scrollable row: labels stay */
    }

    /* the segment row replaces the mobile category tabs */
    body.ees-shell .ee-mobile-category-tabs {
        display: none !important;
    }

    /* mobile module panels (ee-responsive.css: top 56px) start under the header */
    body.ees-shell #analyse-container.ee-mobile-expanded,
    body.ees-shell #grid-connection-container.ee-mobile-category-active,
    body.ees-shell #finance-container.ee-mobile-category-active,
    body.ees-shell #permit-container.ee-mobile-category-active,
    body.ees-shell #construction-container.ee-mobile-category-active,
    body.ees-shell #operation-container.ee-mobile-category-active {
        top: var(--ees-top) !important;
    }
}