/*
 * Buttons, forms, modals, tabs, toast, login, tables.
 */

.mm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 24px;
	font-size: var(--mm-text-base);
	font-weight: 600;
	border-radius: var(--mm-radius-pill);
	transition: background var(--mm-transition), opacity var(--mm-transition);
}

.mm-btn--primary {
	color: var(--mm-purple-contrast);
	background: var(--mm-purple);
}

.mm-btn--primary:hover { opacity: 0.9; }

.mm-btn--ghost {
	color: var(--mm-text-soft);
	background: var(--mm-card-bg);
	border: 1px solid var(--mm-border-strong);
	box-shadow: var(--mm-shadow-pill);
}

.mm-btn--ghost:hover { background: var(--mm-surface-alt); }

.mm-btn--block { width: 100%; }

.mm-btn--danger {
	color: var(--mm-purple-contrast);
	background: var(--mm-status-expired);
}

.mm-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.mm-btn[hidden] { display: none !important; }

.mm-add-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	color: var(--mm-text);
	border-radius: var(--mm-radius-pill);
}

.mm-add-btn:hover {
	background: var(--mm-card-bg);
	box-shadow: var(--mm-shadow-pill);
}

.mm-add-btn .mm-icon { width: 22px; height: 22px; stroke-width: 2; }

.mm-table-card {
	position: relative;
	background: var(--mm-card-bg);
	border-radius: var(--mm-radius-card);
	box-shadow: var(--mm-shadow-subtle);
}

.mm-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}

.mm-table thead th,
.mm-table tfoot th {
	padding: 14px 12px;
	font-size: var(--mm-text-base);
	font-weight: 700;
	color: var(--mm-text);
	text-align: left;
	white-space: nowrap;
	background: var(--mm-card-bg);
}

.mm-table tbody td {
	padding: 12px;
	font-size: var(--mm-text-base);
	color: var(--mm-text-soft);
	white-space: nowrap;
	vertical-align: middle;
}

.mm-table tbody tr:nth-child(odd) td { background: var(--mm-row-alt); }

.mm-table tbody tr { cursor: pointer; }

.mm-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.mm-modal[hidden] { display: none; }

.mm-modal-backdrop {
	position: absolute;
	inset: 0;
	background: var(--mm-scrim);
	backdrop-filter: blur(2px);
}

.mm-modal--wide .mm-modal-panel { max-width: 920px; }

.mm-modal-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 560px;
	max-height: 90vh;
	background: var(--mm-card-bg);
	border-radius: var(--mm-radius-card);
	box-shadow: var(--mm-shadow-heavy);
	overflow: hidden;
}

.mm-modal--blocking { z-index: 120; }
.mm-modal--blocking .mm-modal-panel { max-width: 520px; }
#mm-modal-legal-terms,
#mm-modal-legal-privacy,
#mm-modal-legal-dpa,
#mm-modal-legal-assist { z-index: 140; }

.mm-legal-check {
	margin: 4px 0 2px;
}

.mm-legal-check.is-locked .mm-login-field.mm-field--check {
	cursor: pointer;
}

.mm-legal-check.is-locked input[type="checkbox"] {
	cursor: pointer;
	opacity: 0.55;
}

.mm-login-form .mm-legal-check .mm-login-field.mm-field--check {
	align-items: flex-start;
}

.mm-login-form .mm-legal-check .mm-login-field input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	padding: 0;
	border-radius: 4px;
	flex: 0 0 18px;
}

.mm-legal-check .mm-legal-actions,
.mm-legal-actions {
	margin: 0 0 8px 28px;
	font-size: var(--mm-text-sm);
	color: var(--mm-text-muted);
}

.mm-legal-link {
	display: inline;
	padding: 0;
	color: var(--mm-purple);
	font: inherit;
	font-weight: 700;
	text-decoration: underline;
	background: none;
	cursor: pointer;
}

.mm-legal-prose {
	font-size: var(--mm-text-base);
	line-height: 1.55;
	color: var(--mm-text);
}

.mm-legal-prose > *:first-child { margin-top: 0; }
.mm-legal-prose p,
.mm-legal-prose ul,
.mm-legal-prose ol { margin: 0 0 0.85em; }
.mm-legal-prose ul,
.mm-legal-prose ol { padding-left: 1.2em; }
.mm-legal-prose h1,
.mm-legal-prose h2,
.mm-legal-prose h3 {
	margin: 1.1em 0 0.4em;
	font-size: var(--mm-text-lg);
	line-height: 1.3;
}
.mm-legal-prose a { color: var(--mm-purple); text-decoration: underline; }
.mm-legal-prose table {
	width: 100%;
	margin: 0 0 1em;
	border-collapse: collapse;
}
.mm-legal-prose th,
.mm-legal-prose td {
	padding: 6px 8px;
	border: 1px solid var(--mm-border);
	text-align: left;
}

