/*
 * GMA Scadenziario — Domini, PEC e Servizi (STEP 8).
 *
 * Scoped under .gma-scd-app and built only from the shared tokens and the
 * components already used by the other modules (cards, table with its card
 * layout, form grid, data list, pagination, buttons, badges, notices). No
 * colour of its own; Impostazioni → Grafica applies here through the tokens.
 * Layout adapts through the app container (gma-scd).
 */

/* Sections: a segmented control (Domini · PEC · Altri servizi) ------------ */

.gma-scd-app .gma-scd-dservice-tabs {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 2px;
	max-width: 100%;
	margin-bottom: var(--gma-scd-spacing-4);
	padding: 2px;
	background: var(--gma-scd-surface-muted);
	border: 1px solid var(--gma-scd-border-subtle);
	border-radius: var(--gma-scd-radius-full);
}

.gma-scd-app .gma-scd-dservice-tabs__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--gma-scd-touch-target);
	padding: 0 var(--gma-scd-spacing-4);
	color: var(--gma-scd-text-muted);
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--gma-scd-radius-full);
}

.gma-scd-app .gma-scd-dservice-tabs__item:hover {
	color: var(--gma-scd-text);
}

.gma-scd-app .gma-scd-dservice-tabs__item.is-active {
	color: var(--gma-scd-text);
	background: var(--gma-scd-surface);
	box-shadow: 0 1px 2px color-mix(in srgb, var(--gma-scd-text) 14%, transparent);
}

.gma-scd-app .gma-scd-dservice-tabs__item:focus-visible {
	outline: 2px solid var(--gma-scd-color-primary);
	outline-offset: 2px;
}

/* Header actions ---------------------------------------------------------- */

.gma-scd-app .gma-scd-dservice-header__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gma-scd-spacing-2);
}

/* A domain or an address may be long and without spaces. */
.gma-scd-app .gma-scd-dservice-title,
.gma-scd-app .gma-scd-dservice-list__name,
.gma-scd-app .gma-scd-dservice-value,
.gma-scd-app .gma-scd-dservice-documents__name {
	overflow-wrap: anywhere;
}

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

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

.gma-scd-app .gma-scd-dservice-filters .gma-scd-field--wide {
	grid-column: span 2;
}

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

.gma-scd-app .gma-scd-dservice-filters select:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* While the filters reload the list, the controls say so (and are not sent twice). */
.gma-scd-app .gma-scd-dservice-filters[aria-busy="true"] {
	opacity: 0.7;
	pointer-events: none;
}

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

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

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

.gma-scd-app .gma-scd-dservice-list__sub {
	display: block;
	font-size: var(--gma-scd-font-size-sm);
}

