/* Terminabstimmung – Frontend
 * Übernimmt Schrift und Textfarbe vom Theme. Akzentfarbe über --tmab-accent (Einstellungen).
 */

.tmab {
	--tmab-accent: #1d5f8a;
	--tmab-yes: #1f7a3d;
	--tmab-yes-bg: color-mix(in srgb, #1f7a3d 12%, transparent);
	--tmab-maybe: #9a5b00;
	--tmab-maybe-bg: color-mix(in srgb, #c98a12 16%, transparent);
	--tmab-no: color-mix(in srgb, currentColor 55%, transparent);
	--tmab-line: color-mix(in srgb, currentColor 14%, transparent);
	--tmab-soft: color-mix(in srgb, currentColor 4%, transparent);
	--tmab-muted: color-mix(in srgb, currentColor 62%, transparent);
	--tmab-radius: 10px;
	container-type: inline-size;
	margin: 1.5em 0;
	font-size: 1rem;
	line-height: 1.5;
	text-align: left;
}

.tmab *,
.tmab *::before,
.tmab *::after {
	box-sizing: border-box;
}

.tmab .tmab-icon {
	display: inline-block;
	flex: none;
	vertical-align: -0.2em;
	width: 1.1em;
	height: 1.1em;
}

.tmab .tmab-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.tmab .tmab-muted {
	color: var(--tmab-muted);
	font-weight: normal;
}

/* Kopf ---------------------------------------------------------------- */

.tmab .tmab-title {
	margin: 0 0 0.35em;
	font-size: 1.6em;
	line-height: 1.2;
}

.tmab .tmab-desc {
	margin: 0 0 0.75em;
}

.tmab .tmab-desc > :first-child { margin-top: 0; }
.tmab .tmab-desc > :last-child { margin-bottom: 0; }

.tmab .tmab-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 1.25em;
	margin: 0 0 1.25em;
	padding: 0;
	list-style: none;
	color: var(--tmab-muted);
	font-size: 0.9em;
}

.tmab .tmab-meta li {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin: 0;
}

.tmab .tmab-meta .tmab-meta-closed {
	color: inherit;
	font-weight: 600;
}

/* Hinweise ------------------------------------------------------------ */

.tmab .tmab-notice,
.tmab .tmab-final {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
	margin: 0 0 1.25em;
	padding: 0.8em 1em;
	border-radius: var(--tmab-radius);
	border: 1px solid var(--tmab-line);
	background: var(--tmab-soft);
}

.tmab .tmab-notice .tmab-icon,
.tmab .tmab-final .tmab-icon {
	margin-top: 0.15em;
}

.tmab .tmab-notice--ok {
	border-color: color-mix(in srgb, var(--tmab-yes) 40%, transparent);
	background: var(--tmab-yes-bg);
}

.tmab .tmab-notice--ok .tmab-icon {
	color: var(--tmab-yes);
}

.tmab .tmab-final {
	border: 2px solid var(--tmab-accent);
	background: color-mix(in srgb, var(--tmab-accent) 8%, transparent);
}

.tmab .tmab-final .tmab-icon {
	color: var(--tmab-accent);
	width: 1.4em;
	height: 1.4em;
}

.tmab .tmab-final-label {
	display: block;
	font-size: 0.8em;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tmab-accent);
}

.tmab .tmab-final strong {
	font-size: 1.1em;
}

/* Buttons & Felder ---------------------------------------------------- */

.tmab .tmab-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	min-height: 2.6em;
	margin: 0;
	padding: 0.5em 1.1em;
	border: 1px solid transparent;
	border-radius: 999px;
	font: inherit;
	font-size: 0.95em;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.tmab .tmab-btn:disabled {
	opacity: 0.6;
	cursor: wait;
}

.tmab .tmab-btn--primary {
	background: var(--tmab-accent);
	color: #fff;
}

