/**
 * Agent Firewall admin styles.
 *
 * Compiled by wp-scripts to build/style-index.css via the import in index.js.
 */

.adaf-admin {
	&__panel {
		margin-top: 1em;
	}

	table {
		margin-bottom: 1.5em;
	}
}

.adaf-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 3px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.8;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	border: 1px solid transparent;

	&--allowed {
		background: #edfaef;
		border-color: #68de7c;
		color: #00500c;
	}

	&--denied {
		background: #fcf0f1;
		border-color: #f86368;
		color: #8a2424;
	}

	&--pending {
		background: #fcf9e8;
		border-color: #dba617;
		color: #674600;
	}

	&--undone {
		background: #f0f0f1;
		border-color: #a7aaad;
		color: #3c434a;
	}

	// Policy decisions reuse the ledger palette: allow reads as allowed,
	// deny as denied, and anything held for a human as pending.
	&--allow,
	&--log_only {
		background: #edfaef;
		border-color: #68de7c;
		color: #00500c;
	}

	&--deny {
		background: #fcf0f1;
		border-color: #f86368;
		color: #8a2424;
	}

	&--require_approval,
	&--evaluate_ai {
		background: #fcf9e8;
		border-color: #dba617;
		color: #674600;
	}
}

.adaf-defaults {
	margin-top: 1em;

	&__table {
		max-width: 48em;

		td {
			vertical-align: top;
		}

		.description {
			margin: 4px 0 0;
		}
	}
}

.adaf-rule {
	max-width: 48em;
	margin: 0 0 1em;
	padding: 8px 12px 4px;
	border: 1px solid #dcdcde;
	background: #fff;

	legend {
		padding: 0 4px;
		font-weight: 600;
	}

	&__matches {
		display: flex;
		flex-wrap: wrap;
		gap: 0 1.5em;
	}

	&__field {
		display: flex;
		align-items: center;
		gap: 0.5em;
		margin: 0 0 0.75em;

		label {
			font-weight: 600;
			white-space: nowrap;
		}

		input[type="number"] {
			width: 7em;
		}
	}

	&__actions {
		margin: 0 0 0.75em;

		.button + .button {
			margin-left: 4px;
		}
	}
}

.adaf-agents__token code {
	display: block;
	padding: 8px;
	margin: 4px 0;
	word-break: break-all;
	background: #fff;
}

.adaf-pending__payload,
.adaf-policies__rules {
	max-width: 32em;
	max-height: 12em;
	margin: 0;
	overflow: auto;
	padding: 8px;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	font-size: 12px;
}

.adaf-scopes {
	color: #50575e;
	font-size: 12px;

	&--none {
		font-style: italic;
	}
}

.adaf-dryrun {
	max-width: 48em;
	margin: 1.5em 0;
	padding: 8px 12px;
	border: 1px solid #dcdcde;
	background: #fff;

	h2 {
		margin-top: 0.5em;
	}

	&__form {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.5em;

		label {
			font-weight: 600;
		}
	}

	&__result {
		margin-top: 0.5em;
		padding: 8px 12px;
		background: #f6f7f7;
		border-left: 4px solid #2271b1;

		p {
			margin: 0.25em 0;
		}
	}

	&__explanation {
		font-weight: 600;
	}
}

.adaf-ledger__provenance {
	max-width: 22em;
	color: #50575e;
	font-size: 12px;
}

.adaf-unused {
	max-width: 48em;
	margin: 1.5em 0;
	padding: 8px 12px;
	border: 1px solid #dcdcde;
	background: #fff;

	h2 {
		margin-top: 0.5em;
	}

	&__list {
		margin: 0.5em 0;
		list-style: none;

		li {
			padding: 6px 0;
			border-top: 1px solid #f0f0f1;
		}
	}

	&__rule {
		margin: 4px 0 0;
		padding: 6px 8px;
		overflow-x: auto;
		background: #f6f7f7;
		border: 1px solid #dcdcde;
		font-size: 12px;
	}
}

.adaf-retention {
	max-width: 48em;
	margin: 0 0 1em;
	padding: 6px 12px;
	border: 1px solid #dcdcde;
	background: #fff;

	summary {
		cursor: pointer;
		font-weight: 600;
	}

	.notice.inline {
		margin: 8px 0;
	}
}

.adaf-alerts {
	max-width: 48em;
	margin: 0 0 1em;

	label {
		font-weight: 600;
	}

	.description {
		display: block;
		margin-top: 4px;
	}

	&__notice {
		font-style: italic;
	}
}

/**
 * Queue-depth badge on the Pending tab.
 *
 * Deliberately the same pill core uses for the admin-menu bubble, so the two
 * counts read as one signal. The number carries the meaning - the colour only
 * reinforces it (WCAG 1.4.1), and at zero the badge is absent entirely.
 */
.adaf-tab-count {
	display: inline-block;
	box-sizing: border-box;
	min-width: 18px;
	height: 18px;
	padding: 0 6px;
	border-radius: 9px;
	background: #d63638;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 18px;
	text-align: center;
	vertical-align: text-top;
}

/**
 * Rows-per-page control, sat inside core's .tablenav-pages beside the count.
 */
.adaf-tablenav__per-page {
	margin: 0 12px;

	label {
		margin-right: 4px;
	}
}

/**
 * Core sizes its page field with size="1" on a text input; this one is a
 * number input (so it announces as a spinbutton), which needs a width.
 */
.adaf-ledger .tablenav .current-page {
	width: 4em;
	text-align: center;
}