/*
 * GMA Scadenziario — Rateizzazioni module (STEP 6D-C2-A).
 *
 * Scoped under .gma-scd-app and built only from the shared tokens and the
 * components already used by Tasse and Multe (cards, table, form grid, data
 * list, pagination, buttons, badges, notices). Layout adapts through the app
 * container (gma-scd), like the shell.
 */

/* States ----------------------------------------------------------------- */

.gma-scd-app .gma-scd-badge--info {
	--gma-scd-tone: var(--gma-scd-color-info);
}

/* Fields rejected by the server are outlined, not only described. */
.gma-scd-app .gma-scd-plan-wizard [aria-invalid="true"],
.gma-scd-app .gma-scd-plan-change [aria-invalid="true"] {
	border-color: var(--gma-scd-color-danger);
}

/* Groups and notices toggled by the script: the hidden attribute must win over the display of the shared components. */
.gma-scd-app .gma-scd-plan-wizard [hidden],
.gma-scd-app .gma-scd-plan-preview [hidden],
.gma-scd-app .gma-scd-plan-change [hidden] {
	display: none;
}

/* A form waiting for the server: visibly busy, not clickable twice. */
.gma-scd-app [data-gma-scd-busy-form].is-busy .gma-scd-btn {
	cursor: progress;
	opacity: 0.72;
}

/* Filters ---------------------------------------------------------------- */

.gma-scd-app .gma-scd-plan-filters {
	display: grid;
	grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr));
	gap: var(--gma-scd-spacing-3);
	align-items: end;
	margin-bottom: var(--gma-scd-spacing-4);
}

.gma-scd-app .gma-scd-plan-filters__actions {
	display: flex;
	flex-wrap: wrap;
	grid-column: 1 / -1;
	gap: var(--gma-scd-spacing-2);
}

/* List ------------------------------------------------------------------- */

.gma-scd-app .gma-scd-plan-list {
	padding: 0;
	overflow: hidden;
}

.gma-scd-app .gma-scd-plan-list .gma-scd-inline-empty {
	padding: var(--gma-scd-spacing-8) var(--gma-scd-spacing-4);
}

.gma-scd-app .gma-scd-plan-list .gma-scd-table__actions .gma-scd-btn {
	white-space: nowrap;
}

/* Detail ----------------------------------------------------------------- */

.gma-scd-app .gma-scd-plan-kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--gma-scd-spacing-4);
	margin-bottom: var(--gma-scd-spacing-4);
}

.gma-scd-app .gma-scd-plan-kpi {
	display: flex;
	flex-direction: column;
	gap: var(--gma-scd-spacing-1);
}

.gma-scd-app .gma-scd-plan-kpi span {
	color: var(--gma-scd-text-muted);
	font-size: var(--gma-scd-font-size-sm);
	font-weight: 600;
}

.gma-scd-app .gma-scd-plan-kpi strong {
	color: var(--gma-scd-text);
	font-size: var(--gma-scd-font-size-xl);
	font-variant-numeric: tabular-nums;
}

.gma-scd-app .gma-scd-plan-detail {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gma-scd-spacing-4);
	margin-bottom: var(--gma-scd-spacing-4);
}

.gma-scd-app .gma-scd-plan-detail h2,
.gma-scd-app .gma-scd-plan-installments h2,
.gma-scd-app .gma-scd-plan-preview h2 {
	margin: 0 0 var(--gma-scd-spacing-3);
}

.gma-scd-app .gma-scd-plan-cancelled {
	margin: 0 0 var(--gma-scd-spacing-4);
}

.gma-scd-app .gma-scd-plan-cancelled p {
	margin: 0;
}

.gma-scd-app .gma-scd-plan-cancelled__reason {
	overflow-wrap: anywhere;
	white-space: pre-line;
}

.gma-scd-app .gma-scd-plan-installments {
	margin-bottom: var(--gma-scd-spacing-4);
}

/* State badges of the plan, its installments and payments: the success tone darkened to WCAG AA (4.5:1) on its tinted fill, as the Dashboard ones. */
.gma-scd-app .gma-scd-plan-installments .gma-scd-badge--success,
.gma-scd-app .gma-scd-plan-payments .gma-scd-badge--success,
.gma-scd-app [data-gma-scd-plan-status].gma-scd-badge--success {
	--gma-scd-tone: color-mix(in srgb, var(--gma-scd-color-success) 80%, var(--gma-scd-text));
}