.mm-legal-links {
	margin: 0;
	padding-left: 1.1em;
}

.mm-legal-links a { color: var(--mm-purple); }

.mm-modal .mm-legal-actions { margin-left: 0; }

.mm-modal-footer {
	flex: 0 0 auto;
	padding: 14px 26px 18px;
	border-top: 1px solid var(--mm-border);
	background: var(--mm-card-bg);
}

.mm-legal-approve { margin: 0; }

body:has(.mm-modal--blocking:not([hidden])) {
	overflow: hidden;
}

.mm-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mm-gap);
	padding: 22px 26px 16px;
	border-bottom: 1px solid var(--mm-border);
}

.mm-modal-title { font-size: var(--mm-text-lg); }

.mm-modal-header-actions {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
}

.mm-modal-icon-btn,
.mm-modal-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	color: var(--mm-text-muted);
	border-radius: var(--mm-radius-pill);
}

.mm-modal-icon-btn[hidden] { display: none !important; }

.mm-modal-close:hover,
.mm-modal-icon-btn:hover {
	color: var(--mm-text);
	background: var(--mm-surface-sunken);
}

.mm-modal-body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 22px 26px 26px;
}

.mm-form > * + *,
.mm-form-section > * + * { margin-top: var(--mm-gap-sm); }

.mm-field-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--mm-gap-sm) var(--mm-gap);
}

.mm-field,
.mm-login-field {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.mm-field--wide { grid-column: 1 / -1; }

.mm-field[hidden],
.mm-form[hidden],
#mm-tracker-repeat-fields[hidden] { display: none; }

.mm-field--check {
	flex-direction: row;
	align-items: center;
	gap: 10px;
}

.mm-field--check input[type="checkbox"],
.mm-field--check input[type="radio"] {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	padding: 0;
	accent-color: var(--mm-purple);
}

.mm-scope {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 4px;
	padding: 0;
	border: 0;
}

.mm-field--check .mm-field-label { margin: 0; }

.mm-field-label {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--mm-text-sm);
	font-weight: 600;
	color: var(--mm-text-soft);
}

.mm-field input,
.mm-field select,
.mm-field textarea,
.mm-login-field input,
.mm-login-field select {
	width: 100%;
	padding: 10px 14px;
	background: var(--mm-surface-alt);
	border: 1px solid var(--mm-border);
	border-radius: var(--mm-radius-input);
	outline: none;
}

.mm-field input:focus,
.mm-field select:focus,
.mm-field textarea:focus,
.mm-login-field input:focus {
	border-color: var(--mm-purple);
	background: var(--mm-card-bg);
}

.mm-field textarea { resize: vertical; min-height: 62px; }

.mm-iban {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.mm-password-wrap { position: relative; display: block; width: 100%; }
.mm-password-wrap input { padding-right: 44px; }

.mm-password-toggle {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	display: inline-flex;
	width: 32px;
	height: 32px;
	align-items: center;
	justify-content: center;
	color: var(--mm-text-soft);
}

.mm-field-hint {
	position: relative;
	font-size: var(--mm-text-xs);
	color: var(--mm-text-muted);
}

.mm-form-actions {
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: var(--mm-gap-sm);
	margin-top: var(--mm-gap-lg);
	padding-top: var(--mm-gap-sm);
}

.mm-form-actions--wrap { justify-content: space-between; }

.mm-login-header { margin-bottom: 26px; text-align: center; }

.mm-login-brand {
	font-size: 34px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--mm-purple);
}

.mm-login-subtitle {
	margin-top: 6px;
	font-size: var(--mm-text-md);
	color: var(--mm-text-muted);
}

.mm-login-form { display: flex; flex-direction: column; gap: var(--mm-gap-sm); }

.mm-login-field input { padding: 12px 16px; border-radius: var(--mm-radius-pill); }

.mm-login-remember {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--mm-text-base);
	color: var(--mm-text-soft);
	cursor: pointer;
}

.mm-login-error,
.mm-login-success {
	margin-bottom: var(--mm-gap-sm);
	padding: 10px 14px;
	border-radius: var(--mm-radius-input);
}

