/*
 * The band pages' forms (templates/admin/home/band.html, row.html), the Remove
 * button and its dialog, on Unfold's colour variables like admin-home.css.
 */
.eb-panel {
	background: #fff;
	border-radius: 0.75rem;
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
	padding: 1.75rem 2rem;
}

.eb-panel h2 {
	color: var(--color-base-900);
	font-size: 1.25rem;
	font-weight: 600;
	margin-bottom: 1rem;
}

.eb-panel .eb-row {
	align-items: flex-start;
	background: var(--color-base-50);
	box-shadow: none;
}

.eb-row-fields {
	display: grid;
	flex: 1;
	gap: 0 1rem;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	min-width: 0;
}

/* Every button on these pages shows it can be clicked, unless it is switched off. */
.eb-home button:not(:disabled),
.eb-dialog button {
	cursor: pointer;
}

.eb-remove {
	align-items: center;
	border: 1px solid #dc2626;
	border-radius: 0.5rem;
	color: #dc2626;
	display: inline-flex;
	flex: none;
	font-weight: 600;
	gap: 0.25rem;
	padding: 0.375rem 0.625rem;
}

.eb-remove:hover {
	background: rgb(220 38 38 / 0.08);
}

.dark .eb-remove {
	border-color: #f87171;
	color: #f87171;
}

.eb-remove .material-symbols-outlined {
	font-size: 20px;
}

.eb-tile > .eb-actions {
	border-top: 1px solid var(--color-base-200);
	margin-top: auto;
	padding-top: 0.875rem;
}

.eb-action {
	align-items: center;
	border: 1px solid var(--color-base-200);
	border-radius: 0.5rem;
	display: inline-flex;
	font-weight: 600;
	gap: 0.25rem;
	height: 38px;
	padding: 0 0.875rem;
}

.eb-action:hover:not(:disabled) {
	background: var(--color-base-100);
}

.eb-action:disabled {
	cursor: default;
	opacity: 0.4;
}

.eb-action-save {
	background: var(--color-primary-600);
	border-color: var(--color-primary-600);
	color: #fff;
}

.eb-action-save:hover:not(:disabled) {
	background: var(--color-primary-700);
}

.eb-action .material-symbols-outlined {
	font-size: 18px;
}

.eb-tile .eb-actions .eb-remove {
	height: 38px;
}

.eb-row .eb-actions .material-symbols-outlined {
	font-size: 16px;
}

.dark .eb-action {
	border-color: var(--color-base-700);
}

.dark .eb-action:hover:not(:disabled) {
	background: var(--color-base-700);
}

.eb-dialog {
	border-radius: 0.875rem;
	box-shadow: 0 20px 50px rgb(0 0 0 / 0.25);
	margin: auto;
	max-width: 440px;
	padding: 1.75rem;
	width: calc(100% - 2rem);
}

.eb-dialog::backdrop {
	background: rgb(0 0 0 / 0.4);
}

.eb-dialog h2 {
	color: var(--color-base-900);
	font-size: 1.125rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
	overflow-wrap: anywhere;
}

.eb-dialog p {
	color: var(--color-base-500);
}

.eb-dialog-buttons {
	display: flex;
	gap: 0.75rem;
	justify-content: flex-end;
	margin-top: 1.5rem;
}

.eb-dialog-buttons button {
	border-radius: 0.5rem;
	font-weight: 600;
	padding: 0.625rem 1.125rem;
}

.eb-dialog-cancel {
	border: 1px solid var(--color-base-200);
}

.eb-dialog-remove {
	background: #dc2626;
	color: #fff;
}

.dark .eb-dialog {
	background: var(--color-base-800);
	color: var(--color-base-100);
}

.dark .eb-dialog h2 {
	color: var(--color-base-100);
}

.eb-hint {
	color: var(--color-base-500);
	margin: -0.5rem 0 1rem;
}

.eb-add {
	align-items: center;
	color: var(--color-primary-600);
	display: inline-flex;
	font-weight: 600;
	gap: 0.25rem;
	margin-top: 0.75rem;
}

.eb-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* With no Save bar, the last panel still has room below it. */
.eb-home.eb-wide {
	padding-bottom: 2rem;
}

.dark .eb-row,
.dark .eb-panel {
	background: var(--color-base-800);
	box-shadow: none;
}

.dark .eb-tile,
.dark .eb-panel .eb-row {
	background: var(--color-base-900);
}

.dark .eb-panel h2 {
	color: var(--color-base-100);
}

/* The note after each save (band.js toast): in the middle at the foot of the screen, green, or red when refused.
   It is a popover, so it shows above an open dialog too. */
.eb-toast {
	align-items: center;
	background: #15803d;
	border: 0;
	border-radius: 0.75rem;
	box-shadow: 0 12px 32px rgb(0 0 0 / 0.28);
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	gap: 0.625rem;
	inset: auto 0 2rem 0;
	margin: 0 auto;
	max-width: min(520px, calc(100vw - 2rem));
	padding: 0.875rem 1.375rem;
	position: fixed;
	width: max-content;
}

.eb-toast:popover-open {
	animation: eb-toast-in 0.2s ease-out;
	display: flex;
}

.eb-toast.eb-toast-failed {
	background: #b91c1c;
}

.eb-toast .material-symbols-outlined {
	font-size: 22px;
}

@keyframes eb-toast-in {
	from {
		opacity: 0;
		transform: translateY(0.75rem);
	}
}