/*
 * GMA Scadenziario — Tasse module and Settings → Tasse.
 *
 * Scoped under .gma-scd-app and built only from the shared tokens and
 * components (cards, buttons, badges, inputs). Layout adapts through the app
 * container (gma-scd), like the shell.
 */

/* Page header with a primary action ------------------------------------- */

.gma-scd-app .gma-scd-page-header .gma-scd-eyebrow a {
	color: inherit;
	text-decoration: none;
}

.gma-scd-app .gma-scd-muted {
	margin: 0 0 var(--gma-scd-spacing-3);
	color: var(--gma-scd-text-muted);
	font-size: var(--gma-scd-font-size-sm);
}

/* Form fields ------------------------------------------------------------ */

.gma-scd-app .gma-scd-field {
	display: flex;
	flex-direction: column;
	gap: var(--gma-scd-spacing-1);
	min-width: 0;
}

.gma-scd-app .gma-scd-field > label {
	color: var(--gma-scd-text);
	font-size: var(--gma-scd-font-size-sm);
	font-weight: 600;
}

/* Form selects fill their field; the shell caps .gma-scd-select for the toolbar. */
.gma-scd-app .gma-scd-field .gma-scd-select {
	width: 100%;
	max-width: none;
	min-height: var(--gma-scd-touch-target);
}

.gma-scd-app .gma-scd-field__error {
	margin: 0;
	color: var(--gma-scd-color-danger);
	font-size: var(--gma-scd-font-size-xs);
	font-weight: 600;
}

.gma-scd-app .gma-scd-field__hint {
	margin: 0;
	color: var(--gma-scd-text-muted);
	font-size: var(--gma-scd-font-size-xs);
}

.gma-scd-app .gma-scd-field__file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gma-scd-spacing-2);
	margin: 0;
	font-size: var(--gma-scd-font-size-sm);
	overflow-wrap: anywhere;
}

/* STEP 8: the document name is plain text; «Visualizza» next to it opens (and downloads) the file. */
.gma-scd-app .gma-scd-file-name {
	overflow-wrap: anywhere;
}

.gma-scd-app .gma-scd-field__file a,
.gma-scd-app .gma-scd-data-list a {
	color: var(--gma-scd-color-primary);
	font-weight: 600;
}

.gma-scd-app .gma-scd-input--file {
	padding: var(--gma-scd-spacing-2);
}

.gma-scd-app .gma-scd-textarea {
	min-height: 104px;
	padding: var(--gma-scd-spacing-3);
	line-height: 1.5;
	resize: vertical;
}

.gma-scd-app .gma-scd-check,
.gma-scd-app .gma-scd-switch {
	display: inline-flex;
	align-items: center;
	gap: var(--gma-scd-spacing-2);
	min-height: var(--gma-scd-touch-target);
	color: var(--gma-scd-text);
	font-size: var(--gma-scd-font-size-sm);
	font-weight: 600;
	cursor: pointer;
}

.gma-scd-app .gma-scd-switch input,
.gma-scd-app .gma-scd-check input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--gma-scd-color-primary);
}

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

.gma-scd-app .gma-scd-form-grid[hidden] {
	display: none;
}

.gma-scd-app .gma-scd-field--wide {
	grid-column: 1 / -1;
}

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

.gma-scd-app .gma-scd-form-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--gma-scd-spacing-3);
	margin-top: var(--gma-scd-spacing-4);
}

.gma-scd-app .gma-scd-form-actions form {
	margin: 0;
}

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

.gma-scd-app .gma-scd-tax-filters {
	display: grid;
	grid-template-columns: 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-tax-filters .gma-scd-field--wide {
	grid-column: span 2;
}

.gma-scd-app .gma-scd-tax-filters__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gma-scd-spacing-2);
}

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

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

.gma-scd-app .gma-scd-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: var(--gma-scd-font-size-base);
}

.gma-scd-app .gma-scd-table th,
.gma-scd-app .gma-scd-table td {
	padding: var(--gma-scd-spacing-3) var(--gma-scd-spacing-4);
	color: var(--gma-scd-text);
	text-align: left;
	vertical-align: middle;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--gma-scd-border-subtle);
}

.gma-scd-app .gma-scd-table th {
	color: var(--gma-scd-text-muted);
	font-size: var(--gma-scd-font-size-xs);
	font-weight: 650;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	background: var(--gma-scd-surface-muted);
}

