/* ── DEVICE-VIEW SHELL (shared by Tesla-Modus/iPad/iPhone) ────────────────────
   Same flat background as the desktop view: #content and .topbar both sit on
   var(--bg), no separate content-area tint (css/layout.css) - .kpi itself
   carries no background either (flat design, see css/kpi.css .kpi). Mirrored
   1:1 here so header and content area are exactly the same surface as
   Desktop. */
/* Selbst der Scroller, nicht #device-content — aus demselben Grund wie
   #main-app (css/layout.css): nur so steht die Kopfleiste per sticky über dem
   Inhalt, der sichtbar darunter durchscrollt, statt als Geschwister daneben,
   unter dem sich nie etwas bewegt. */
.device-root {
	height: 100dvh;
	overflow-y: auto;
	overflow-x: hidden;
	scroll-padding-top: var(--topbar-h-total);
	background: var(--bg);
	color: var(--t1);
	/* Home-Indicator-Schutz: jetzt hier, da der frühere innere Scroller
	   (#device-content) keiner mehr ist. */
	padding-bottom: var(--safe-bottom);
}
/* Seit 30.08.2026 haar genau dasselbe Markup/dieselben Klassen wie .topbar
   (css/layout.css): .topbar-left (Positions-Selector) + .view-switch-group +
   .topbar-right (5 Icon-Buttons), nur der Header-Container selbst behält
   seinen eigenen Namen (position:relative als Bezugsrahmen für den absolut
   zentrierten .view-switch-group; sticky sitzt am umschliessenden
   .chrome-stack). Kein eigenes .device-topbar-right/.device-topbar-left
   mehr nötig - .topbar-left/.topbar-right sind bereits unscoped generisch. */
.device-topbar {
	/* Kein border-bottom - .topbar (css/layout.css) hat ebenfalls keine
	   Trennlinie zum Content, die Fläche ist ohnehin dieselbe var(--bg). */
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* min-height statt height, aus demselben Grund wie .topbar
	   (css/layout.css): unter box-sizing:border-box würde padding-top sonst
	   die Icon-Reihe stauchen statt die Leiste zu vergrössern (08.09.2026). */
	min-height: var(--topbar-h);
	padding-top: var(--safe-top);
	padding-inline: var(--page-pad-safe-left) var(--page-pad-safe-right);
	/* Kein eigener Hintergrund — die Fläche liegt am .chrome-stack
	   (css/layout.css), der hier nur diese Leiste umschliesst (die Banner
	   liegen ausserhalb, siehe index.html). */
	background: transparent;
}
/* Kein Scroller mehr (das ist jetzt .device-root, siehe oben) — behält aber
   ein Höhenbudget, damit der "Lade…"-Platzhalter und die noch leeren
   .tesla-/.ipad-/.iphone-shell-Hüllen weiterhin die Restfläche ausfüllen
   statt auf Textzeilenhöhe zusammenzufallen. --safe-bottom muss mit abgezogen
   werden: es sitzt als padding an .device-root, verkleinert unter
   box-sizing:border-box also deren Content-Box — ohne den Abzug wäre die
   Ansicht auf jedem Gerät mit Home-Indicator immer um genau diesen Betrag
   scrollbar, auch bei leerem Inhalt.
   Flex-Column, damit .device-loading die Restfläche per flex:1 einnehmen
   kann; ein height:100% dort liefe gegen die inhaltsabhängige Höhe hier ins
   Leere und der "Lade…"-Text stünde als einzelne Zeile unter der Leiste. */
#device-content {
	min-height: calc(100dvh - var(--topbar-h-total) - var(--safe-bottom));
	display: flex;
	flex-direction: column;
}
/* Shared by tesla.js/ipad.js/iphone.js/view-switch.js/app.js - no
   per-mode loading variant (previously duplicated as .tesla-loading in
   css/tesla.css, byte-identical; consolidated here, R246). */
.device-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	/* flex:1 statt height:100% — #device-content hat keine feste Höhe mehr
	   (nur min-height), eine Prozenthöhe liefe dort ins Leere. */
	flex: 1;
	color: var(--t3);
	font-size: clamp(14px, 1.5vw, 18px);
}

/* ── VIEW SWITCHER (rendered in both the normal topbar and the device-view one) ──
   Centered over the topbar (both .topbar and .device-topbar establish a
   positioning context via position:relative - see css/layout.css bzw. oben).
   Grouping/border/hover/active mechanics all come from .icon-btn-group
   (css/layout.css, shared with .topbar-right/#settings-btn) - only the
   absolute centering is switcher-specific. */
