/* ===== Custom Properties ===== */
:root {
	--bg:          #000;
	--surface:     #222;
	--surface-alt: #333;
	--text:        #eee;
	--text-muted:  #aaa;
	--text-dim:    #888;
	--border:      #444;
	--accent-red:  rgb(227, 75, 75);
	--accent-blue: rgb(75, 75, 227);
	--gap:         .5rem;
	--radius:      6px;
}

/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background-color: var(--bg);
	font-family: 'Open Sans', -apple-system, system-ui, sans-serif;
	color: var(--text);
	-webkit-font-smoothing: antialiased;
}

/* ===== Wetter: Tagesvorhersage ===== */
#line_daily {
	color: var(--text-muted);
	font-weight: 600;
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	border-bottom: 1px solid var(--border);
	scrollbar-width: thin;
	scrollbar-color: var(--surface-alt) transparent;
}

#weather_daily {
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
}

.dayslot {
	float: left;
	padding: .8rem .2rem;
	position: relative;
	width: 13rem;
	background: linear-gradient(135deg, var(--surface) 0%, var(--bg) 100%);
	border-right: 1px solid var(--border);
	transition: background .2s ease;
}

.dayslot:hover {
	background: linear-gradient(135deg, var(--surface-alt) 0%, var(--surface) 100%);
}

.dayslot span.days {
	display: block;
	position: absolute;
	top: 0;
	left: .2rem;
	font-size: .65rem;
	letter-spacing: .05em;
	writing-mode: vertical-rl;
	text-transform: uppercase;
	text-align: center;
	height: 100%;
	color: var(--text-muted);
}

.dayslot span.temp {
	display: block;
	float: left;
}

.dayslot span.temp sup,
.dayslot span.temp sub {
	display: block;
	font-size: x-large;
	font-weight: 600;
	text-align: right;
	line-height: 90%;
	margin-top: .2rem;
	width: 2.4rem;
}

.dayslot span.temp sup:after,
.dayslot span.temp sub:after {
	content: "\00b0";
	margin-left: 1%;
}

.dayslot span.temp sup { color: var(--accent-red); }
.dayslot span.temp sub { color: var(--accent-blue); }

.dayslot img {
	height: 2.2rem;
	width: auto;
	margin: .6rem .8rem 0 1.6rem;
	float: left;
}

.dayslot span.precip,
.dayslot span.uv {
	position: relative;
	float: left;
	display: block;
	width: 4.3rem;
	margin: .1rem 0 .1rem .5rem;
	color: var(--text-muted);
}

.dayslot span.precip img,
.dayslot span.uv img {
	width: 1.2rem;
	height: auto;
	float: left;
	margin: .2rem .2rem .1rem .1rem;
}

.dayslot span.precip_val {
	font-size: .8rem;
	display: block;
	float: left;
}

.dayslot span.precip_val:after { content: '%'; }

.dayslot span.uv_val:before {
	content: 'UVi';
	font-size: .6rem;
	margin-right: .2rem;
}

/* ===== Wetter: Stundenvorhersage ===== */
#line_hourly {
	font-family: 'Open Sans Condensed', sans-serif;
	color: var(--text-muted);
	font-weight: 600;
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	border-bottom: 1px solid var(--border);
	scrollbar-width: thin;
	scrollbar-color: var(--surface-alt) transparent;
}

#weather_hourly {
	width: auto;
	height: 10rem;
}

.hourslot {
	float: left;
	overflow: hidden;
	height: 100%;
	width: 1.8rem;
	position: relative;
	transition: background-color .15s ease;
}

.hourslot:nth-child(even) {
	background-color: var(--surface);
}

.hourslot span {
	width: 100%;
	display: block;
	text-align: center;
}

.hourslot span.hours {
	color: var(--text-muted);
	font-size: .8rem;
}

.hourslot span.temp {
	position: absolute;
	line-height: 80%;
	z-index: 2;
	color: var(--text-muted);
}

.hourslot span.temp img {
	margin: 0 .2rem;
}

.hourslot span.temp:after {
	content: "\00b0";
}

.hourslot span.precip {
	bottom: 1.2rem;
	position: absolute;
	background-color: rgba(100, 180, 240, 0.4);
	padding: 0;
	border-radius: 2px 2px 0 0;
}