.mm-login-error { color: var(--mm-status-expired); background: var(--mm-purple-soft); }
.mm-login-success { color: var(--mm-text); background: color-mix(in srgb, var(--mm-status-ready) 35%, var(--mm-card-bg)); }

.mm-toast {
	position: fixed;
	bottom: max(28px, env(safe-area-inset-bottom, 0px));
	left: 50%;
	z-index: 320;
	transform: translateX(-50%);
	max-width: min(480px, calc(100vw - 32px));
	padding: 13px 22px;
	font-size: 16px;
	font-weight: 600;
	color: var(--mm-purple-contrast);
	background: var(--mm-purple);
	border-radius: var(--mm-radius-pill);
	box-shadow: var(--mm-shadow-heavy);
	pointer-events: none;
}

.mm-toast[hidden] { display: none; }
.mm-toast--error { background: var(--mm-status-expired); }

.mm-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 6px;
	margin: 0 0 24px;
	background: var(--mm-surface-alt);
	border-radius: var(--mm-radius-lg);
	border: 1px solid var(--mm-border);
}

.mm-tab {
	padding: 12px 22px;
	font-size: var(--mm-text-base);
	font-weight: 600;
	color: var(--mm-text-soft);
	background: transparent;
	border-radius: var(--mm-radius-md);
}

.mm-tab:hover { color: var(--mm-text); background: var(--mm-card-bg); }

.mm-tab.is-active {
	color: var(--mm-text);
	background: var(--mm-card-bg);
	box-shadow: var(--mm-shadow-subtle);
}

.mm-settings-panel { padding: 4px 2px 8px; }

.mm-settings-panel[hidden] { display: none !important; }

.mm-info {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
	color: var(--mm-purple);
	width: 18px;
	height: 18px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	z-index: 2;
}

.mm-field-label .mm-info,
.mm-field-hint .mm-info {
	position: static;
}

.mm-field:has(.mm-info.is-open),
.mm-field-hint:has(.mm-info.is-open) {
	z-index: 8;
}

.mm-info-tip {
	display: none;
	position: absolute;
	top: auto;
	bottom: calc(100% + 8px);
	left: 0;
	width: min(240px, calc(100vw - 64px));
	padding: 10px 12px;
	font-size: var(--mm-text-sm);
	font-weight: 400;
	line-height: 1.4;
	color: var(--mm-text);
	background: var(--mm-card-bg);
	border: 1px solid var(--mm-border);
	border-radius: 12px;
	box-shadow: var(--mm-shadow-heavy);
	z-index: 40;
	text-align: left;
	white-space: normal;
	pointer-events: none;
}

.mm-field-label .mm-info-tip,
.mm-field-hint .mm-info-tip {
	right: 0;
	width: auto;
}

.mm-modal .mm-field-label .mm-info,
.mm-modal .mm-field-hint .mm-info {
	position: relative;
}

.mm-modal .mm-info-tip,
.mm-modal .mm-field-label .mm-info-tip,
.mm-modal .mm-field-hint .mm-info-tip {
	top: calc(100% + 8px);
	bottom: auto;
	left: 0;
	right: auto;
	width: min(240px, calc(100vw - 80px));
}

.mm-info:hover .mm-info-tip,
.mm-info:focus-visible .mm-info-tip,
.mm-info.is-open .mm-info-tip { display: block; }

.mm-repeat-row {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) 110px 130px 70px 36px;
	gap: 8px;
	align-items: end;
	margin-bottom: 10px;
}

.mm-repeat-row--dated {
	grid-template-columns: minmax(0, 1.4fr) 110px 140px minmax(138px, 1fr) 36px;
}

.mm-repeat-row input[type="date"] {
	min-width: 0;
}

.mm-repeat-next {
	margin: 0;
}

@media (max-width: 782px) {
	.mm-field-grid { grid-template-columns: 1fr; }
	.mm-repeat-row,
	.mm-repeat-row--dated { grid-template-columns: 1fr 1fr; }
}

.mm-login-card--wide { max-width: 560px; }

.mm-plan-pick {
	border: 0;
	margin: 0 0 16px;
	padding: 0;
	display: grid;
	gap: 8px;
}

.mm-choice {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: var(--mm-text-sm);
	color: var(--mm-text-soft);
}

.mm-assist-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 16px;
	padding: 12px 16px;
	background: var(--mm-purple-soft);
	border-radius: var(--mm-radius-card);
	color: var(--mm-text);
	font-weight: 600;
}