.view-switch-group {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}
/* Below this width, a perfectly viewport-centered switcher can overlap
   .topbar-left (position name/symbol) or .topbar-right (icon buttons) -
   neither has a min-width/ellipsis clamp. Seit 30.08.2026 gilt das Risiko
   für beide Topbar-Varianten gleichermassen (.device-topbar hat jetzt
   dieselbe .topbar-left/-right-Struktur). Fall back to the normal flex flow
   (in DOM order between topbar-left/-right, so the existing space-between
   keeps it clear of both) instead of absolute centering. */
@media (max-width: 600px) {
	.topbar .view-switch-group,
	.device-topbar .view-switch-group {
		position: static;
		transform: none;
	}
}

/* ── VIEW SWITCHER COLLAPSE (trigger + dropdown, js/view-switch.js/js/app.js) ──
   Same 620px breakpoint as the hamburger collapse below (Nutzerwunsch
   02.09.2026: beide Kollaps-Stufen gleichzeitig einschalten, nicht
   gestaffelt) - collapsing to the single-icon trigger here avoids an
   intermediate cramped state where the full icon row sits in the normal
   flex flow (see the 600px position:static fallback above, which now only
   matters in the brief window before this trigger takes over).
   .view-switch-trigger shows only the current mode's icon (see
   ViewSwitch.renderSwitcherUI()) and opens .view-switch-dropdown (js/app.js
   toggleViewSwitchDropdown()) instead of the full icon row - a single icon,
   so it just falls back to the standard 30x30 .icon-btn square (no chevron,
   Nutzerwunsch 17.09.2026, matches #holidays-btn's size exactly). */
.view-switch-trigger {
	display: none;
}
@media (max-width: 620px) {
	.topbar .view-switch-group,
	.device-topbar .view-switch-group {
		display: none;
	}
	.topbar .view-switch-trigger,
	.device-topbar .view-switch-trigger {
		display: flex;
	}
	/* Below this width .view-switch-group is hidden (rule above) and
	   .view-switch-trigger takes its place as one of 3 flow children
	   (.topbar-left, .view-switch-trigger, .topbar-right - .view-switch-group
	   contributes no grid track while display:none). The base .topbar's
	   flex + justify-content:space-between would spread all 3 evenly,
	   floating the trigger in the dead center of the bar - switching to grid
	   here instead gives .topbar-left its own flexible 1fr track (so it still
	   pushes everything else right, exactly like space-between did) while
	   .view-switch-trigger and .topbar-right share the remaining auto-sized
	   space snug together at the right edge, trigger docked directly left of
	   #holidays-btn (Nutzerwunsch 17.09.2026). */
	.topbar,
	.device-topbar {
		display: grid;
		grid-template-columns: 1fr auto auto;
		align-items: center;
		column-gap: 8px;
	}
}

/* ── HAMBURGER COLLAPSE (topbar-right, js/app.js toggleHamburgerDropdown()) ──
   Same 620px breakpoint as the view-switch collapse above (Nutzerwunsch
   02.09.2026: beide gleichzeitig). #holidays-btn/#push-btn are deliberately
   excluded (Nutzerwunsch 21.09.2026: Holidays UND Push bleiben aussen, nur
   Theme/Settings/Logout wandern ins Hamburger-Menü) - sie bleiben sichtbar
   ausserhalb des Hamburger-Menüs bei jeder Breite. */
.hamburger-btn {
	display: none;
}
@media (max-width: 620px) {
	.topbar-right .icon-btn:not(#holidays-btn):not(#device-holidays-btn):not(#push-btn):not(#device-push-btn):not(.hamburger-btn) {
		display: none;
	}
	.hamburger-btn {
		display: flex;
	}
}

/* ── TESLA/IPAD/IPHONE SHELLS ──
   Tesla zeigt seit der Content-Übernahme (js/views/tesla.js) dieselben
   Elemente wie die Desktop-Übersicht (KPI-Strip, Chart, Teslanaire, CAGR,
   Tage/Wochentag/Runs, Top10) und trägt dafür zusätzlich die .page-full-
   Klasse (padding/gap, siehe layout.css) - iPad/iPhone werden noch Stück für
   Stück übernommen (js/views/{ipad,iphone}.js), bis dahin bleibt dort nur
   diese identische Basis-Shell (min-height/flex-column; Background/color
   kommen vom shared .device-root wrapper oben). Eine Regel statt drei
   byte-identischer Kopien - .tesla-shell war bis 30.08.2026 sogar in einer
   eigenen css/tesla.css. .iphone-shell bekommt zusätzlich sein eigenes
   horizontales Padding (kein Kartengrid wie tesla/ipad, braucht daher Rand
   statt Grid-Gap). */
.tesla-shell,
.ipad-shell,
.iphone-shell {
	min-height: 100%;
	display: flex;
	flex-direction: column;
}
.iphone-shell {
	padding-inline: clamp(16px, 5vw, 28px);
}