/* Payments (STEP 6D-D2): every movement stays listed; a voided one is muted, with when, who and (managers) why. */
.gma-scd-app .gma-scd-plan-payments {
	margin-bottom: var(--gma-scd-spacing-4);
}

.gma-scd-app .gma-scd-plan-payments h2 {
	margin: 0 0 var(--gma-scd-spacing-3);
}

.gma-scd-app .gma-scd-plan-payments__voided td {
	color: var(--gma-scd-text-muted);
}

/* The state of a voided payment: its badge above when and why, never squeezed by the text (cards on phones). */
.gma-scd-app .gma-scd-plan-payments__state {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.gma-scd-app .gma-scd-plan-payments__state .gma-scd-badge {
	flex: none;
	align-self: flex-start;
}

@container gma-scd (max-width: 849px) {
	.gma-scd-app .gma-scd-plan-payments__state {
		align-items: flex-end;
		text-align: right;
	}

	.gma-scd-app .gma-scd-plan-payments__state .gma-scd-badge {
		align-self: flex-end;
	}
}

.gma-scd-app .gma-scd-plan-payments__void,
.gma-scd-app .gma-scd-plan-payments__reason {
	display: block;
	margin-top: 2px;
	color: var(--gma-scd-text-muted);
	font-size: var(--gma-scd-font-size-xs);
	overflow-wrap: anywhere;
}

/* Plan history (STEP 6D-C4-C): the shared activity rows, in a card of its own. */
.gma-scd-app .gma-scd-plan-history {
	margin-bottom: var(--gma-scd-spacing-4);
}

/* The title keeps its icon beside it at any width; the "Vedi tutto" button wraps below. */
.gma-scd-app .gma-scd-plan-history .gma-scd-card__header > div {
	flex: 1 1 0;
	min-width: 0;
}

/* Plan actions and change forms (STEP 6D-C2-B) ------------------------------ */

.gma-scd-app .gma-scd-plan-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gma-scd-spacing-2);
	margin: 0 0 var(--gma-scd-spacing-4);
}

.gma-scd-app .gma-scd-plan-schedule {
	margin-bottom: var(--gma-scd-spacing-4);
}

.gma-scd-app .gma-scd-plan-schedule h2 {
	margin: 0 0 var(--gma-scd-spacing-3);
}

.gma-scd-app .gma-scd-plan-schedule .gma-scd-input {
	min-width: 140px;
}

/* Locked fields: read-only, visibly different, explained next to the state. */
.gma-scd-app .gma-scd-plan-schedule .gma-scd-input.is-locked {
	color: var(--gma-scd-text-muted);
	background: var(--gma-scd-surface-muted);
	border-style: dashed;
	cursor: not-allowed;
}

.gma-scd-app .gma-scd-plan-lock {
	display: block;
	flex: 1 0 100%;
	margin-top: var(--gma-scd-spacing-1);
	color: var(--gma-scd-text-muted);
	font-size: var(--gma-scd-font-size-xs);
}

/* Stacked rows: the state keeps its badge size, the lock note goes on its own line. */
.gma-scd-app .gma-scd-plan-schedule td:has(> .gma-scd-plan-lock) {
	flex-wrap: wrap;
}

.gma-scd-app .gma-scd-plan-schedule td > .gma-scd-badge {
	align-self: flex-start;
}

.gma-scd-app .gma-scd-plan-danger {
	border-color: var(--gma-scd-color-danger);
}

.gma-scd-app .gma-scd-plan-danger .gma-scd-data-list {
	margin: var(--gma-scd-spacing-3) 0 var(--gma-scd-spacing-4);
}

.gma-scd-app .gma-scd-plan-danger .gma-scd-field + .gma-scd-field {
	margin-top: var(--gma-scd-spacing-3);
}

/* A button waiting for the confirmation must look unavailable, not only be it. */
.gma-scd-app .gma-scd-plan-change .gma-scd-btn:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.gma-scd-app .gma-scd-plan-danger h2 {
	display: flex;
	align-items: center;
	gap: var(--gma-scd-spacing-2);
	color: var(--gma-scd-color-danger);
}

