/* Shared horizontal canvas; desktop-layout.js measures the minimum before wrapping. */
:root { --desktop-inset: 16px; --desktop-offset: 0px; }
html.desktop-shell body { min-width: var(--desktop-min-width, 0px); }
.app-header {
    min-width: 0;
    width: var(--desktop-width, 100%);
    left: calc(0px - var(--desktop-offset));
    right: auto;
    height: 76px;
    background: #F1F1F1 !important;
    border-bottom: 1px solid #e3e9ed;
    box-shadow: 0 2px 8px rgba(29, 57, 72, .05);
}

.app-header .app-navbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 430px minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    height: 76px;
    padding: 0 24px;
    background: #F1F1F1;
}

.app-header-start, .app-header-tabs, .app-header-plant, .app-header-account {
    display: flex;
    align-items: center;
    min-width: 0;
}

.app-header-start { gap: 22px; justify-self: start; height: 100%; }
.app-header-start, .app-header-account { width: max-content; }
.app-header-tabs, .app-header-tab { flex-shrink: 0; }
.app-header-brand { flex: 0 0 122px; width: 122px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.app-header-version { display: block; width: max-content; min-height: 14px; color: #526570; font: 600 10px/14px Consolas, monospace; text-align: center; white-space: nowrap; }
.app-header-logo { flex: 0 0 auto; width: 122px; height: 36px; object-fit: contain; }
.app-header-tabs { gap: 8px; height: 100%; padding-left: 16px; border-left: 1px solid #dfe4e7; }
.app-header-tab { position: relative; }
.app-header-tab + .app-header-tab::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: #dfe4e7;
    pointer-events: none;
}

.app-header .app-header-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 56px;
    padding: 0 13px;
    border: 0 !important;
    border-radius: 7px;
    background: transparent;
    color: #293e4b;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s, color .15s, box-shadow .15s;
}

.app-header .app-header-tab:hover { background: rgba(30, 150, 216, .025); color: #147fb8; }
.app-header .app-header-tab.active { background: rgba(9, 183, 130, .025); color: #126447; box-shadow: 0 0 12px rgba(9, 183, 130, .045); }
.app-header .app-header-tab.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px; /* Align with the 76px navbar edge below the centered 56px tab. */
    height: 4px;
    background: #09c58b;
    pointer-events: none;
}
.app-header .app-header-tab[data-redirect*="production"].active { background: rgba(30, 150, 216, .025); color: #21658e; box-shadow: 0 0 12px rgba(30, 150, 216, .045); }
.app-header-tab .header-icon { width: 20px; height: 20px; }
/* Override Bootstrap's 5px mouse-focus ring; retain visible keyboard focus. */
.app-header button:focus:not(:focus-visible), .app-header select:focus { outline: none; }
.app-header button:focus-visible { outline: 2px solid #1e96d8; outline-offset: 3px; }
.app-header select:focus-visible { box-shadow: 0 1px 0 #1e96d8; }

/* Font Awesome Free 6.7.2, locally hosted SVGs; see images/fontawesome/LICENSE.txt. */
.header-icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: var(--header-icon) center / contain no-repeat;
    mask: var(--header-icon) center / contain no-repeat;
}
.header-icon-feeds { --header-icon: url('../images/fontawesome/wheat-awn.svg'); }
.header-icon-production { --header-icon: url('../images/fontawesome/chart-line.svg'); }
.header-icon-financial { --header-icon: url('../images/fontawesome/coins.svg'); }
.header-icon-settings { --header-icon: url('../images/fontawesome/gear.svg'); }
.header-icon-logout { --header-icon: url('../images/fontawesome/right-from-bracket.svg'); }
.header-icon-info { --header-icon: url('../images/fontawesome/circle-info.svg'); }

.app-header-plant { position: relative; gap: 12px; justify-self: center; width: 430px; }
.app-header-selector { flex: 1 1 auto; min-width: 0; }
.app-header-selector label { display: block; margin: 0 0 1px; color: #6c7d87; font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.app-header #biogasplantsList { width: 100%; padding: 2px 24px 3px 0; font-size: 15px; text-overflow: ellipsis; cursor: pointer; }
.app-header .app-header-gauge { position: relative; flex: 0 0 112px; height: 60px; margin: 0; }
.app-header #biogasplantCounter { position: absolute; width: 112px; height: 44px; top: 2px; left: 0; }
.app-header-gauge figcaption { position: absolute; bottom: 1px; width: 100%; text-align: center; font-size: 9px; color: #6c7d87; letter-spacing: .04em; }
.app-header-account { justify-self: end; gap: 14px; }
.app-header-identity { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 0 16px; border-left: 1px solid #dfe4e7; border-right: 1px solid #dfe4e7; }
.app-header-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 32px; border: 1px solid #c8e6dd; border-radius: 50%; background: #e4f2ed; color: #087b58; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.app-header-user { min-width: 0; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #344b59; font-size: 14px; font-weight: 600; }
.app-header-icon-button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #617681; cursor: pointer; }
.app-header-icon-button:hover, .app-header-icon-button.active { color: #147fb8; background: #eaf5fc; }
.app-header-logout:hover { color: #bc3e47; background: #fceff0; }
.app-header-description { position: relative; flex: 0 0 28px; }
.app-header-description > button { width: 28px; }
.app-header-description .dropdown-description { top: 42px; left: 0; }

@media (max-width: 2239px) {
    .app-header-start { gap: 12px; }
    .app-header-brand { width: 112px; flex-basis: 112px; }
    .app-header-logo { width: 112px; }
    .app-header-tabs { gap: 6px; padding-left: 10px; }
    .app-header .app-header-tab { padding-right: 6px; padding-left: 6px; }
    .app-header-tab + .app-header-tab::before { left: -4px; }
}

@media (min-width: 2560px) {
    .app-header .app-navbar { padding-right: 36px; padding-left: 36px; }
    .app-header-start { gap: 30px; }
    .app-header .app-header-tab { padding-right: 18px; padding-left: 18px; }
}

/* When equal side columns no longer fit, keep all three groups in one row. */
.desktop-header-tight .app-header .app-navbar { grid-template-columns: max-content minmax(0, 1fr) max-content; }
@media (max-width: 1919px) {
    :root { --desktop-inset: 12px; }
    .app-header .app-navbar { gap: 12px; padding-right: 16px; padding-left: 16px; }
    .app-header-start { gap: 8px; }
    .app-header-brand { flex-basis: 132px; width: 132px; }
    .app-header-tabs { padding-left: 8px; }
    .app-header-plant { width: clamp(320px, 22.4vw, 430px); gap: 8px; }
    .app-header-account { gap: 8px; }
    .app-header-identity { padding: 0 10px; }
    .app-header-user { max-width: 180px; }
}