:root {
	color-scheme: dark;
	--bg: #17312e;
	--surface: #1c3835;
	--surface-strong: #263f3b;
	--surface-soft: #213a36;
	--line: rgba(220, 233, 228, 0.28);
	--line-strong: rgba(220, 233, 228, 0.42);
	--text: #edf5f2;
	--muted: #a8bbb6;
	--primary: #ff7140;
	--primary-strong: #ff845c;
	--success: #4ed18b;
	--warning: #d8b86f;
	--danger: #ff5d62;
	--off: #8fa29d;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
	box-sizing: border-box;
}

body {
	min-width: 320px;
	margin: 0;
	background: var(--bg);
	color: var(--text);
	overflow-x: hidden;
}

button,
input {
	font: inherit;
	max-width: 100%;
}

.app-shell {
	width: min(1120px, calc(100vw - 48px));
	margin: 0 auto;
	padding: 18px 0 42px;
	overflow-x: hidden;
}

.login-shell {
	display: grid;
	place-items: center;
	min-height: 100vh;
	padding: 24px;
}

.login-panel {
	display: grid;
	gap: 18px;
	width: min(100%, 380px);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding: 28px 0;
}

.login-panel h1 {
	margin-top: 4px;
}

.login-panel .button {
	width: 100%;
}

.login-error {
	margin: 0;
	border-left: 3px solid var(--danger);
	padding: 9px 0 9px 12px;
	background: rgba(255, 93, 98, 0.08);
	color: #ffd6d7;
	font-size: 0.86rem;
}

.topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 66px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 22px;
	padding-bottom: 16px;

	.topbar-actions{
		justify-content: flex-end;
	}
}

.eyebrow,
.subtle,
.save-status {
	margin: 0;
	color: var(--muted);
	font-size: 0.82rem;
}

h1,
h2 {
	margin: 0;
	letter-spacing: 0;
}

h1 {
	font-size: 1.55rem;
	font-weight: 760;
	line-height: 1;
}

h2 {
	font-size: 1.35rem;
	font-weight: 500;
}

.topbar-actions,
.section-heading,
.form-actions,
.manual-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.logout-form {
	margin: 0;
}

.time-summary {
	display: grid;
	gap: 4px;
	max-width: min(430px, 100%);
	min-width: 0;
	text-align: right;
}

.time-summary p {
	margin: 0;
	overflow-wrap: anywhere;
}

.time-summary p:first-child {
	font-size: 1rem;
	font-weight: 720;
}

.time-summary p:last-child {
	color: var(--muted);
	font-size: 0.82rem;
}

.section-heading {
	justify-content: space-between;
	border-bottom: 1px solid var(--line);
	margin-bottom: 14px;
	padding-bottom: 12px;
}

.layout-grid {
	display: grid;
	grid-template-columns: minmax(300px, 0.86fr) minmax(320px, 1.14fr);
	gap: 30px;
	margin-bottom: 28px;
	min-width: 0;
}

.settings-panel,
.today-panel,
.days-panel,
.change-log-panel {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	min-width: 0;
	padding: 0;
}

.settings-panel {
	order: 1;
}

.today-panel {
	order: 2;
}

label span,
legend {
	display: block;
	margin-bottom: 6px;
	color: var(--muted);
	font-size: 0.78rem;
	font-weight: 650;
}

label {
	min-width: 0;
}

fieldset {
	border: 0;
}

input[type="email"],
input[type="password"],
input[type="text"],
input[type="time"] {
	width: 100%;
	inline-size: 100%;
	max-width: 100%;
	min-width: 0;
	min-inline-size: 0;
	min-height: 40px;
	border: 1px solid var(--line-strong);
	border-radius: 0;
	padding: 0 11px;
	color: var(--text);
	background: var(--surface-strong);
	outline: none;
}

input:focus {
	border-color: var(--primary);
}

