/* Basalt - Approvals (approvals.html)
   Namespaced under .apv-*
   Built from shared parts: the page header, styled selects, avatars,
   status pills, switches, empty states, the side panel and the
   dialog parts.
   This file lays out the request queue, the rules and the quick view.
   Three type sizes: the card title, body text (--apv-fs-body) and one
   small size (--apv-fs-small). */

.apv-page,
.apv-drawer,
.apv-dialog {
	/* Small gray text: the muted token pulled toward the body color, so it
     clears 4.5:1 on the lighter palettes and on hovered rows. */
	--apv-quiet: color-mix(in srgb, var(--basalt-copy-muted) 62%, var(--basalt-copy));
	/* Primary as text: on its own it is under 4.5:1 in a few light palettes. */
	--apv-link: color-mix(in srgb, var(--basalt-hue) 60%, var(--basalt-copy));
	--apv-line: var(--basalt-edge);
	--apv-fs-body: 0.875rem;
	--apv-fs-small: 0.77rem;
}

/* One color per kind of request, from the chart ramp. */
.apv-tone-1 {
	--apv-tone: var(--basalt-series-1);
}
.apv-tone-2 {
	--apv-tone: var(--basalt-series-2);
}
.apv-tone-3 {
	--apv-tone: var(--basalt-series-3);
}
.apv-tone-4 {
	--apv-tone: var(--basalt-series-4);
}
.apv-tone-5 {
	--apv-tone: var(--basalt-series-5);
}

.apv-quiet {
	color: var(--apv-quiet);
}
.apv-link {
	border-radius: 3px;
	font-weight: 600;
	text-decoration: none;
	color: var(--apv-link);
}
.apv-link:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--basalt-copy);
}
.apv-link:focus-visible {
	outline: 2px solid var(--basalt-hue);
	outline-offset: 2px;
	box-shadow: none;
}

.apv-chip {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 10px;
	font-size: 0.95rem;
	color: color-mix(in srgb, var(--apv-tone) 62%, var(--basalt-copy));
	background: color-mix(in srgb, var(--apv-tone) 14%, var(--basalt-plane));
}
.apv-person {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	min-width: 0;
	max-width: 100%;
	font-size: var(--apv-fs-body);
}
.apv-person .basalt-avatar {
	flex: none;
}
.apv-person-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--basalt-copy);
}

/* Cards */
.apv-page .basalt-pagehead {
	margin-bottom: 1.75rem;
}
.apv-card.card {
	container-type: inline-size;
	overflow: hidden;
}
.apv-card-head {
	padding: var(--basalt-pad-head) var(--basalt-pad-x);
	border-bottom: 1px solid var(--apv-line);
}
.apv-card-title {
	margin: 0;
	font-size: var(--basalt-fs-card-title);
	font-weight: 700;
	line-height: 1.3;
	color: var(--basalt-copy);
}
.apv-card-desc {
	margin: 0.3rem 0 0;
	font-size: var(--apv-fs-body);
	color: var(--apv-quiet);
}

.apv-toolbar {
	display: flex;
	gap: 0.5rem;
	flex-wrap: nowrap;
	align-items: center;
	margin-top: var(--basalt-pad-head);
}
.apv-search {
	position: relative;
	flex: 0 1 28rem;
	min-width: 12rem;
}
.apv-search > .bi {
	position: absolute;
	top: 50%;
	left: 0.85rem;
	transform: translateY(-50%);
	color: var(--apv-quiet);
	pointer-events: none;
}
.apv-search .form-control {
	padding-left: 2.4rem;
}
.apv-toolbar .form-control,
.apv-toolbar .form-select {
	font-size: var(--apv-fs-body);
}
.apv-toolbar-selects {
	display: contents;
}
.apv-toolbar-select {
	flex: 0 1 11.5rem;
	min-width: 9.5rem;
}

