/*
================================================
The switches on the go-e wallbox page
================================================

The charging power card of goe.xhtml carries five settings and two buttons. They used to be
rendered as a switch with its label in a div underneath, all in one column with even spacing -
so every label sat exactly between its own switch and the next one, and the topmost switch read
as if it belonged to the "Charging power" heading above it.

Here each setting is one row: the label on the left, the switch on the right, a hairline rule
between rows. Two things on one line cannot be mis-paired, and the rule shows where a row ends.

The Force start / Force stop buttons are not settings - they act on the wallbox the moment they
are pressed - so they sit below a heavier rule, under a label that says so.

Kept out of style.css (the template's own stylesheet, identical in both modules) so this stays
reviewable and easy to drop. Loaded for every page from common/commonHead.xhtml.
*/

.goe-settings {
	margin-top: 14px;
	border-top: 1px solid #e3eaef;
}

/* one h:form per setting - JSF needs its own form to post a single switch */
.goe-setting {
	margin: 0;
}

.goe-setting-row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid #e3eaef;
}

.goe-setting-label {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
}

/* what the setting actually does, for the ones whose name does not say it */
.goe-setting-hint {
	display: block;
	font-weight: 400;
	margin-top: 1px;
}

/* the switch keeps its PrimeFaces look, it only stops stretching and loses its stray margin */
.goe-setting-row .ui-toggleswitch {
	flex: 0 0 auto;
	margin: 0;
}

.goe-actions {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 2px solid #d3dae6;
}

.goe-actions-label {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 8px;
}

/* on a narrow card the two buttons share the width instead of wrapping one under the other */
.goe-actions .btn {
	margin-bottom: 6px;
}

/* the charging priority dial (issue #642) - one control with three positions, not two switches */
.goe-priority-row {
	display: block;
	padding: 11px 0 0;
}

.goe-priority-dial {
	display: flex;
	width: 100%;
	margin: 8px 0 11px;
}

.goe-priority-dial .ui-button {
	flex: 1 1 0;
	min-width: 0;
}

/* the battery position's own settings, set in from the rows that always show */
.goe-battery-settings {
	padding-left: 14px;
	border-left: 3px solid #cfe0d6;
	background: #f6faf8;
}

.goe-battery-settings .goe-setting-row:last-child {
	border-bottom: none;
}

/*
 * A dropdown sits under its label, not beside it.
 *
 * Beside it was a flex row holding a <select class="form-control">, which Bootstrap
 * makes width:100%. A flex item whose width is a percentage is exactly where the
 * engines disagree: Chrome clamps it with max-width and leaves the label its share,
 * Safari keeps the 100% and squeezes the label to nothing - and a label a few pixels
 * wide renders its text one character per line, straight down the page. It was on a
 * phone that it showed.
 *
 * Stacking is also what the night rule hour and the NT window on this same card have
 * always done, so there is no engine left to disagree with, and nothing to test on
 * three of them.
 */
.goe-setting-stacked {
	display: block;
}

.goe-setting-stacked select,
.goe-setting-stacked .ui-selectonemenu {
	display: block;
	width: 9rem;
	max-width: 9rem;
	margin-top: 8px;
}

/*
================================================
Status first (issue #676)
================================================

The page opens with what the wallbox is doing now, then when it will charge, then what it
charged. The status bar is one card in four cells: the state and why, the power the box
measures, the session against its limit, and the two buttons that act on the box now.
*/

/* div.card.goe-status: the template sets .card to block with a heavier selector */
div.card.goe-status {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1.3fr auto;
	overflow: hidden;
}

.goe-status-cell {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	min-width: 0;
	padding: 16px 18px;
	border-right: 1px solid #e3eaef;
}

.goe-status-cell:last-child {
	border-right: none;
}

.goe-status-row {
	display: flex;
	justify-content: space-between;
	gap: 8px;
}

.goe-muted {
	color: #6b7690;
	font-size: 12px;
}

.goe-estimate {
	font-style: italic;
}

.goe-big {
	font-family: Poppins, sans-serif;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	color: #1d2740;
}

.goe-big small {
	font-size: 14px;
	font-weight: 500;
	color: #6b7690;
}

/* the state pill: form as well as words, so the state reads at a glance */
.goe-state {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 8px;
	padding: 5px 12px;
	border-radius: 99px;
	font: 600 13px Poppins, sans-serif;
	background: #eef1f6;
	color: #4c5670;
}