.credential-fields {
	display: grid;
	gap: 12px;
	margin-top: 18px;
	border-top: 1px solid var(--line);
	padding: 16px 0 0;
}

.checkbox-row {
	display: flex;
	align-items: center;
	gap: 9px;
}

.checkbox-row input {
	margin: 0;
	accent-color: var(--primary);
}

.checkbox-row span {
	margin: 0;
}

.switch {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--text);
	font-weight: 650;
	span{
		margin-bottom: 0;
	}
}

.switch input {
	width: 18px;
	height: 18px;
	accent-color: var(--primary);
}

.weekday-times {
	margin: 0;
	padding: 0;
}

.weekday-time-controls {
	display: grid;
	gap: 8px;
}

.weekday-time-row {
	display: grid;
	grid-template-columns: minmax(88px, 0.8fr) minmax(92px, 1fr) minmax(92px, 1fr);
	gap: 10px;
	align-items: end;
	border: 1px solid var(--line);
	border-radius: 0;
	padding: 10px;
	background: var(--surface-soft);
	min-width: 0;
}

.weekday-time-row strong {
	padding-bottom: 10px;
	font-size: 0.88rem;
	font-weight: 700;
}

.form-actions {
	justify-content: flex-start;
	margin-top: 18px;
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	border: 1px solid transparent;
	border-radius: 0;
	padding: 0 16px;
	font-size: 0.86rem;
	font-weight: 750;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	appearance: none;
}

.button:disabled {
	cursor: wait;
	opacity: 0.5;
}

.button.primary {
	background: var(--primary);
	color: #ffffff;
}

.button.primary:hover {
	background: var(--primary-strong);
}

.button.secondary {
	border-color: var(--line-strong);
	background: var(--surface-strong);
	color: var(--text);
}

.button.secondary:hover {
	border-color: rgba(255, 255, 255, 0.62);
	background: #2e4944;
}

.button.danger {
	border-color: rgba(255, 93, 98, 0.65);
	color: #ffd6d7;
}

.button.compact {
	min-height: 32px;
	padding: 0 10px;
	font-size: 0.78rem;
}

.status-pill {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	margin: 0;
	border: 1px solid currentColor;
	border-radius: 0;
	padding: 0 9px;
	background: transparent;
	font-size: 0.76rem;
	font-weight: 800;
	white-space: nowrap;
}

.status-pill.scheduled {
	color: var(--success);
}

.status-pill.blocked {
	color: var(--danger);
}

.status-pill.paused,
.status-pill.manual-skip {
	color: var(--warning);
}

.status-pill.off,
.status-pill.muted {
	color: var(--off);
}

.today-reason {
	margin: 0 0 12px;
	color: var(--muted);
	line-height: 1.45;
}

.today-clock-status {
	margin: 0 0 8px;
	color: var(--text);
	font-size: 0.95rem;
	font-weight: 760;
	line-height: 1.35;
}