.tmab .tmab-btn--primary:hover:not(:disabled) {
	background: color-mix(in srgb, var(--tmab-accent) 85%, #000);
}

.tmab .tmab-btn--secondary {
	background: transparent;
	border-color: var(--tmab-accent);
	color: var(--tmab-accent);
}

.tmab .tmab-btn--secondary:hover {
	background: color-mix(in srgb, var(--tmab-accent) 8%, transparent);
}

.tmab .tmab-btn--ghost {
	background: transparent;
	color: inherit;
	border-color: var(--tmab-line);
}

.tmab .tmab-btn--ghost:hover {
	background: var(--tmab-soft);
}

.tmab .tmab-btn:focus-visible,
.tmab .tmab-input:focus-visible,
.tmab .tmab-choice input:focus-visible + span,
.tmab .tmab-none input:focus-visible + span::before {
	outline: 2px solid var(--tmab-accent);
	outline-offset: 2px;
}

.tmab .tmab-input {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0.55em 0.75em;
	border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
	border-radius: 8px;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: 1.4;
}

.tmab textarea.tmab-input {
	resize: vertical;
	min-height: 4.5em;
}

.tmab .tmab-field {
	margin: 0 0 1em;
}

.tmab .tmab-field label {
	display: block;
	margin: 0 0 0.3em;
	font-weight: 600;
	font-size: 0.95em;
}

.tmab .tmab-req {
	color: #b3261e;
}

.tmab .tmab-fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 1em;
}

@container (min-width: 560px) {
	.tmab .tmab-fields {
		grid-template-columns: 1fr 1fr;
	}
}

/* Passwort ------------------------------------------------------------ */

.tmab .tmab-password {
	padding: 1.25em;
	border: 1px solid var(--tmab-line);
	border-radius: var(--tmab-radius);
	background: var(--tmab-soft);
}

.tmab .tmab-password-text {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0 0 0.8em;
}

.tmab .tmab-password-row {
	display: flex;
	gap: 0.6em;
	flex-wrap: wrap;
}

.tmab .tmab-password-row .tmab-input {
	flex: 1 1 14em;
	width: auto;
}

/* Eigene Antwort ------------------------------------------------------ */

.tmab .tmab-own {
	margin: 0 0 1.5em;
	padding: 1em 1.2em;
	border: 1px solid var(--tmab-line);
	border-left: 4px solid var(--tmab-accent);
	border-radius: var(--tmab-radius);
}

.tmab .tmab-own-head {
	margin: 0 0 0.5em;
}

.tmab .tmab-own-list {
	margin: 0 0 0.75em;
	padding: 0;
	list-style: none;
}

.tmab .tmab-own-list li {
	display: flex;
	align-items: baseline;
	gap: 0.6em;
	margin: 0.3em 0;
}

.tmab .tmab-own-none,
.tmab .tmab-own-comment {
	margin: 0 0 0.75em;
}

.tmab .tmab-own-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.tmab .tmab-pill {
	display: inline-block;
	flex: none;
	min-width: 6.2em;
	padding: 0.1em 0.6em;
	border-radius: 999px;
	font-size: 0.8em;
	font-weight: 600;
	text-align: center;
}

.tmab .tmab-pill--v2 { background: var(--tmab-yes-bg); color: var(--tmab-yes); }
.tmab .tmab-pill--v1 { background: var(--tmab-maybe-bg); color: var(--tmab-maybe); }

.tmab .tmab-editlink {
	margin-top: 0.9em;
	font-size: 0.92em;
}

.tmab .tmab-editlink summary {
	cursor: pointer;
	color: var(--tmab-accent);
	font-weight: 600;
}

.tmab .tmab-editlink p {
	margin: 0.5em 0;
}

.tmab .tmab-copy {
	display: flex;
	gap: 0.5em;
}

.tmab .tmab-copy .tmab-input {
	flex: 1;
	min-width: 0;
	font-size: 0.9em;
}

/* Formular & Termine -------------------------------------------------- */

.tmab .tmab-form {
	margin: 0 0 2em;
}

.tmab .tmab-form[hidden] {
	display: none;
}