.hourslot span.precip_val {
	position: absolute;
	bottom: 0;
	font-size: .8rem;
	color: var(--text-dim);
}

.hourslot span.precip_val:after { content: '%'; }

.hourslot.daypart {
	width: 1.5rem;
}

.hourslot span.daypart {
	height: 100%;
	writing-mode: vertical-rl;
	text-transform: uppercase;
	color: var(--text);
	font-weight: 300;
	font-family: 'Open Sans', sans-serif;
	letter-spacing: .05em;
}

/* ===== UV-Index Farbskala ===== */
img.uv0, img.uv1, img.uv2     { filter: invert(52%) sepia(49%) saturate(469%) hue-rotate(76deg) brightness(91%) contrast(90%); }
img.uv3, img.uv4, img.uv5     { filter: invert(80%) sepia(81%) saturate(733%) hue-rotate(330deg) brightness(101%) contrast(85%); }
img.uv6, img.uv7               { filter: invert(48%) sepia(97%) saturate(363%) hue-rotate(346deg) brightness(99%) contrast(92%); }
img.uv8, img.uv9, img.uv10    { filter: invert(56%) sepia(72%) saturate(5778%) hue-rotate(349deg) brightness(92%) contrast(79%); }
img.uv11, img.uv12, img.uv13, img.uv14 { filter: invert(43%) sepia(42%) saturate(454%) hue-rotate(229deg) brightness(90%) contrast(90%); }

/* ===== Scrollbar (Webkit) ===== */
#line_daily::-webkit-scrollbar,
#line_hourly::-webkit-scrollbar {
	height: 4px;
}

#line_daily::-webkit-scrollbar-track,
#line_hourly::-webkit-scrollbar-track {
	background: transparent;
}

#line_daily::-webkit-scrollbar-thumb,
#line_hourly::-webkit-scrollbar-thumb {
	background: var(--surface-alt);
	border-radius: 2px;
}

/* ===== Dashboard Layout ===== */
.dashboard {
	display: grid;
	grid-template-columns: 1fr 30%;
	grid-gap: 0;              /* Safari 12 */
	gap: 0;
	min-height: calc(100vh - 16rem);
}

.sidebar {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	padding: var(--gap);
}

.sidebar > * + * {
	margin-top: var(--gap);
}

/* ===== Kalender ===== */
#calendar {
	background: var(--surface);
	padding: 1.2rem 1.5rem;
	overflow-y: auto;
}

#calendar .calday {
	margin: 0 0 1rem;
	padding-bottom: .4rem;
	border-bottom: 1px solid var(--border);
}

#calendar .calday:last-child {
	border-bottom: none;
}

#calendar h1.dayline {
	margin: 0 0 .3rem;
	font-size: .85em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--text-muted);
}

#calendar .daycontent {
	position: relative;
	font-size: 1.3em;
	padding: .15em 0 .15em 2.2rem;
	line-height: 1.5;
}

#calendar .daycontent sup {
	vertical-align: baseline;
	font-size: .55em;
	margin-left: .6rem;
	color: var(--text-muted);
	font-weight: 400;
}

#calendar .daycontent i {
	position: absolute;
	left: 0;
	top: .15em;
	width: 1.8rem;
	text-align: center;
	font-size: 1em;
	line-height: 1.5;
}

.daycontent.birthday i  { color: #f48fb1; }
.daycontent.holidays i  { color: #ef5350; }
.daycontent.school i    { color: #64b5f6; }
.daycontent.trash i     { color: #a5d6a7; }
.daycontent.soccer i    { color: #81c784; }
.daycontent.classwork i { color: #ffb74d; }

#calendar #calday0 {
	margin-top: .5rem;
	font-size: 1.5em;
}

#calendar #calday0 h1.dayline { font-size: .7em; }

#calendar #calday1 {
	font-size: 1.25em;
}

#calendar #calday1 h1.dayline { font-size: .75em; }

/* ===== Temperaturen ===== */
#temperatures {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: var(--gap);     /* Safari 12 */
	gap: var(--gap);
}

#temperatures .tempbox {
	background: var(--surface-alt);
	border-radius: var(--radius);
	padding: .4rem .5rem;
}

#temperatures .tempbox h1 {
	margin: 0;
	font-size: .7rem;
	font-weight: 300;
	color: var(--text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#temperatures .tempbox p {
	font-weight: 600;
	margin: 0;
	padding: .15rem;
}

#temperatures .tempbox p.temperature {
	font-size: 1.8rem;
	text-align: center;
}

#temperatures .tempbox p.temperature sup {
	font-size: .8rem;
}