.event-detail,
.active-run {
	display: grid;
	gap: 4px;
	margin: 0 0 16px;
	border-left: 3px solid var(--danger);
	padding: 9px 0 9px 12px;
	background: rgba(255, 93, 98, 0.08);
	color: var(--text);
	font-size: 0.82rem;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.event-detail.empty {
	border-left-color: var(--line);
	background: transparent;
	color: var(--muted);
}

.event-detail span,
.active-run span {
	color: var(--muted);
}

.active-run {
	border-left-color: var(--warning);
	background: rgba(216, 184, 111, 0.08);
}

.reauthorise-panel {
	display: grid;
	gap: 10px;
	margin-top: 16px;
	border-top: 1px solid var(--line);
	padding-top: 14px;
}

.reauthorise-panel strong {
	font-size: 0.92rem;
}

.reauthorise-panel p {
	margin: 4px 0 0;
	color: var(--muted);
	font-size: 0.82rem;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.hidden {
	display: none;
}

.manual-actions {
	flex-wrap: wrap;
}

.days-panel,
.change-log-panel {
	margin-top: 0;
	border-top: 1px solid var(--line);
	padding-top: 20px;
}

.days-heading-meta {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 10px;
	min-width: 0;
	text-align: right;
}

.change-log-panel {
	margin-top: 10px;
	border-top: none;
}

.change-log {
	display: grid;
	gap: 0;
	max-height: 300px;
	overflow-y: auto;
	padding-right: 6px;
}

.change-log-row {
	display: grid;
	gap: 4px;
	border-bottom: 1px solid var(--line);
	padding: 11px 0;
	background: transparent;
}

.change-log-row strong {
	font-size: 0.88rem;
	line-height: 1.35;
}

.change-log-row span {
	color: var(--muted);
	font-size: 0.78rem;
	overflow-wrap: anywhere;
}

.days-list {
	display: grid;
	gap: 0;
	/* border-top: 1px solid var(--line); */
}

.day-row {
	display: grid;
	grid-template-columns: minmax(108px, 0.34fr) minmax(220px, 0.72fr) minmax(260px, 1fr);
	gap: 18px;
	align-items: start;
	border-bottom: 1px solid var(--line);
	border-radius: 0;
	padding: 16px 0;
	background: transparent;
	min-width: 0;
}

.day-date {
	display: grid;
	gap: 5px;
	min-width: 0;
}

.day-date .status-actions {
	margin-top: 6px;
}

.day-date strong,
.run-times strong {
	font-size: 0.95rem;
}

.day-date span,
.run-times span,
.event-list {
	color: var(--muted);
	font-size: 0.84rem;
}

.run-times {
	display: grid;
	gap: 7px;
	min-width: 0;
}

.date-override-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(70px, 1fr));
	gap: 8px;
	align-items: end;
	min-width: 0;
}

.date-override-form label {
	display: grid;
	gap: 4px;
	color: var(--muted);
	font-size: 0.76rem;
	min-width: 0;
}

.date-override-form input {
	min-width: 0;
}

.date-override-form .button {
	width: 100%;
}

.event-list {
	display: grid;
	gap: 5px;
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 1.4;
}

.event-list li {
	overflow-wrap: anywhere;
}

.event-column {
	display: grid;
	gap: 10px;
	min-width: 0;
}

.status-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.run-note {
	color: var(--muted);
	font-size: 0.8rem;
}

@media (max-width: 780px) {
	.app-shell {
		width: 100%;
		padding: 14px 14px 42px;
	}

	.topbar,
	.layout-grid,
	.day-row {
		grid-template-columns: 1fr;
	}

	.topbar {
		display: grid;
	}

	.today-panel {
		order: 1;
	}

	.settings-panel {
		order: 2;
	}

	.topbar-actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
		width: 100%;
	}

	.topbar-actions,
	.section-heading,
	.days-heading-meta {
		align-items: flex-start;
		justify-content: flex-start;
		flex-wrap: wrap;
		text-align: left;
	}

	.time-summary {
		grid-column: 1 / -1;
		max-width: 100%;
		text-align: left;
	}

	.time-summary p:first-child {
		font-size: clamp(1rem, 5.4vw, 1.35rem);
		line-height: 1.1;
	}

	.weekday-time-row {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.weekday-time-row {
		padding: 12px;
		overflow: hidden;
	}

	.weekday-time-row strong {
		grid-column: 1 / -1;
		padding-bottom: 0;
	}

	.date-override-form {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	input[type="time"] {
		min-height: 38px;
		font-size: 1rem;
		text-align: left;
		-webkit-appearance: none;
		appearance: none;
	}

	.day-date {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 4px 8px;
	}

	.day-date span {
		grid-column: 1;
	}

	.day-date .status-actions {
		grid-column: 2;
		grid-row: 1 / span 2;
		justify-content: flex-end;
		margin-top: 0;
	}

	.topbar-actions .button,
	.logout-form,
	.logout-form .button {
		width: 100%;
	}
}