.tmab .tmab-form-title,
.tmab .tmab-results-title {
	margin: 0 0 0.8em;
	font-size: 1.15em;
	font-weight: 700;
}

.tmab .tmab-options {
	display: flex;
	flex-direction: column;
	gap: 0.6em;
	margin: 0 0 1em;
}

.tmab .tmab-opt {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 0.75em 1em;
	padding: 0.75em;
	border: 1px solid var(--tmab-line);
	border-radius: var(--tmab-radius);
	transition: opacity 0.15s;
}

.tmab .tmab-opt.is-final {
	border: 2px solid var(--tmab-accent);
}

.tmab .tmab-form.is-none .tmab-opt {
	opacity: 0.55;
}

@container (min-width: 560px) {
	.tmab .tmab-opt {
		grid-template-columns: auto 1fr auto;
	}
}

.tmab .tmab-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 3.6em;
	padding: 0.35em 0;
	border-radius: 8px;
	background: color-mix(in srgb, var(--tmab-accent) 10%, transparent);
	color: var(--tmab-accent);
	line-height: 1.1;
	text-align: center;
}

.tmab .tmab-date-wd,
.tmab .tmab-date-m,
.tmab .tmab-date-y {
	font-size: 0.72em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.tmab .tmab-date-d {
	font-size: 1.45em;
	font-weight: 700;
}

.tmab .tmab-opt-when {
	font-weight: 600;
}

.tmab .tmab-opt-note {
	font-size: 0.92em;
}

.tmab .tmab-opt-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em 0.9em;
	margin-top: 0.15em;
	font-size: 0.85em;
	color: var(--tmab-muted);
}

.tmab .tmab-opt-stats:empty {
	display: none;
}

.tmab .tmab-stat {
	display: inline-flex;
	align-items: center;
	gap: 0.15em;
}

.tmab .tmab-stat--yes .tmab-icon { color: var(--tmab-yes); }
.tmab .tmab-stat--maybe .tmab-icon { color: var(--tmab-maybe); }
.tmab .tmab-stat--places.is-full { color: #b3261e; font-weight: 600; }

/* Segment-Auswahl Ja / Wenn nötig / Nein */
.tmab .tmab-choice {
	grid-column: 1 / -1;
	display: flex;
	gap: 0.35em;
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

@container (min-width: 560px) {
	.tmab .tmab-choice {
		grid-column: auto;
	}
}

.tmab .tmab-choice label {
	flex: 1 1 0;
	position: relative;
	margin: 0;
	cursor: pointer;
}

.tmab .tmab-choice input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}

.tmab .tmab-choice span {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.3em;
	min-height: 2.5em;
	padding: 0.35em 0.8em;
	border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
	border-radius: 999px;
	font-size: 0.9em;
	font-weight: 600;
	white-space: nowrap;
	transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}

.tmab .tmab-choice .tmab-icon {
	width: 1em;
	height: 1em;
}

.tmab .tmab-choice label:hover span {
	background: var(--tmab-soft);
}

.tmab .tmab-choice-yes input:checked + span {
	background: var(--tmab-yes);
	border-color: var(--tmab-yes);
	color: #fff;
}

.tmab .tmab-choice-maybe input:checked + span {
	background: #c98a12;
	border-color: #c98a12;
	color: #fff;
}

.tmab .tmab-choice-no input:checked + span {
	background: #5f6670;
	border-color: #5f6670;
	color: #fff;
}

.tmab .tmab-choice label.is-disabled {
	cursor: not-allowed;
	opacity: 0.4;
}

/* „Ich kann an keinem Termin“ */
.tmab .tmab-none {
	display: inline-flex;
	align-items: center;
	margin: 0 0 1.25em;
	cursor: pointer;
	font-weight: 600;
}

.tmab .tmab-none input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.tmab .tmab-none span {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
}

.tmab .tmab-none span::before {
	content: "";
	display: inline-block;
	width: 1.15em;
	height: 1.15em;
	border: 2px solid color-mix(in srgb, currentColor 40%, transparent);
	border-radius: 4px;
}

.tmab .tmab-none input:checked + span::before {
	border-color: var(--tmab-accent);
	background: var(--tmab-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 85% no-repeat;
}

.tmab .tmab-errors ul {
	margin: 0 0 1em;
	padding: 0.7em 1em 0.7em 2em;
	border-radius: var(--tmab-radius);
	background: color-mix(in srgb, #b3261e 10%, transparent);
	color: #b3261e;
	font-weight: 600;
}

.tmab .tmab-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
}

/* Ergebnis-Tabelle ---------------------------------------------------- */

.tmab .tmab-results {
	margin-top: 0.5em;
}

.tmab .tmab-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--tmab-line);
	border-radius: var(--tmab-radius);
	-webkit-overflow-scrolling: touch;
}

