@import url("../base/fonts.css");
@import url("../base/tokens.css");
@import url("../base/reset.css");
@import url("../base/base.css");

.edit-page {
	min-height: 100%;
	background: var(--color-page-bg-deep);
	color: var(--color-text);
}

.edit-login {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
}

.edit-login__panel {
	width: min(360px, 100%);
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-panel);
	box-shadow: var(--shadow-dialog);
}

.edit-login__panel h1,
.edit-login__panel p {
	margin: 0;
}

.edit-login__panel label {
	display: flex;
	flex-direction: column;
	gap: 5px;
	font-weight: bold;
}

.edit-login__panel input {
	border: 1px solid var(--color-border-strong);
	border-radius: 6px;
	background: var(--color-panel);
	color: var(--color-text);
	font: inherit;
	padding: 9px 10px;
}

.edit-login__panel button,
.edit-shell__bar button {
	border: 1px solid var(--color-button-border);
	border-radius: var(--radius-md);
	background: var(--color-button);
	color: var(--color-button-text);
	cursor: pointer;
	font: inherit;
	padding: 8px 11px;
}

/* Right-hand group of the top bar: handbook link next to "Abmelden". Needs its own class
   because the bare `.edit-shell__bar div` rule below aligns on the baseline, which sits a
   button and a link at different heights. */
.edit-shell__bar .edit-shell__actions {
	align-items: center;
	gap: 10px;
}

/* Soft/outline: "Abmelden" is the filled action in this bar, and the handbook must not
   compete with it. See docs/design-language.md — one filled main action, the rest soft. */
.edit-shell__handbook {
	border: 1px solid var(--color-button-soft-border);
	border-radius: var(--radius-md);
	background: var(--color-button-soft);
	color: var(--color-button-soft-text);
	font: inherit;
	padding: 8px 11px;
	text-decoration: none;
	white-space: nowrap;
}

.edit-shell__handbook:hover,
.edit-shell__handbook:focus-visible {
	background: var(--color-button-soft-hover);
}

.edit-login__error {
	padding: 9px 10px;
	border: 1px solid var(--color-danger);
	border-radius: 6px;
	background: var(--color-danger-soft);
	color: var(--color-danger-soft-text);
}

.edit-shell {
	height: 100vh;
	display: grid;
	grid-template-rows: auto 1fr;
	background: var(--color-page-bg-deep);
}

.edit-shell__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 8px 12px;
	border-bottom: 1px solid var(--color-accent-brown-soft);
	background: var(--color-panel);
	box-shadow: var(--shadow-panel);
	z-index: 2;
}

.edit-shell__bar div {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.edit-shell__bar span {
	color: var(--color-text-muted);
	font-size: 12px;
}

.edit-shell__bar form {
	margin: 0;
}

.edit-shell__map {
	width: 100%;
	height: 100%;
	border: 0;
}