/* ee-shell-sunbar.css — see docs/project-shell.md
 * Zone E sun bar (bottom centre of the map, Zieldesign Konfiguration 2026-10-20):
 * markup from assets/js/pv3d/panel.js. Colours/geometry only from --ees-* tokens
 * (light/dark from the system setting, ee-shell-tokens.css).
 * Apple-style capsule (2.25.712): slim, floating, translucent with blur, enough air;
 * effects as icon toggles, details in the "⋯" popover, nothing is ever cut off.
 */
.ees-sunbar {
    /* day track colours (panel.js dayGradient) */
    --ees-sunbar-night: var(--ees-sky-night);
    --ees-sunbar-dusk: var(--ees-sky-dusk);
    --ees-sunbar-day: var(--ees-sky-day);
    --ees-sunbar-edge: calc(var(--ees-gap) * 2 + 204px); /* map edge capsule, quer: Menue+3D+Zoom+-+Kompass (5 x 40px + 2 Trenner + Rand) */
    --ees-sunbar-h: 52px;

    position: absolute;
    z-index: 5;
    bottom: var(--ees-gap);
    left: calc(var(--ees-left-w) + var(--ees-gap) * 2);
    right: var(--ees-sunbar-edge);
    max-width: 680px;
    margin-inline: auto;
    height: var(--ees-sunbar-h);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 8px 0 10px;
    border-radius: calc(var(--ees-sunbar-h) / 2);
    background: var(--ees-glass-bg);
    border: 1px solid var(--ees-glass-border);
    box-shadow: var(--ees-glass-shadow), var(--ees-float-shadow);
    -webkit-backdrop-filter: var(--ees-backdrop);
    backdrop-filter: var(--ees-backdrop);
    color: var(--ees-text);
    font: 12px/1.35 var(--ees-font);
}
.ees-sunbar[hidden],
.ees-sunbar [hidden] { display: none !important; }

/* only in the module "Konfiguration" (without the attribute: as before) and with the map open */
body[data-ees-module]:not([data-ees-module="config"]) .ees-sunbar,
#mapContainerEntry:not(.active) .ees-sunbar { display: none !important; }

body.ees-inspector-open .ees-sunbar { right: calc(var(--ees-right-w) + var(--ees-gap) + var(--ees-sunbar-edge)); }
/* The side panels end above the sun bar row (--ees-panel-max-h): when the space between
   them is too narrow, the bar may run below the left panel - never covered, never cut. */
@media (min-width: 768px) and (max-width: 1399px) {
    body.ees-inspector-open .ees-sunbar { left: var(--ees-gap); }
}
/* Below 900 px the map edge capsule falls back to its narrow vertical column
   (ee-shell-map.css, same breakpoint) so the sun bar keeps enough room. */
@media (max-width: 900px) {
    .ees-sunbar { --ees-sunbar-edge: calc(var(--ees-gap) * 2 + 40px); }
}

.ees-sunbar button { font: inherit; color: inherit; cursor: pointer; }
.ees-sunbar__icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* date (the live sun line lives in the popover) */
.ees-sunbar__date { position: relative; flex: none; display: flex; align-items: center; gap: 3px; padding: 6px 8px; border-radius: 99px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.ees-sunbar__date:hover { background: var(--ees-surface-3); }
.ees-sunbar__caret { width: 14px; height: 14px; color: var(--ees-text-dim); }
/* native date input lies invisibly over the label; panel.js opens its picker (showPicker) */
.ees-sunbar__date-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; margin: 0; }
.ees-sunbar__date:focus-within { outline: 2px solid var(--ees-accent); outline-offset: 2px; }
.ees-sunbar__sun { font-size: 12px; color: var(--ees-text-2); font-variant-numeric: tabular-nums; }