/* Approve several at once: a quiet bar over the table. */
.apv-bulk {
	display: flex;
	gap: 0.5rem 1rem;
	flex-wrap: wrap;
	align-items: center;
	padding: 0.7rem var(--basalt-pad-x);
	border-bottom: 1px solid var(--apv-line);
	background: var(--basalt-plane-alt);
}
.apv-bulk[hidden] {
	display: none;
}
.apv-bulk-count {
	margin: 0 auto 0 0;
	font-size: var(--apv-fs-body);
	font-weight: 600;
	color: var(--basalt-copy);
}

/* The queue */
.apv-table-wrap {
	overflow: hidden;
}
.apv-table-wrap[hidden] {
	display: none;
}
.apv-table {
	--bs-table-bg: transparent;
	table-layout: fixed;
}
.apv-table .apv-col-pick {
	width: 3.6rem;
}
.apv-table .apv-col-amount {
	width: 8rem;
}
.apv-table .apv-col-who {
	width: 11.5rem;
}
.apv-table .apv-col-state {
	width: 10rem;
}
.apv-table .apv-col-act {
	width: 15.5rem;
}
.apv-table > :not(caption) > * > * {
	padding: var(--basalt-pad-row-y) 1rem;
	border-color: var(--apv-line);
	vertical-align: middle;
	color: var(--basalt-copy);
}
.apv-table > :not(caption) > * > :first-child {
	padding-left: var(--basalt-pad-x);
	padding-right: 0;
}
.apv-table > :not(caption) > * > :last-child {
	padding-right: var(--basalt-pad-x);
	text-align: right;
}
.apv-table thead th {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	font-size: 0.71rem;
	font-weight: 700;
	letter-spacing: 0.035em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--apv-quiet);
}
.apv-table tbody tr:last-child > * {
	border-bottom: 0;
}
.apv-table .form-check-input {
	margin: 0;
	vertical-align: middle;
}

.apv-row[data-apv-id] {
	cursor: pointer;
}
.apv-row[data-apv-id]:hover > * {
	background: var(--basalt-wash);
}
.apv-row.is-open > *,
.apv-row.is-picked > * {
	background: color-mix(in srgb, var(--basalt-hue) 8%, var(--basalt-plane));
}

.apv-what {
	display: flex;
	gap: 0.85rem;
	align-items: center;
	min-width: 0;
}
.apv-what-text {
	min-width: 0;
}
.apv-row-title,
.apv-row-meta {
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.apv-row-title {
	font-size: var(--apv-fs-body);
	font-weight: 600;
	color: var(--basalt-copy);
}
.apv-row-meta {
	margin-top: 0.25rem;
	font-size: var(--apv-fs-small);
	color: var(--apv-quiet);
}
.apv-row-amount-inline,
.apv-row-state-inline {
	display: none;
}
.apv-row-link {
	border-radius: 3px;
	text-decoration: none;
	color: inherit;
}
.apv-row-link:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.apv-row-link:focus-visible {
	outline: 2px solid var(--basalt-hue);
	outline-offset: 2px;
	box-shadow: none;
}
.apv-row-amount {
	font-size: var(--apv-fs-body);
	font-weight: 600;
	white-space: nowrap;
}
.apv-row-state .basalt-status {
	font-size: var(--apv-fs-small);
}
.apv-wait {
	display: block;
	overflow: hidden;
	font-size: var(--apv-fs-body);
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--apv-quiet);
}
.apv-row-act .basalt-row-actions {
	gap: 0.3rem;
}
.apv-btn {
	white-space: nowrap;
}

/* Empty and no results */
.apv-empty {
	max-width: 30rem;
	margin: 1.5rem auto;
	text-align: center;
}
.apv-empty-icon {
	display: inline-grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: 0.6rem;
	border-radius: 14px;
	font-size: var(--basalt-fs-card-title);
	color: var(--apv-link);
	background: var(--basalt-hue-soft);
}
.apv-empty .basalt-empty-title {
	font-size: var(--basalt-fs-section);
}
.apv-empty .basalt-empty-text {
	font-size: var(--apv-fs-body);
	color: var(--apv-quiet);
}
.apv-empty .basalt-empty-actions {
	justify-content: center;
}