/* Conflict: the typed values next to the current data, nothing to save from here. */
.gma-scd-app .gma-scd-plan-conflict {
	border-color: var(--gma-scd-color-warning-strong);
}

.gma-scd-app .gma-scd-plan-conflict h2 {
	display: flex;
	align-items: center;
	gap: var(--gma-scd-spacing-2);
	margin: 0 0 var(--gma-scd-spacing-2);
	color: var(--gma-scd-color-warning-strong);
}

.gma-scd-app .gma-scd-plan-conflict__table {
	margin: var(--gma-scd-spacing-3) 0;
}

.gma-scd-app .gma-scd-plan-conflict__value {
	overflow-wrap: break-word;
	white-space: pre-line;
}

.gma-scd-app .gma-scd-plan-conflict .is-different .gma-scd-plan-conflict__value {
	font-weight: 650;
}

/* Wizard ----------------------------------------------------------------- */

.gma-scd-app .gma-scd-plan-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gma-scd-spacing-2);
	margin: 0 0 var(--gma-scd-spacing-4);
	padding: 0;
	list-style: none;
}

.gma-scd-app .gma-scd-plan-steps__item {
	display: flex;
	align-items: center;
	gap: var(--gma-scd-spacing-2);
	min-height: var(--gma-scd-touch-target);
	padding: var(--gma-scd-spacing-2) var(--gma-scd-spacing-3);
	color: var(--gma-scd-text-muted);
	font-size: var(--gma-scd-font-size-sm);
	font-weight: 600;
	background: var(--gma-scd-surface);
	border: 1px solid var(--gma-scd-border-subtle);
	border-radius: var(--gma-scd-radius-md);
}

.gma-scd-app .gma-scd-plan-steps__number {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	color: var(--gma-scd-text-muted);
	font-variant-numeric: tabular-nums;
	background: var(--gma-scd-surface-muted);
	border-radius: var(--gma-scd-radius-full);
}

.gma-scd-app .gma-scd-plan-steps__item.is-current {
	color: var(--gma-scd-text);
	border-color: var(--gma-scd-color-primary);
	box-shadow: var(--gma-scd-shadow-xs);
}

.gma-scd-app .gma-scd-plan-steps__item.is-current .gma-scd-plan-steps__number {
	color: var(--gma-scd-on-accent);
	background: var(--gma-scd-color-primary);
}

.gma-scd-app .gma-scd-plan-steps__item.is-done .gma-scd-plan-steps__number {
	color: var(--gma-scd-on-accent);
	background: var(--gma-scd-color-success);
}

.gma-scd-app .gma-scd-plan-modes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gma-scd-spacing-3);
	margin: 0 0 var(--gma-scd-spacing-4);
	padding: 0;
	border: 0;
}

.gma-scd-app .gma-scd-plan-modes legend {
	margin-bottom: var(--gma-scd-spacing-2);
	padding: 0;
	color: var(--gma-scd-text);
	font-size: var(--gma-scd-font-size-md);
	font-weight: 650;
}

.gma-scd-app .gma-scd-plan-mode {
	display: flex;
	align-items: flex-start;
	gap: var(--gma-scd-spacing-2);
	padding: var(--gma-scd-spacing-3);
	cursor: pointer;
	background: var(--gma-scd-surface);
	border: 1px solid var(--gma-scd-border);
	border-radius: var(--gma-scd-radius-md);
	transition: border-color var(--gma-scd-transition);
}

.gma-scd-app .gma-scd-plan-mode:has(input:checked) {
	border-color: var(--gma-scd-color-primary);
	box-shadow: var(--gma-scd-shadow-xs);
}

.gma-scd-app .gma-scd-plan-mode input {
	margin-top: 3px;
}

.gma-scd-app .gma-scd-plan-mode .gma-scd-field__hint {
	display: block;
	margin-top: var(--gma-scd-spacing-1);
}

/* "Collega a" and the original debt (STEP 6D-F2) ------------------------- */