/* play */
.ees-sunbar__play { width: 34px; height: 34px; flex: none; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--ees-accent); color: var(--ees-accent-text); }
.ees-sunbar__play .ees-sunbar__icon { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.ees-sunbar__play:hover { background: var(--ees-accent-strong); }
.ees-sunbar__play:focus-visible { outline: 2px solid var(--ees-accent); outline-offset: 2px; }

/* day slider 0-24 with bubble and scale */
.ees-sunbar__day { position: relative; flex: 1; min-width: 140px; padding-top: 4px; }
.ees-sunbar__range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 18px; margin: 0; background: transparent; cursor: pointer; }
.ees-sunbar__range::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: var(--ees-sunbar-track, var(--ees-surface-3)); }
.ees-sunbar__range::-moz-range-track { height: 6px; border-radius: 99px; background: var(--ees-sunbar-track, var(--ees-surface-3)); }
.ees-sunbar__range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; box-sizing: border-box; border-radius: 50%; background: var(--ees-knob); border: 0; box-shadow: var(--ees-float-shadow); }
.ees-sunbar__range::-moz-range-thumb { width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%; background: var(--ees-knob); border: 0; box-shadow: var(--ees-float-shadow); }
.ees-sunbar__range:focus-visible { outline: 2px solid var(--ees-accent); outline-offset: 3px; border-radius: 99px; }
.ees-sunbar__bubble { position: absolute; bottom: calc(100% + 2px); transform: translateX(-50%); padding: 2px 7px; border-radius: 99px; background: var(--ees-text); color: var(--ees-bg); font-size: 11px; font-weight: 650; white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; }
.ees-sunbar__ticks { display: flex; justify-content: space-between; margin-top: 1px; padding: 0 4px; font-size: 9.5px; color: var(--ees-text-dim); }

/* Jetzt */
.ees-sunbar__pill { flex: none; padding: 6px 12px; border-radius: 99px; border: 0; background: var(--ees-surface-3); font-size: 12px; font-weight: 600; color: var(--ees-text-2); white-space: nowrap; }
.ees-sunbar__pill:hover { color: var(--ees-text); }
.ees-sunbar__pill--live { color: var(--ees-accent-strong); background: var(--ees-accent-soft); }

/* icon toggles Schatten / Backtracking / Sturmstellung */
.ees-sunbar__toggles { display: flex; align-items: center; gap: 2px; flex: none; padding: 2px; border-radius: 99px; background: var(--ees-surface-2); }
.ees-sunbar__tgl { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 0; background: transparent; color: var(--ees-text-dim); transition: background .15s, color .15s; }
.ees-sunbar__tgl:hover { color: var(--ees-text); background: var(--ees-surface-3); }
.ees-sunbar__tgl.is-on { color: var(--ees-accent-text); background: var(--ees-accent); }
.ees-sunbar__tgl[aria-disabled="true"] { color: var(--ees-text-faint); background: transparent; opacity: .55; cursor: not-allowed; }
.ees-sunbar__tgl:focus-visible { outline: 2px solid var(--ees-accent); outline-offset: 1px; }
.ees-sunbar__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* short note above the capsule (panel.js flash) */
.ees-sunbar__flash { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); max-width: min(440px, 90vw); padding: 7px 12px; border-radius: 12px; background: var(--ees-glass-bg); border: 1px solid var(--ees-glass-border); box-shadow: var(--ees-glass-shadow), var(--ees-float-shadow); -webkit-backdrop-filter: var(--ees-backdrop); backdrop-filter: var(--ees-backdrop); font-size: 12px; color: var(--ees-text-2); text-align: center; pointer-events: none; }

/* compact capsule (panel.js, narrower than COMPACT_W): date, Jetzt and toggles sit in the popover */
.ees-sunbar__slot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--ees-border); }

