/**
 * Shared layout kit of the finance fullscreens (Finance mockup v4,
 * finance-widgets-mockup.html, released by Till 23.10.2026).
 * Markup: assets/js/modules/widgets/widget-finance-layout.js (window.eeFinanceLayout).
 * Prefix .ee-fl-, colours from the --ee-fw tokens (mockup values as fallback).
 *
 * The root also carries .ee-fw-full: the red (stale) / blue (running)
 * frame and the notice line of eeFinanceUi.status apply unchanged.
 *
 * Rules:
 *  - labels, tabs, values never wrap on their own (nowrap + ellipsis);
 *  - at most four tiles in one row, fewer columns only when narrow;
 *  - hidden panes are display:none (the [hidden] rule beats display:flex);
 *  - one-line summaries in section heads, never a second line.
 */

.ee-fl {
    --fl-line: var(--ee-fw-line, rgba(var(--ee-fg-rgb), 0.10));
    --fl-card: rgba(var(--ee-fg-rgb), 0.035);
    --fl-card-line: rgba(var(--ee-fg-rgb), 0.07);
    --fl-wash: var(--ee-fw-wash, rgba(var(--ee-fg-rgb), 0.04));
    --fl-t1: var(--ee-fw-ink-1, #f2f4f7);
    --fl-t2: var(--ee-fw-ink-2, rgba(var(--ee-fg-rgb), 0.78));
    --fl-t3: var(--ee-fw-ink-3, rgba(var(--ee-fg-rgb), 0.62));
    --fl-t4: var(--ee-fw-ink-4, rgba(var(--ee-fg-rgb), 0.48));
    --fl-accent: var(--ee-fw-accent, #3d8bff);
    --fl-warn: var(--ee-fw-status-stale, #ff9500);
    --fl-bad: var(--ee-fw-status-error, #ff8a80);
    --fl-info: var(--ee-fw-status-busy, #64b5ff);
    --fl-r: 14px;
    gap: 14px;
    min-width: 0;
    color: var(--fl-t2);
    container-type: inline-size;
    container-name: ee-fl;
}

.ee-fw-theme-light .ee-fl {
    --fl-card: rgba(var(--ee-ink-rgb), 0.025);
    --fl-card-line: rgba(var(--ee-ink-rgb), 0.08);
}

/* ------------------------------------------------------------- head */

.ee-fl-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ee-fl-sub { flex: 1; min-width: 0; font-size: 12.5px; color: var(--fl-t4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ee-fl-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }

/* ------------------------------------------------------------- central bar */

.ee-fl-central {
    display: flex; align-items: center; gap: 10px; align-self: flex-start; max-width: 100%;
    padding: 8px 8px 8px 14px; border-radius: 12px;
    background: var(--fl-wash); border: 1px solid var(--fl-line);
    font-size: 12.5px; white-space: nowrap; min-width: 0;
}
.ee-fl-central-item { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
.ee-fl-central-label { color: var(--fl-t4); }
.ee-fl-central b { font-weight: 600; color: var(--fl-t1); }
.ee-fl-central-sep { width: 1px; height: 14px; background: var(--fl-line); color: transparent; overflow: hidden; }
.ee-fl-central-i { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--fl-t4); font-size: 10px; color: var(--fl-t3); cursor: help; }
.ee-fl-central .ee-fw-info-host { display: inline-flex; }
.ee-fl-change {
    border: 0; background: transparent; padding: 3px 8px; border-radius: 8px;
    color: var(--fl-accent); font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.ee-fl-change:hover, .ee-fl-change:focus-visible { background: var(--fl-wash); }

/* ------------------------------------------------------------- controls */

.ee-fl-ctl { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; min-width: 0; }
.ee-fl-g { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; min-width: 0; }
.ee-fl-gl {
    font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--fl-t4); display: inline-flex; align-items: center; gap: 4px;
}

/* ------------------------------------------------------------- notes */

.ee-fl-notes { border-radius: 12px; border: 1px solid rgba(100, 181, 255, 0.35); background: rgba(100, 181, 255, 0.07); }
.ee-fl-notes:has(.ee-fl-note--warn) { border-color: rgba(255, 149, 0, 0.4); background: rgba(255, 149, 0, 0.09); }
.ee-fl-notes:has(.ee-fl-note--bad) { border-color: rgba(255, 138, 128, 0.45); background: rgba(255, 138, 128, 0.08); }
.ee-fl-note { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 14px; font-size: 13px; min-width: 0; }
.ee-fl-note + .ee-fl-note { border-top: 1px solid var(--fl-line); }
.ee-fl-note::before {
    content: "i"; flex: none; width: 18px; height: 18px; border-radius: 50%;
    display: grid; place-items: center; font-size: 11px; font-weight: 700;
    background: var(--fl-info); color: var(--ee-bg-elevated);
}
.ee-fl-note--warn::before { content: "!"; background: var(--fl-warn); color: #1a1205; }
.ee-fl-note--bad::before { content: "!"; background: var(--fl-bad); color: #1a0705; }
.ee-fl-note-text { flex: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; color: var(--fl-t2); }
/* Till 03.11.2026: a long warning is a complete one-line headline; a tap shows the full, wrapping text. */
.ee-fl-note--fold { display: block; }
.ee-fl-note--fold::before { display: none; }
.ee-fl-note-head { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.ee-fl-note-head::-webkit-details-marker { display: none; }
.ee-fl-note-head::before {
    content: "i"; flex: none; width: 18px; height: 18px; border-radius: 50%;
    display: grid; place-items: center; font-size: 11px; font-weight: 700;
    background: var(--fl-info); color: var(--ee-bg-elevated);
}
.ee-fl-note--warn .ee-fl-note-head::before { content: "!"; background: var(--fl-warn); color: #1a1205; }
.ee-fl-note--bad .ee-fl-note-head::before { content: "!"; background: var(--fl-bad); color: #1a0705; }
.ee-fl-note-title { flex: 1; min-width: 0; font-weight: 600; color: var(--fl-t1, var(--fl-t2)); }
.ee-fl-note-head::after { content: "▾"; flex: none; color: var(--fl-t2); transition: transform 0.15s ease; }
.ee-fl-note--fold[open] .ee-fl-note-head::after { transform: rotate(180deg); }
.ee-fl-note--fold > .ee-fl-note-text { display: block; padding: 6px 0 2px 30px; }
.ee-fl-note-action { flex: none; display: inline-flex; gap: 6px; }

/* ------------------------------------------------------------- tiles */

.ee-fl-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ee-fl-tiles[data-fl-tiles="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ee-fl-tiles[data-fl-tiles="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ee-fl-tiles[data-fl-tiles="1"] { grid-template-columns: minmax(0, 1fr); }
.ee-fl-tiles > .ee-fw-tile { min-width: 0; }

/* ------------------------------------------------------------- tabs + panes */

.ee-fl-tabs {
    display: flex; gap: 2px; border-bottom: 1px solid var(--fl-line);
    overflow-x: auto; scrollbar-width: none; min-width: 0;
}
.ee-fl-tabs::-webkit-scrollbar { display: none; }
.ee-fl-tab {
    border: 0; background: transparent; cursor: pointer;
    padding: 9px 14px 11px; margin-bottom: -1px;
    font-size: 13.5px; color: var(--fl-t3); white-space: nowrap;
    border-bottom: 2px solid transparent;
}
.ee-fl-tab:hover { color: var(--fl-t1); }
.ee-fl-tab.is-active { color: var(--fl-t1); border-bottom-color: var(--fl-accent); }
.ee-fl-tab:focus-visible { outline: 2px solid var(--fl-accent); outline-offset: -2px; border-radius: 6px 6px 0 0; }
.ee-fl-tab-badge, .ee-fl-tab-ee {
    font-size: 9.5px; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
    background: var(--fl-wash); color: var(--fl-t3); vertical-align: 1px;
}

.ee-fl-pane { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ee-fl-pane[hidden] { display: none !important; }

/* ------------------------------------------------------------- cards, columns, key/value */

.ee-fl-card { border-radius: var(--fl-r); background: var(--fl-card); border: 1px solid var(--fl-card-line); padding: 14px 16px; min-width: 0; }
.ee-fl-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; min-width: 0; }
.ee-fl-card-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--fl-t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ee-fl-card-right { flex: none; display: inline-flex; align-items: center; gap: 10px; }
.ee-fl-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.ee-fl-row32 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; }
.ee-fl-col { min-width: 0; display: flex; flex-direction: column; gap: 12px; }

.ee-fl-kv { display: flex; flex-direction: column; margin: 0; }
.ee-fl-kv-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px;
    padding: 7px 0; border-bottom: 1px solid var(--fl-line); font-size: 13px; min-height: 34px;
}
.ee-fl-kv-row:last-child { border-bottom: 0; }
.ee-fl-kv dt { margin: 0; color: var(--fl-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ee-fl-kv dd { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--fl-t1); }
.ee-fl-kv-row.is-strong dd { font-weight: 600; }

/* ------------------------------------------------------------- collapsible sections */

.ee-fl-mores { display: flex; flex-direction: column; gap: 10px; }
.ee-fl-pane > .ee-fl-more, .ee-fl-col > .ee-fl-more { margin: 0; }
.ee-fl-more { border-radius: 12px; border: 1px solid var(--fl-card-line); background: rgba(var(--ee-fg-rgb), 0.02); min-width: 0; }
.ee-fw-theme-light .ee-fl-more { background: rgba(var(--ee-ink-rgb), 0.015); }
.ee-fl-more-head {
    list-style: none; cursor: pointer; padding: 10px 14px;
    display: flex; align-items: center; gap: 8px; min-width: 0;
    font-size: 13px; color: var(--fl-t2); white-space: nowrap;
}
.ee-fl-more-head::-webkit-details-marker { display: none; }
.ee-fl-more-chev { order: -1; flex: none; display: inline-block; width: 10px; color: var(--fl-t4); transition: transform 0.15s; }
.ee-fl-more[open] > .ee-fl-more-head .ee-fl-more-chev { transform: rotate(90deg); }
.ee-fl-more-title { flex: none; }
.ee-fl-more-sum { flex: 1; min-width: 0; font-style: normal; font-size: 12px; color: var(--fl-t4); overflow: hidden; text-overflow: ellipsis; }
.ee-fl-more-actions { flex: none; margin-left: auto; display: inline-flex; gap: 8px; }
.ee-fl-more-body { padding: 2px 16px 14px; min-width: 0; }
.ee-fl-more-head:focus-visible { outline: 2px solid var(--fl-accent); outline-offset: -2px; border-radius: 12px; }

/* ------------------------------------------------------------- foot */

.ee-fl-foot { font-size: 11px; color: var(--fl-t4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------- narrow fullscreen */

@container ee-fl (max-width: 1000px) {
    .ee-fl-tiles, .ee-fl-tiles[data-fl-tiles="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container ee-fl (max-width: 820px) {
    .ee-fl-row2, .ee-fl-row32 { grid-template-columns: minmax(0, 1fr); }
    .ee-fl-central { align-self: stretch; }
}
@container ee-fl (max-width: 560px) {
    .ee-fl-tiles, .ee-fl-tiles[data-fl-tiles] { grid-template-columns: minmax(0, 1fr); }
    .ee-fl-note { flex-wrap: wrap; }
    .ee-fl-note-text { white-space: normal; }
    /* Phone: the base-year bar wraps whole items instead of squeezing them into
       each other ("Basisjahr 2025" over "Rechenweg", "ändern" under the i). */
    .ee-fl-central { flex-wrap: wrap; row-gap: 6px; }
    .ee-fl-central-item { flex-shrink: 0; }
    .ee-fl-central-sep { display: none; }
    .ee-fl-central .ee-fl-change { margin-left: auto; }
    /* With year and method: "ändern" moves up next to the year, so the bar
       takes two rows (year · ändern / method · i) instead of three. */
    .ee-fl-central:has(.ee-fl-central-item ~ .ee-fl-central-item) > .ee-fl-change { order: 1; }
    .ee-fl-central:has(.ee-fl-central-item ~ .ee-fl-central-item) > .ee-fl-central-item ~ .ee-fl-central-item,
    .ee-fl-central:has(.ee-fl-central-item ~ .ee-fl-central-item) > .ee-fw-info-host,
    .ee-fl-central:has(.ee-fl-central-item ~ .ee-fl-central-item) > .ee-fl-central-i { order: 2; }
}

/* ------------------------------------------------------------ busy feedback
 * window.eeFinanceBusy (widget-finance-layout.js). Rule: every action that
 * starts async work shows this state. Neutral on purpose: no border colour,
 * so the red (stale) / blue (running) recompute frame stays the only frame.
 * Global selectors (not scoped to .ee-fl): the settings fullscreen, the
 * remuneration area and the widget tiles use the same helper.
 */
.is-busy[data-ee-busy] {
    cursor: progress !important;
    pointer-events: none;
    opacity: 0.85;
}
.ee-busy-spin {
    display: inline-block;
    flex: 0 0 auto;
    width: 0.95em;
    height: 0.95em;
    margin-right: 0.45em;
    vertical-align: -0.12em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    opacity: 0.8;
    animation: ee-busy-rot 0.75s linear infinite;
}
@keyframes ee-busy-rot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .ee-busy-spin { animation-duration: 2.4s; }
}
.ee-busy-fb {
    display: inline-block;
    margin-left: 0.5em;
    font-size: 0.85em;
    line-height: 1.3;
    white-space: nowrap;
    vertical-align: middle;
    animation: ee-busy-in 0.18s ease-out;
}
.ee-busy-fb.is-ok { color: var(--ee-fw-status-ok, #34c759); }
.ee-busy-fb.is-err {
    color: var(--ee-fw-status-error, #ff8a80);
    white-space: normal;
    max-width: 28em;
}
@keyframes ee-busy-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }

.ee-busy-host { position: relative; }
.ee-busy-host.is-loading > :not(.ee-busy-veil) { transition: opacity 0.15s; opacity: 0.45; }
.ee-busy-veil {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    font-size: 0.9em;
    color: var(--ee-fw-ink-2, rgba(var(--ee-fg-rgb), 0.78));
    background: transparent;
    cursor: progress;
    border-radius: inherit;
}
.ee-busy-veil .ee-busy-spin { width: 1.3em; height: 1.3em; }
.ee-fw-theme-light .ee-busy-veil { color: rgba(var(--ee-ink-rgb), 0.65); }
.ee-busy-area-fb { display: block; margin: 0.5em 0 0; }

/* Phone: the project-view touch-target rule draws every button at 48px, which
   made the wrapped base-year bar 150px tall. "i" and "ändern" keep their small
   look; an invisible ring keeps the 48px tap target (as the widget expand). */
@media (max-width: 768px) {
    .ee-fl-central button,
    body:has(#mapContainerEntry) .ee-fl-central button {
        position: relative;
        min-width: 0;
        min-height: 0;
    }
    .ee-fl-central .ee-fl-change,
    body:has(#mapContainerEntry) .ee-fl-central .ee-fl-change { height: 28px; }
    .ee-fl-central button::after {
        content: "";
        position: absolute;
        inset: -10px;
    }
}