/* The parts of a cell (date and time condition, amount and payment state) wrap instead of overflowing a narrow card. */
.gma-scd-app .gma-scd-dservice-cell {
	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-dservice-due,
.gma-scd-app .gma-scd-dservice-amount,
.gma-scd-app .gma-scd-dservice-totals dd {
	font-variant-numeric: tabular-nums;
}

.gma-scd-app .gma-scd-dservice-totals dd {
	font-weight: 600;
}

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

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

.gma-scd-app .gma-scd-dservice-detail h2 {
	margin: 0;
}

.gma-scd-app .gma-scd-dservice-items,
.gma-scd-app .gma-scd-dservice-archive,
.gma-scd-app .gma-scd-dservice-documents,
.gma-scd-app .gma-scd-dservice-activity,
.gma-scd-app .gma-scd-ditem-amounts,
.gma-scd-app .gma-scd-ditem-state {
	grid-column: 1 / -1;
}

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

.gma-scd-app .gma-scd-dservice-items .gma-scd-table,
.gma-scd-app .gma-scd-dservice-documents .gma-scd-table,
.gma-scd-app .gma-scd-ditem-amounts .gma-scd-table {
	margin-top: var(--gma-scd-spacing-3);
}

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

.gma-scd-app .gma-scd-dservice-panel {
	margin-top: var(--gma-scd-spacing-4);
	padding-top: var(--gma-scd-spacing-3);
	border-top: 1px solid var(--gma-scd-border-subtle);
}

.gma-scd-app .gma-scd-dservice-panel > summary {
	display: inline-flex;
	list-style: none;
	cursor: pointer;
}

.gma-scd-app .gma-scd-dservice-panel > summary::-webkit-details-marker {
	display: none;
}

.gma-scd-app .gma-scd-dservice-panel[open] > summary {
	margin-bottom: var(--gma-scd-spacing-3);
}

.gma-scd-app .gma-scd-dservice-panel .gma-scd-notice,
.gma-scd-app .gma-scd-dservice-archive .gma-scd-notice {
	margin: var(--gma-scd-spacing-3) 0;
}

.gma-scd-app .gma-scd-dservice-archive form {
	margin-top: var(--gma-scd-spacing-3);
}

.gma-scd-app .gma-scd-dservice-payment-notes {
	display: block;
}

.gma-scd-app [data-gma-scd-ditem-payment-voided] td {
	color: var(--gma-scd-text-muted);
}

.gma-scd-app .gma-scd-dservice-documents form {
	display: inline;
}

/* Forms ------------------------------------------------------------------- */

.gma-scd-app .gma-scd-dservice-form [aria-invalid="true"] {
	border-color: var(--gma-scd-color-danger);
}

.gma-scd-app .gma-scd-dservice-billing {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.gma-scd-app .gma-scd-dservice-billing > legend {
	margin-bottom: var(--gma-scd-spacing-2);
	font-weight: 600;
}

.gma-scd-app .gma-scd-dservice-billing .gma-scd-check {
	display: flex;
	align-items: center;
	gap: var(--gma-scd-spacing-2);
	min-height: var(--gma-scd-touch-target);
}

/* The interval only for "Ogni N mesi" (hidden by the script; without it the field shows). */
.gma-scd-app [data-gma-scd-ditem-interval-field][hidden] {
	display: none;
}

/* Categories -------------------------------------------------------------- */

.gma-scd-app .gma-scd-dservice-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gma-scd-spacing-2);
	margin: var(--gma-scd-spacing-3) 0 0;
	padding: 0;
	list-style: none;
}

.gma-scd-app .gma-scd-dservice-categories {
	display: grid;
	gap: var(--gma-scd-spacing-3);
	margin: var(--gma-scd-spacing-3) 0 0;
	padding: 0;
	list-style: none;
}

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

.gma-scd-app .gma-scd-dservice-categories__name {
	flex: 1 1 12rem;
	min-width: 0;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.gma-scd-app .gma-scd-dservice-categories__edit {
	flex-basis: 100%;
	order: 3;
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

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

/* Dashboard (STEP 8): "Altro servizio" may wrap inside the fixed kind column of the agenda
   instead of covering the title; the other kinds keep their single-line pill. */
.gma-scd-app .gma-scd-agenda__kind--services {
	max-width: 100%;
	line-height: 1.2;
	text-align: center;
	white-space: normal;
	border-radius: var(--gma-scd-radius-md);
}

/* Wide layout: row actions side by side. */
@container gma-scd (min-width: 1050px) {
	.gma-scd-app .gma-scd-dservice-list .gma-scd-table-actions {
		flex-wrap: nowrap;
	}
}

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

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

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

@container gma-scd (max-width: 699px) {
	.gma-scd-app .gma-scd-dservice-tabs {
		display: flex;
	}

	.gma-scd-app .gma-scd-dservice-tabs__item {
		flex: 1 1 0;
		padding: 0 var(--gma-scd-spacing-2);
		text-align: center;
	}

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

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

	.gma-scd-app .gma-scd-dservice-filters__actions .gma-scd-btn {
		flex: 1 1 auto;
	}
}