#temperatures .tempbox p.humidity {
	text-align: right;
	padding: 0;
	font-size: .8rem;
}

/* ===== Strom / Tibber ===== */
#electricity {
	background: var(--surface-alt);
	border-radius: var(--radius);
	padding: .6rem;
}

#electricity h1 {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: center;
	align-items: center;
	margin: 0 0 .4rem;
	font-size: .8rem;
	font-weight: 300;
	color: var(--text-muted);
}

.tibber-header-price {
	font-weight: 600;
	font-size: .75rem;
	color: var(--text);
}

.tibber-dot {
	display: inline-block;
	width: .55rem;
	height: .55rem;
	border-radius: 50%;
	vertical-align: middle;
}

.tibber-dot.VERY_CHEAP     { background: #388e3c; }
.tibber-dot.CHEAP          { background: #6fad6f; }
.tibber-dot.NORMAL         { background: #c48a3f; }
.tibber-dot.EXPENSIVE      { background: #b94a48; }
.tibber-dot.VERY_EXPENSIVE { background: #7b4ba0; }

.marker {
	display: inline-block;
	border-radius: 2px;
}

.marker.VERY_CHEAP     { background: #388e3c; }
.marker.CHEAP          { background: #6fad6f; }
.marker.NORMAL         { background: #c48a3f; }
.marker.EXPENSIVE      { background: #b94a48; }
.marker.VERY_EXPENSIVE { background: #7b4ba0; }

#electricity .timeline {
	position: relative;
	height: 1.2rem;
	margin-top: .4rem;
}

#electricity .timeline .tick {
	position: absolute;
	bottom: 0;
	font-size: .8rem;
	color: var(--text-muted);
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	white-space: nowrap;
}

#electricity .timeline .tick.start { left: 0%;   transform: translateX(0);     -webkit-transform: translateX(0); }
#electricity .timeline .tick.mid   { left: 50%; }
#electricity .timeline .tick.end   { left: 100%; transform: translateX(-100%); -webkit-transform: translateX(-100%); }

#electricity .timeline .pointer {
	position: absolute;
	top: 2px;
	height: 100%;
	width: 0;
}

#electricity .timeline .pointer::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 0;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 8px solid #fff;
}

/* ===== Solar ===== */
#solar {
	-webkit-flex: 1;
	flex: 1;
}

#solar .solar_content {
	background: var(--surface-alt);
	border-radius: var(--radius);
	padding: .6rem;
}

#solar .solar_content h1 {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: baseline;
	align-items: baseline;
	margin: 0 0 .4rem;
	font-size: .8rem;
	font-weight: 300;
	color: var(--text-muted);
}

.solar-header-values {
	font-weight: 600;
	font-size: .75rem;
	color: var(--text);
}

/* Layout: LEDs links, Icons rechts */
.solar-layout {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
}

.solar-scale {
	-webkit-flex: 1;
	flex: 1;
	min-width: 0;
	position: relative;
	padding: 7px 0;
}

/* LED-Segmente */
.solar-leds {
	display: -webkit-flex;
	display: flex;
}

.solar-seg {
	-webkit-flex: 1;
	flex: 1;
	height: 1.4rem;
	border-radius: 2px;
	opacity: .2;
}

.solar-seg + .solar-seg {
	margin-left: 2px;
}

.solar-seg.lit {
	opacity: 1;
	box-shadow: 0 0 4px rgba(255,255,255,.15);
}

/* Marker: cur (oben), pre (unten) */
.solar-marker {
	position: absolute;
	left: 0;
	height: 0;
	width: 0;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	transition: left .6s ease;
	z-index: 1;
}

.solar-marker-cur {
	top: -6px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid #fff;
}

.solar-marker-pre {
	bottom: -6px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 6px solid #999;
}

/* Geräte-Icons rechts, nebeneinander */
.solar-icons {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	margin-left: .6rem;
}

.solar-icons > * + * {
	margin-left: .4rem;
}

.solar-icons .mdi {
	font-size: 1.5rem;
	color: var(--text-dim);
	transition: color .3s ease;
}

.solar-icons .mdi.active {
	color: #66bb6a;
}