/* Medium cards: the approver shows as an avatar, then Amount moves
   into the quiet line and the approver is left to the quick view. */
@container (max-width: 1040px) {
	.apv-table .apv-col-who {
		width: 4.5rem;
	}
	.apv-row-who .apv-person-name {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		white-space: nowrap;
		clip-path: inset(50%);
	}
}
@container (max-width: 860px) {
	.apv-table .apv-col-amount,
	.apv-row-amount {
		display: none;
	}
	.apv-row-amount-inline {
		display: inline;
	}
	.apv-row-rule {
		display: none;
	}
}
@container (max-width: 860px) and (min-width: 640.02px) {
	.apv-table .apv-col-state,
	.apv-row-state,
	.apv-table .apv-col-who,
	.apv-row-who {
		display: none;
	}
	.apv-row-state-inline {
		display: inline;
	}
}

/* Narrow cards: each request becomes a small record. The title on
   top, then how long it has waited and the actions. */
@container (max-width: 640px) {
	.apv-card-head,
	.apv-bulk {
		padding-left: var(--basalt-pad-x-narrow);
		padding-right: var(--basalt-pad-x-narrow);
	}
	.apv-toolbar {
		flex-wrap: wrap;
	}
	.apv-search {
		flex: 1 1 100%;
		min-width: 0;
	}
	.apv-toolbar-selects {
		display: flex;
		gap: 0.5rem;
		flex: 1 1 100%;
		min-width: 0;
	}
	.apv-toolbar-select {
		flex: 1 1 0;
		min-width: 0;
	}

	.apv-table {
		table-layout: auto;
	}
	.apv-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		white-space: nowrap;
		clip-path: inset(50%);
	}
	.apv-table,
	.apv-table tbody,
	.apv-table td {
		display: block;
		width: 100%;
	}
	.apv-table tbody tr {
		display: grid;
		gap: 0.65rem 0.75rem;
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas: "pick what what" ". state act";
		align-items: center;
		padding: var(--basalt-pad-row-y) var(--basalt-pad-x-narrow);
		border-bottom: 1px solid var(--apv-line);
	}
	.apv-table tbody tr:last-child {
		border-bottom: 0;
	}
	.apv-table > :not(caption) > * > *,
	.apv-table > :not(caption) > * > :first-child,
	.apv-table > :not(caption) > * > :last-child {
		padding: 0;
		border: 0;
		background: transparent;
	}
	.apv-row[data-apv-id]:hover {
		background: var(--basalt-wash);
	}
	.apv-row.is-open,
	.apv-row.is-picked {
		background: color-mix(in srgb, var(--basalt-hue) 8%, var(--basalt-plane));
	}
	.apv-row-pick {
		grid-area: pick;
		width: 1rem;
	}
	.apv-row-what {
		grid-area: what;
	}
	.apv-table td.apv-row-amount,
	.apv-table td.apv-row-who {
		display: none;
	}
	.apv-row-state {
		grid-area: state;
		min-width: 0;
	}
	.apv-row-act {
		grid-area: act;
		width: auto;
	}
	.apv-row-title,
	.apv-row-meta {
		white-space: normal;
	}
}
@container (max-width: 400px) {
	.apv-table tbody tr {
		grid-template-areas: "pick what what" ". state state" ". act act";
	}
	.apv-row-act {
		text-align: left;
	}
}

/* The rules
   One calm row per rule: what it catches, who approves, how many are
   waiting, then on or off and change. */