/* "⋯" menu */
.ees-sunbar__morewrap { position: relative; flex: none; }
.ees-sunbar__more { position: relative; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 0; background: transparent; color: var(--ees-text-dim); }
.ees-sunbar__more:hover { background: var(--ees-surface-3); color: var(--ees-text); }
.ees-sunbar__more .ees-sunbar__icon { stroke-width: 3.2; }
.ees-sunbar__more[aria-expanded="true"] { background: var(--ees-surface-3); color: var(--ees-text); }
.ees-sunbar__more--hints::after { content: ""; position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--ees-warn); }
.ees-sunbar__menu { position: absolute; right: 0; bottom: calc(100% + 12px); width: 300px; max-height: 60vh; overflow-y: auto; box-sizing: border-box; padding: 12px; display: grid; gap: 8px; border-radius: var(--ees-radius); background: var(--ees-glass-bg); border: 1px solid var(--ees-glass-border); box-shadow: var(--ees-glass-shadow), var(--ees-float-shadow); -webkit-backdrop-filter: var(--ees-backdrop); backdrop-filter: var(--ees-backdrop); }
.ees-sunbar__level { font-weight: 650; }
.ees-sunbar__level[data-level="manufacturer"] { color: var(--ees-accent); }
.ees-sunbar__level[data-level="generic"] { color: var(--ees-info); }
.ees-sunbar__level[data-level="today"] { color: var(--ees-warn); }
.ees-sunbar__detail, .ees-sunbar__faint, .ees-sunbar__note { color: var(--ees-text-dim); font-size: 11px; }
.ees-sunbar__hints { margin: 0; padding: 6px 8px 6px 22px; border-radius: var(--ees-radius-sm); background: color-mix(in srgb, var(--ees-warn) 14%, transparent); color: var(--ees-text); }
.ees-sunbar__item { text-align: left; padding: 7px 9px; border-radius: var(--ees-radius-sm); border: 1px solid var(--ees-border); background: var(--ees-surface-2); }
.ees-sunbar__item:hover { border-color: var(--ees-accent); }
.ees-sunbar__strips { display: grid; gap: 4px; padding-top: 6px; border-top: 1px solid var(--ees-border); }
.ees-sunbar__subhead { font-weight: 600; }
.ees-sunbar__strip { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ees-sunbar__stripname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ees-sunbar__stripval { display: flex; align-items: center; gap: 4px; }
.ees-sunbar__num { width: 64px; padding: 2px 4px; font: inherit; border-radius: 6px; border: 1px solid var(--ees-border-strong); background: var(--ees-surface-2); color: var(--ees-text); }

/* phone: full width at the bottom; panel.js switches to the compact capsule (play + slider + ⋯) */
@media (max-width: 767px) {
    .ees-sunbar,
    body.ees-inspector-open .ees-sunbar { left: var(--ees-gap); right: var(--ees-gap); max-width: none; }
    .ees-sunbar__menu { width: min(300px, calc(100vw - 2 * var(--ees-gap))); }
}

/* Load fix: "3D wird geladen …" while today's boxes stay hidden and only flat
 * module outlines show (project-init.js pv3dBootHint). Glass capsule like the
 * sun bar, top centre of the map, gone with the first 3D frame. */
.ees-pv3d-loading {
    position: absolute;
    z-index: 5;
    top: var(--ees-top);
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 14px 6px 32px;
    border-radius: 999px;
    background: var(--ees-glass-bg);
    border: 1px solid var(--ees-glass-border);
    box-shadow: var(--ees-glass-shadow), var(--ees-float-shadow);
    -webkit-backdrop-filter: var(--ees-backdrop);
    backdrop-filter: var(--ees-backdrop);
    color: var(--ees-text-2);
    font: 12px/1.35 var(--ees-font);
    pointer-events: none;
    white-space: nowrap;
}
.ees-pv3d-loading::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -6px;
    border-radius: 50%;
    border: 1.5px solid var(--ees-text-faint);
    border-top-color: var(--ees-accent);
    animation: ees-pv3d-spin 0.9s linear infinite;
}
@keyframes ees-pv3d-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .ees-pv3d-loading::before { animation: none; }
}