.tmab .tmab-table {
	width: 100%;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 0.92em;
}

.tmab .tmab-table th,
.tmab .tmab-table td {
	padding: 0.55em 0.7em;
	border: 0;
	border-bottom: 1px solid var(--tmab-line);
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
}

.tmab .tmab-table tbody tr:last-child > * {
	border-bottom-color: color-mix(in srgb, currentColor 30%, transparent);
}

.tmab .tmab-table tfoot > tr > * {
	border-bottom: 0;
}

.tmab .tmab-table thead th {
	font-weight: 600;
	line-height: 1.25;
}

.tmab .tmab-table thead th span {
	display: block;
}

.tmab .tmab-th-wd,
.tmab .tmab-th-t {
	font-size: 0.85em;
	font-weight: normal;
	color: var(--tmab-muted);
}

.tmab .tmab-table .tmab-col-name {
	position: sticky;
	left: 0;
	z-index: 1;
	min-width: 9em;
	max-width: 14em;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: left;
	font-weight: 600;
	background: var(--tmab-bg, var(--wp--preset--color--base, #fff));
}

.tmab .tmab-has-cmt {
	color: var(--tmab-muted);
	margin-left: 0.2em;
}

.tmab .tmab-comments-title {
	margin-top: 1.5em;
}

.tmab .tmab-comments {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tmab .tmab-comments li {
	margin: 0 0 0.6em;
	padding: 0.6em 0.9em;
	border-radius: var(--tmab-radius);
	background: var(--tmab-soft);
}

.tmab .tmab-comments li.is-own {
	background: color-mix(in srgb, var(--tmab-accent) 8%, transparent);
}

.tmab .tmab-comments strong {
	display: block;
	font-size: 0.9em;
}

.tmab .tmab-table tr.is-own > * {
	background-color: color-mix(in srgb, var(--tmab-accent) 7%, var(--tmab-bg, var(--wp--preset--color--base, #fff)));
}

.tmab .tmab-table .is-best {
	background-color: var(--tmab-yes-bg);
}

.tmab .tmab-table th.is-final {
	background: var(--tmab-accent);
	color: #fff;
}

.tmab .tmab-table th.is-final span {
	color: inherit;
}

.tmab .tmab-cell--v2 { color: var(--tmab-yes); }
.tmab .tmab-cell--v1 { color: var(--tmab-maybe); }
.tmab .tmab-cell--v0 { color: var(--tmab-no); }

.tmab td.tmab-cell--v2 { background-color: var(--tmab-yes-bg); }
.tmab td.tmab-cell--v1 { background-color: var(--tmab-maybe-bg); }

.tmab .tmab-sum strong {
	font-size: 1.1em;
}

.tmab .tmab-legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3em 0.5em;
	margin: 0.6em 0 0;
	font-size: 0.85em;
	color: var(--tmab-muted);
}

.tmab .tmab-legend > span:not(.tmab-muted) {
	margin-left: 0.6em;
	font-weight: 700;
}

.tmab .tmab-legend > span:first-child {
	margin-left: 0;
}

.tmab .tmab-legend .tmab-muted {
	margin-left: 0;
}