.apv-rules {
	margin: 0;
	padding: 0;
	list-style: none;
}
.apv-rule {
	display: grid;
	gap: 1rem 1.25rem;
	grid-template-columns: auto minmax(0, 1fr) 14rem 9rem auto;
	align-items: center;
	padding: 1.1rem var(--basalt-pad-x);
	border-bottom: 1px solid var(--apv-line);
}
.apv-rule:last-child {
	border-bottom: 0;
}
.apv-rule-text {
	min-width: 0;
}
.apv-rule-name {
	margin: 0;
	font-size: var(--apv-fs-body);
	font-weight: 600;
	color: var(--basalt-copy);
}
.apv-rule-when {
	margin: 0.25rem 0 0;
	font-size: var(--apv-fs-small);
	color: var(--apv-quiet);
}
.apv-rule-who {
	min-width: 0;
}
.apv-person-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.apv-person-title {
	overflow: hidden;
	font-size: var(--apv-fs-small);
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--apv-quiet);
}
.apv-rule-count {
	margin: 0;
	font-size: var(--apv-fs-small);
	white-space: nowrap;
	color: var(--apv-quiet);
}
.apv-rule-tools {
	display: flex;
	gap: 0.75rem;
	align-items: center;
}
.apv-rule-tools .form-switch {
	min-height: 0;
	padding-left: 2.5em;
}
.apv-rule.is-off .apv-rule-name,
.apv-rule.is-off .apv-rule-who {
	opacity: 0.7;
}
@container (max-width: 860px) {
	.apv-rule {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas: "icon text tools" ". who who";
	}
	.apv-rule > .apv-chip {
		grid-area: icon;
	}
	.apv-rule-text {
		grid-area: text;
	}
	.apv-rule-who {
		grid-area: who;
	}
	.apv-rule-tools {
		grid-area: tools;
	}
	.apv-rule-count {
		display: none;
	}
}
@container (max-width: 640px) {
	.apv-rule {
		padding-left: var(--basalt-pad-x-narrow);
		padding-right: var(--basalt-pad-x-narrow);
	}
}

/* The quick view */
.apv-drawer.offcanvas {
	--bs-offcanvas-width: min(520px, 100vw);
}
.apv-drawer .offcanvas-header {
	gap: 0.75rem;
	align-items: flex-start;
	border-bottom: 1px solid var(--apv-line);
}
.apv-drawer .offcanvas-title {
	margin: 0;
	font-size: var(--basalt-fs-card-title);
	font-weight: 700;
	line-height: 1.3;
	color: var(--basalt-copy);
}
.apv-drawer .offcanvas-title:focus {
	outline: none;
}
.apv-drawer .offcanvas-title:focus-visible {
	outline: 2px solid var(--basalt-hue);
	outline-offset: 2px;
}
.apv-drawer .basalt-drawer-sub {
	margin-top: 0.3rem;
	font-size: var(--apv-fs-small);
	color: var(--apv-quiet);
}
.apv-drawer .offcanvas-body {
	padding: 1.5rem;
}
.apv-d-top {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	margin-bottom: 1.25rem;
}
.apv-d-top .basalt-status {
	font-size: var(--apv-fs-small);
}
.apv-d-what {
	margin: 0 0 1.5rem;
	font-size: var(--apv-fs-body);
	line-height: 1.6;
	color: var(--basalt-copy);
}
.apv-facts {
	margin: 0;
}
.apv-facts-row {
	display: grid;
	gap: 1rem;
	grid-template-columns: 7.5rem minmax(0, 1fr);
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--apv-line);
	font-size: var(--apv-fs-body);
}
.apv-facts-row:first-child {
	border-top: 1px solid var(--apv-line);
}
.apv-facts dt {
	font-weight: 600;
	color: var(--apv-quiet);
}
.apv-facts dd {
	min-width: 0;
	margin: 0;
	overflow-wrap: anywhere;
	color: var(--basalt-copy);
}
.apv-d-note,
.apv-d-more {
	margin: 1.25rem 0 0;
	font-size: var(--apv-fs-body);
	color: var(--basalt-copy);
}

/* Rule dialog */
.apv-form {
	display: flex;
	gap: 1.25rem;
	flex-direction: column;
}
.apv-field[hidden] {
	display: none;
}