.gma-scd-app .gma-scd-plan-source {
	display: grid;
	gap: var(--gma-scd-spacing-3);
	min-width: 0;
	margin: 0 0 var(--gma-scd-spacing-5);
	padding: 0 0 var(--gma-scd-spacing-5);
	border: 0;
	border-bottom: 1px solid var(--gma-scd-border-subtle);
}

.gma-scd-app .gma-scd-plan-source legend,
.gma-scd-app .gma-scd-plan-basis legend {
	margin-bottom: var(--gma-scd-spacing-2);
	padding: 0;
	color: var(--gma-scd-text);
	font-size: var(--gma-scd-font-size-md);
	font-weight: 650;
}

.gma-scd-app .gma-scd-plan-source__choices {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gma-scd-spacing-3);
}

.gma-scd-app .gma-scd-plan-source__pick,
.gma-scd-app .gma-scd-plan-source__pick .gma-scd-select {
	min-width: 0;
	max-width: 100%;
}

.gma-scd-app .gma-scd-plan-basis {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gma-scd-spacing-2) var(--gma-scd-spacing-5);
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.gma-scd-app .gma-scd-plan-basis legend,
.gma-scd-app .gma-scd-plan-basis > .gma-scd-field__hint,
.gma-scd-app .gma-scd-plan-basis > .gma-scd-field__error {
	flex: 1 0 100%;
}

.gma-scd-app .gma-scd-plan-basis .gma-scd-check:has(input:disabled) {
	opacity: 0.6;
}

.gma-scd-app .gma-scd-plan-source__note {
	margin: 0;
}

.gma-scd-app .gma-scd-plan-origin {
	margin-bottom: var(--gma-scd-spacing-4);
}

.gma-scd-app .gma-scd-plan-origin h2 {
	margin: 0;
}

.gma-scd-app .gma-scd-plan-origin .gma-scd-notice {
	margin: var(--gma-scd-spacing-4) 0 0;
}

.gma-scd-app .gma-scd-plan-origin__link {
	margin: var(--gma-scd-spacing-4) 0 0;
}

.gma-scd-app .gma-scd-plan-detail + .gma-scd-plan-origin {
	margin-top: var(--gma-scd-spacing-4);
}

.gma-scd-app .gma-scd-plan-preview {
	margin-top: var(--gma-scd-spacing-4);
}

.gma-scd-app .gma-scd-plan-preview__table {
	max-height: 420px;
	margin: var(--gma-scd-spacing-4) 0;
	overflow: auto;
	border: 1px solid var(--gma-scd-border-subtle);
	border-radius: var(--gma-scd-radius-md);
}

.gma-scd-app .gma-scd-plan-confirm {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--gma-scd-spacing-3);
}

.gma-scd-app .gma-scd-plan-confirm .gma-scd-field__hint {
	margin: 0;
}

/* Compact layout --------------------------------------------------------- */

@container gma-scd (max-width: 1049px) {
	.gma-scd-app .gma-scd-plan-filters {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gma-scd-app .gma-scd-plan-filters__search {
		grid-column: 1 / -1;
	}

	.gma-scd-app .gma-scd-plan-detail {
		grid-template-columns: minmax(0, 1fr);
	}
}

@container gma-scd (max-width: 699px) {
	.gma-scd-app .gma-scd-plan-filters,
	.gma-scd-app .gma-scd-plan-modes,
	.gma-scd-app .gma-scd-plan-source__choices {
		grid-template-columns: minmax(0, 1fr);
	}

	.gma-scd-app .gma-scd-plan-steps {
		grid-template-columns: minmax(0, 1fr);
	}

	.gma-scd-app .gma-scd-plan-steps__item:not(.is-current) .gma-scd-plan-steps__label {
		color: var(--gma-scd-text-muted);
	}

	.gma-scd-app .gma-scd-plan-filters__actions .gma-scd-btn,
	.gma-scd-app .gma-scd-plan-confirm .gma-scd-btn {
		flex: 1 1 auto;
	}

	.gma-scd-app .gma-scd-plan-preview__table {
		max-height: none;
	}

	.gma-scd-app .gma-scd-plan-actions .gma-scd-btn {
		flex: 1 1 auto;
	}

	.gma-scd-app .gma-scd-plan-schedule .gma-scd-input {
		min-width: 0;
		width: 100%;
	}

	.gma-scd-app .gma-scd-plan-conflict__actions form,
	.gma-scd-app .gma-scd-plan-conflict__actions .gma-scd-btn {
		width: 100%;
	}

	.gma-scd-app .gma-scd-plan-conflict__actions .gma-scd-btn {
		height: auto;
		min-height: var(--gma-scd-touch-target);
		white-space: normal;
	}
}

/* Documents and receipts (STEP 6D-E2): the list of the plan's files and the upload form, in the shared card, table and field styles. */
.gma-scd-app .gma-scd-plan-documents {
	margin-bottom: var(--gma-scd-spacing-4);
	scroll-margin-top: var(--gma-scd-spacing-4);
}

.gma-scd-app .gma-scd-plan-documents h2 {
	margin: 0 0 var(--gma-scd-spacing-3);
}

.gma-scd-app .gma-scd-plan-documents h3 {
	margin: 0 0 var(--gma-scd-spacing-3);
	font-size: var(--gma-scd-font-size-md);
}

/* Original names can be long and unbroken: they wrap, never widen the page. */
.gma-scd-app .gma-scd-plan-documents__name {
	overflow-wrap: anywhere;
	word-break: break-word;
}

.gma-scd-app .gma-scd-plan-documents__owner {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gma-scd-spacing-1) var(--gma-scd-spacing-2);
	min-width: 0;
}