.gma-scd-app .gma-scd-table .gma-scd-table__amount {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.gma-scd-app .gma-scd-table__link {
	color: var(--gma-scd-color-primary);
	font-weight: 600;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.gma-scd-app .gma-scd-table__link:hover {
	text-decoration: underline;
}

/* Row actions: compact shared buttons, kept on one line while they fit. */
.gma-scd-app .gma-scd-table .gma-scd-table__actions {
	text-align: right;
	white-space: nowrap;
}

.gma-scd-app .gma-scd-table-actions {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--gma-scd-spacing-2);
}

.gma-scd-app .gma-scd-table-actions form {
	margin: 0;
}

.gma-scd-app .gma-scd-table-actions .gma-scd-btn {
	padding: 0 12px;
	font-size: var(--gma-scd-font-size-sm);
}

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

/* Pagination ------------------------------------------------------------- */

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

.gma-scd-app .gma-scd-pagination__status {
	color: var(--gma-scd-text-muted);
	font-size: var(--gma-scd-font-size-sm);
}

.gma-scd-app .gma-scd-pagination__links {
	display: flex;
	gap: var(--gma-scd-spacing-2);
}

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

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

/* Settled through a plan (STEP 6D-F2): the success tone, darkened with the text token to stay above WCAG AA on its tint. */
.gma-scd-app .gma-scd-badge--settled {
	--gma-scd-tone: color-mix(in srgb, var(--gma-scd-color-success) 75%, var(--gma-scd-text));
}

/* The Rateizzazione paying a tax (STEP 6D-F2): its own full row. */
.gma-scd-app .gma-scd-tax-detail .gma-scd-source-link {
	grid-column: 1 / -1;
}

.gma-scd-app .gma-scd-source-link h2 {
	margin: 0;
}

.gma-scd-app .gma-scd-source-link .gma-scd-field__hint {
	margin: var(--gma-scd-spacing-4) 0 0;
}

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

/* A field fixed by a plan (debt fields of a linked tax or fine, principal of a linked plan): readable, clearly not editable. */
.gma-scd-app .gma-scd-input[readonly],
.gma-scd-app .gma-scd-select:disabled {
	color: var(--gma-scd-text);
	cursor: default;
	background: var(--gma-scd-surface-muted);
	border-style: dashed;
	opacity: 1;
}

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

.gma-scd-app .gma-scd-data-list dt {
	margin: 0;
	color: var(--gma-scd-text-muted);
	font-size: var(--gma-scd-font-size-xs);
	font-weight: 600;
}

.gma-scd-app .gma-scd-data-list dd {
	margin: var(--gma-scd-spacing-1) 0 0;
	color: var(--gma-scd-text);
	font-size: var(--gma-scd-font-size-md);
	overflow-wrap: anywhere;
}

.gma-scd-app .gma-scd-data-list__wide {
	grid-column: 1 / -1;
}

.gma-scd-app .gma-scd-data-list__notes {
	white-space: pre-line;
}

/* Settings → Tasse ------------------------------------------------------- */

.gma-scd-app .gma-scd-settings-section {
	margin-top: var(--gma-scd-spacing-6);
}

.gma-scd-app .gma-scd-settings-section__title {
	margin: 0 0 var(--gma-scd-spacing-3);
	color: var(--gma-scd-text);
	font-size: var(--gma-scd-font-size-lg);
	font-weight: 700;
}

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

.gma-scd-app .gma-scd-settings-grid h3 {
	margin: 0 0 var(--gma-scd-spacing-1);
	color: var(--gma-scd-text);
	font-size: var(--gma-scd-font-size-md);
	font-weight: 700;
}

.gma-scd-app .gma-scd-config-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gma-scd-app .gma-scd-config-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gma-scd-spacing-2);
	padding: var(--gma-scd-spacing-2) 0;
	border-bottom: 1px solid var(--gma-scd-border-subtle);
}

.gma-scd-app .gma-scd-config-row form {
	margin: 0;
}

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

.gma-scd-app .gma-scd-config-row__form .gma-scd-input {
	flex: 1 1 160px;
	width: auto;
	min-width: 0;
}

.gma-scd-app .gma-scd-config-row__form .gma-scd-input--order {
	flex: 0 0 88px;
}

.gma-scd-app .gma-scd-config-add {
	margin-top: var(--gma-scd-spacing-3);
}

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

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

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

	/* Narrower table: row actions stack with equal widths instead of wrapping unevenly. */
	.gma-scd-app .gma-scd-table-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.gma-scd-app .gma-scd-table-actions form .gma-scd-btn {
		width: 100%;
	}
}

/*
 * The table becomes one card per tax, labelled from data-label. It switches
 * before the rest of the compact layout: below this width seven columns
 * (with the row actions) would squeeze the subject into broken words.
 */
@container gma-scd (max-width: 849px) {
	.gma-scd-app .gma-scd-table thead {
		display: none;
	}

	.gma-scd-app .gma-scd-table,
	.gma-scd-app .gma-scd-table tbody,
	.gma-scd-app .gma-scd-table tr,
	.gma-scd-app .gma-scd-table td {
		display: block;
		width: 100%;
	}

	.gma-scd-app .gma-scd-table tr {
		padding: var(--gma-scd-spacing-3) var(--gma-scd-spacing-4);
		border-bottom: 1px solid var(--gma-scd-border-subtle);
	}

	.gma-scd-app .gma-scd-table td,
	.gma-scd-app .gma-scd-table .gma-scd-table__amount {
		display: flex;
		justify-content: space-between;
		gap: var(--gma-scd-spacing-3);
		padding: var(--gma-scd-spacing-1) 0;
		text-align: right;
		border-bottom: 0;
	}

	.gma-scd-app .gma-scd-table td::before {
		content: attr(data-label);
		color: var(--gma-scd-text-muted);
		font-size: var(--gma-scd-font-size-xs);
		font-weight: 600;
		text-align: left;
	}

	/* Actions get their own row in the card, side by side, touch-sized. */
	.gma-scd-app .gma-scd-table .gma-scd-table__actions {
		flex-wrap: wrap;
		align-items: center;
		padding-top: var(--gma-scd-spacing-2);
		white-space: normal;
	}

	.gma-scd-app .gma-scd-table-actions {
		flex-direction: row;
	}

	.gma-scd-app .gma-scd-table-actions .gma-scd-btn {
		min-height: var(--gma-scd-touch-target);
	}
}

@container gma-scd (max-width: 699px) {
	.gma-scd-app .gma-scd-tax-filters,
	.gma-scd-app .gma-scd-form-grid,
	.gma-scd-app .gma-scd-data-list {
		grid-template-columns: minmax(0, 1fr);
	}

	.gma-scd-app .gma-scd-tax-filters .gma-scd-field--wide {
		grid-column: auto;
	}

	.gma-scd-app .gma-scd-form-actions {
		justify-content: stretch;
	}

	.gma-scd-app .gma-scd-form-actions > * {
		flex: 1 1 auto;
	}

	.gma-scd-app .gma-scd-form-actions .gma-scd-btn {
		width: 100%;
	}
}