.goe-state-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

.goe-state-charging { background: #e2f4ea; color: #1f9d55; }
.goe-state-waiting,
.goe-state-complete { background: #e8effc; color: #0442ba; }
.goe-state-error { background: #fbe7e7; color: #cf3c3c; }

.goe-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.goe-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 9px;
	border-radius: 99px;
	font: 500 11.5px Poppins, sans-serif;
	background: #eef1f6;
	color: #44506b;
}

.goe-chip-sun { background: #fdf3cf; color: #7a5800; }
.goe-chip-night { background: #e7e8f7; color: #3b3f8f; }
.goe-chip-good { background: #e2f4ea; color: #1a7f46; }
.goe-chip-bad { background: #fbe7e7; color: #b52f2f; }

.goe-bar {
	height: 8px;
	border-radius: 99px;
	background: #e3eaef;
	overflow: hidden;
}

.goe-bar i {
	display: block;
	height: 100%;
	background: #0442ba;
	border-radius: 99px;
}

/* the buttons of the status bar sit one under the other, the width of the cell */
.goe-status .goe-actions {
	margin-top: 0;
	padding-top: 16px;
	border-top: none;
	min-width: 180px;
}

.goe-status .goe-actions form {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.goe-status .goe-action {
	width: 100%;
	margin: 0;
}

/* rules on the left, the limit, the wallbox and the lock on the right */
.goe-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}

.goe-grid > .card,
.goe-side > .card {
	margin-bottom: 0;
}

.goe-side {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.goe-card-title {
	font: 600 12px Poppins, sans-serif;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #6b7690;
	margin-bottom: 12px;
}

/* settings that belong to the row above them - the priority under solar, the window under NT */
.goe-subsetting {
	padding-left: 14px;
	border-left: 3px solid #e3eaef;
	padding-bottom: 11px;
	border-bottom: 1px solid #e3eaef;
}

.goe-subsetting .goe-setting-row:last-child {
	border-bottom: none;
}

.goe-window {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-top: 11px;
}

.goe-window select {
	width: 7rem;
}

.goe-lock-card {
	border: 1px solid #f1c9c9;
	background: #fffafa;
}

.goe-lock-card .goe-setting-row {
	border-bottom: none;
	padding: 0;
}

/* the 24 hour strip: bands and markers placed in percent of the day by the bean */
.goe-strip {
	margin-bottom: 8px;
}

.goe-strip-track {
	position: relative;
	height: 74px;
	border-radius: 6px;
	background: #f4f6fb;
}

.goe-band {
	position: absolute;
	height: 18px;
	padding: 0 6px;
	border-radius: 3px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font: 500 10.5px/18px Poppins, sans-serif;
}

.goe-band-night { top: 6px; background: #e7e8f7; color: #3b3f8f; }
.goe-band-sun { top: 28px; background: #fdf3cf; color: #7a5800; }
.goe-band-reserve { top: 50px; background: #fde9dc; color: #9a4a14; }

.goe-marker {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 0;
	border-left: 2px solid;
}

.goe-marker em {
	position: absolute;
	bottom: 2px;
	left: 4px;
	font: 500 10px Roboto, sans-serif;
	font-style: normal;
	white-space: nowrap;
}

.goe-marker-start { color: #1f9d55; }
.goe-marker-stop { color: #cf3c3c; border-left-style: dashed; }
.goe-marker-now { color: #0442ba; }
.goe-marker-now em { top: 2px; bottom: auto; right: 4px; left: auto; }

.goe-strip-axis {
	position: relative;
	height: 16px;
	font-size: 10px;
	color: #6b7690;
}

.goe-strip-axis span {
	position: absolute;
	transform: translateX(-50%);
}

.goe-strip-axis span:first-child { transform: none; }
.goe-strip-axis span:last-child { transform: translateX(-100%); }

/* the session limit: one row of chips, the one in force filled */
.goe-limit-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.goe-limit-chip {
	border: 1px solid #c7d3ea;
	background: #ffffff;
	color: #0442ba;
	border-radius: 99px;
	padding: 5px 14px;
	font: 500 13px Poppins, sans-serif;
	cursor: pointer;
}

.goe-limit-chip:hover,
.goe-limit-chip:focus-visible {
	border-color: #0442ba;
}

.goe-limit-chip.is-selected {
	background: #0442ba;
	border-color: #0442ba;
	color: #ffffff;
}

/* the morning start hours under their switch (issue #766), greyed while the switch is off */
.goe-morning-hours {
	margin-top: 8px;
}

.goe-limit-chip:disabled {
	cursor: default;
	border-color: #e3e7ee;
	background: #f4f6fb;
	color: #8a93a8;
}

.goe-limit-chip.is-selected:disabled {
	border-color: #c9d0dc;
	background: #c9d0dc;
	color: #4c5670;
}

.goe-limit-none {
	border-style: dashed;
	color: #6b7690;
}

/* the month in four figures over the session table */
.goe-kpis {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	padding: 6px 0 14px;
	margin-bottom: 12px;
	border-bottom: 1px solid #e3eaef;
}

.goe-kpis > div {
	display: flex;
	flex-direction: column;
}

.goe-kpi {
	font: 600 20px Poppins, sans-serif;
	font-variant-numeric: tabular-nums;
	color: #1d2740;
}

.goe-kpi-sun { color: #b88a00; }
.goe-kpi-good { color: #1f9d55; }

.goe-sessions td.goe-num {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/*
 * On a phone the table reflows into label/value rows, and PrimeFaces caps each label at 35% of
 * the row. The label sits inside the cell, so it inherited the nowrap above: "Costs for the
 * charge in €" could not wrap and ran over its own value (issue 680). One width for every label
 * lines the values up under each other.
 */
.goe-sessions td .ui-column-title {
	white-space: normal;
	vertical-align: middle;
	width: 35%;
}

.goe-solarbar {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.goe-solarbar i {
	position: relative;
	display: inline-block;
	width: 46px;
	height: 6px;
	border-radius: 99px;
	background: #e3eaef;
	overflow: hidden;
}

.goe-solarbar b {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	background: #f2b705;
}

@media (max-width: 991px) {
	div.card.goe-status {
		grid-template-columns: 1fr 1fr;
	}

	.goe-status-cell:nth-child(2) {
		border-right: none;
	}

	.goe-status-cell:nth-child(n+3) {
		border-top: 1px solid #e3eaef;
	}

	.goe-grid {
		grid-template-columns: 1fr;
	}

	.goe-kpis {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 575px) {
	div.card.goe-status {
		grid-template-columns: 1fr;
	}

	.goe-status-cell {
		border-right: none;
		border-top: 1px solid #e3eaef;
	}

	.goe-status-cell:first-child {
		border-top: none;
	}

	/*
	 * On a phone the two buttons stay in reach: pinned to the bottom of the screen, not of the
	 * card - sticky would only hold them inside the status card, which scrolls away first. The
	 * page gets the height of the bar back at its end, so the table's last row is not covered.
	 */
	.goe-status .goe-actions {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 50;
		padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		background: #ffffff;
		box-shadow: 0 -2px 8px rgba(20, 30, 60, 0.08);
		padding-top: 10px;
		padding-left: 12px;
		padding-right: 12px;
	}

	body:has(.goe-status .goe-actions) .content_wrapper {
		padding-bottom: 76px;
	}

	.goe-status .goe-actions .goe-actions-label {
		display: none;
	}

	.goe-status .goe-actions form {
		flex-direction: row;
	}
}

/* the rules card in groups, in the order of a day (issue #786) */
.goe-settings:has(.goe-group) {
	border-top: none;
}

.goe-group {
	border: 1px solid #e3e7f1;
	border-radius: 6px;
	background: #fafbfe;
	padding: 6px 14px 10px;
	margin-bottom: 12px;
}

.goe-group-title {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #8a93a8;
	padding-top: 6px;
}

.goe-group > .goe-setting:last-child .goe-setting-row:last-child,
.goe-group > .goe-subsetting:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

/* morning start and evening stop: the two ends of the same day, next to each other */
.goe-group-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.goe-group-pair .goe-group {
	margin-bottom: 12px;
	min-width: 0;
}

.goe-group-pair .goe-limit-chips {
	flex-wrap: wrap;
}

@media (max-width: 767px) {
	.goe-group-pair {
		grid-template-columns: 1fr;
		gap: 0;
	}
}