.gma-scd-app .gma-scd-plan-documents__owner .gma-scd-badge {
	flex: none;
}

.gma-scd-app .gma-scd-plan-documents__form,
.gma-scd-app .gma-scd-plan-documents__full {
	margin-top: var(--gma-scd-spacing-4);
	padding-top: var(--gma-scd-spacing-4);
	border-top: 1px solid var(--gma-scd-border);
}

.gma-scd-app .gma-scd-plan-documents__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gma-scd-spacing-3) var(--gma-scd-spacing-4);
}

.gma-scd-app .gma-scd-plan-documents__fields .gma-scd-input {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

/* A file that cannot be read: its download looks unavailable, not just inert (muted text, dashed outline, no fill). */
.gma-scd-app .gma-scd-plan-documents .gma-scd-btn:disabled {
	border: 1px dashed var(--gma-scd-border);
	background: var(--gma-scd-surface);
	color: var(--gma-scd-text-muted);
	box-shadow: none;
	cursor: not-allowed;
}

/* Two row actions (pay and attach) wrap instead of widening the installment and payment tables. */
.gma-scd-app .gma-scd-plan-installments .gma-scd-table__actions,
.gma-scd-app .gma-scd-plan-payments .gma-scd-table__actions,
.gma-scd-app .gma-scd-plan-documents .gma-scd-table__actions {
	white-space: normal;
}

.gma-scd-app .gma-scd-plan-installments .gma-scd-table__actions .gma-scd-btn,
.gma-scd-app .gma-scd-plan-payments .gma-scd-table__actions .gma-scd-btn,
.gma-scd-app .gma-scd-plan-documents .gma-scd-table__actions .gma-scd-btn {
	margin: 2px 0 2px var(--gma-scd-spacing-1);
}

@container gma-scd (max-width: 849px) {
	.gma-scd-app .gma-scd-plan-documents__fields {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Cards: the row actions line up on the right, evenly spaced, also when they wrap. */
	.gma-scd-app .gma-scd-plan-installments .gma-scd-table__actions,
	.gma-scd-app .gma-scd-plan-payments .gma-scd-table__actions,
	.gma-scd-app .gma-scd-plan-documents .gma-scd-table__actions {
		justify-content: flex-end;
		gap: var(--gma-scd-spacing-2);
	}

	.gma-scd-app .gma-scd-plan-installments .gma-scd-table__actions .gma-scd-btn,
	.gma-scd-app .gma-scd-plan-payments .gma-scd-table__actions .gma-scd-btn,
	.gma-scd-app .gma-scd-plan-documents .gma-scd-table__actions .gma-scd-btn {
		margin: 0;
	}

	.gma-scd-app .gma-scd-plan-documents__owner {
		justify-content: flex-end;
		text-align: right;
	}

	.gma-scd-app .gma-scd-plan-documents__name {
		text-align: right;
	}
}