/**
 * Admin SPA styles, structured after the reference design system:
 * tokens (_tokens) → SCSS aliases (_variable) → mixins → utilities →
 * components → admin layout partials.
 * Primary stays Brevo green; change --rbfb-primary in styles/_tokens.scss
 * to re-brand the whole UI.
 */

@use "./styles/fonts";
@use "./styles/tokens";
@use "./styles/default";
@use "./styles/utility";
@use "./styles/variable" as *;
@use "./styles/mixin" as *;
@use "./styles/components/index" as components;
@use "./styles/admin/index" as admin;

/* ------------------------------------------------------ wp-admin frame -- */

/* Full-height fixed app panel, same as the source system's main layout:
   the SPA owns the viewport below the admin bar; content scrolls inside. */
#rbfb-admin {
	position: fixed;
	width: calc(100% - 160px);
	height: calc(100vh - 32px);
	background: $white;

	@include respond-to(960px) {
		width: calc(100% - 36px);
	}

	@include respond-to(782px) {
		width: 100% !important;
	}
}

.folded #rbfb-admin {
	width: calc(100% - 36px);
}

.rbfb-admin {
	#wpcontent {
		padding-left: 0;
	}

	#wpbody-content {
		padding-bottom: 0;
	}

	#wpfooter {
		display: none;
	}
}

/* ------------------------------------------- @wordpress/components skin -- */

/* Only the three WP components the pages still use. Modals and snackbars
   render in portals OUTSIDE #rbfb-admin, so tokens may not resolve there —
   every value carries a literal fallback. */
.rbfb-admin {

	.components-modal__frame {
		font-family: $primary-font;
		border-radius: var(--rbfb-radius-lg, 12px);

		.components-modal__header {
			.components-modal__header-heading {
				font-family: inherit;
				font-weight: 600;
				color: var(--rbfb-black, #000e25);
			}
		}

		.components-modal__content {
			font-size: 13px;
			color: var(--rbfb-gray-700, #374151);
		}
	}

	.components-snackbar {
		font-family: $primary-font;
		background: var(--rbfb-gray-800, #243247);
		border-radius: var(--rbfb-radius-md, 8px);
	}

	.components-spinner {
		color: var(--rbfb-primary, #0b996e);
	}
}

/* ---------------------------------------------------------------- pages -- */

.rbfb-page {
	max-width: 880px;

	&__title {
		margin: 0 0 var(--rbfb-space-5);
		font-size: var(--rbfb-font-size-xl);
		font-weight: 600;
		color: $black;
	}

	.components-card {
		margin-bottom: var(--rbfb-space-5);
	}

	.components-notice {
		margin: 0 0 var(--rbfb-space-4);
	}
}

/* Tabs — the design system's indicator tabs: quiet gray items, the active
   one carried on a primary indicator (approximated without JS). */
.rbfb-tabs {
	display: inline-flex;
	gap: 5px;
	margin-bottom: var(--rbfb-space-5);
	padding: var(--rbfb-space-1);
	background: $white;
	border: 1px solid $gray-200;
	border-radius: var(--rbfb-radius-md);

	&__tab {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: var(--rbfb-space-2) var(--rbfb-space-4);
		border-radius: 6px;
		text-decoration: none;
		font-size: var(--rbfb-font-size-sm);
		font-weight: 500;
		color: $gray-500;
		white-space: nowrap;
		transition: color 220ms ease, background var(--rbfb-transition-normal);

		&:hover {
			color: $primary;
			background: $primary-extralight;
		}

		&.is-active {
			background: $primary;
			color: #fff;
		}
	}
}

.rbfb-key-row {
	display: flex;
	align-items: center;
	gap: var(--rbfb-space-3);

	code {
		padding: var(--rbfb-space-2) var(--rbfb-space-3);
		font-size: var(--rbfb-font-size-sm);
		letter-spacing: 1px;
		background: $gray-50;
		border: 1px solid $gray-200;
		border-radius: var(--rbfb-radius-md);
		color: $gray-800;
	}
}

.rbfb-key-actions {
	display: flex;
	gap: var(--rbfb-space-2);
	margin-top: var(--rbfb-space-3);
}

.rbfb-loading {
	display: flex;
	align-items: center;
	gap: var(--rbfb-space-2);
	padding: var(--rbfb-space-6) 0;
	color: $gray-500;
}

/* ------------------------------------------------------- data components -- */

.rbfb-page--wide {
	max-width: 1100px;
}

.rbfb-page__actions {
	margin-bottom: var(--rbfb-space-4);
	display: flex;
	justify-content: flex-end;
}

.rbfb-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;

	th {
		text-align: left;
		padding: var(--rbfb-space-2) var(--rbfb-space-3);
		color: $gray-500;
		font-weight: 500;
		font-size: var(--rbfb-font-size-xs);
		border-bottom: 1px solid $gray-200;
	}

	td {
		padding: var(--rbfb-space-2) var(--rbfb-space-3);
		border-bottom: 1px solid $gray-100;
		color: $gray-700;
		vertical-align: middle;
	}

	tr:last-child td {
		border-bottom: none;
	}

	&__actions {
		display: flex;
		gap: var(--rbfb-space-1);

		.components-button,
		.rbfb-button {
			height: 32px;
			padding: 0 10px;
			font-size: 12px;
		}
	}

	&__message {
		max-width: 320px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	&__row--clickable {
		cursor: pointer;
		transition: background var(--rbfb-transition-fast);

		&:hover {
			background: $primary-extralight;
		}
	}
}

.rbfb-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 10px;
	border-radius: var(--rbfb-radius-pill);
	font-size: var(--rbfb-font-size-xs);
	font-weight: 500;
	border: 1px solid transparent;

	// The glyph inherits the badge colour so each state needs no rule of
	// its own.
	&__icon {
		font-size: 14px;
		color: inherit;
	}

	&--success,
	&--active {
		color: $success;
		background: $success-50;
		border-color: $success-100;
	}

	&--failed {
		color: $error;
		background: $error-50;
		border-color: $error-100;
	}

	&--retrying,
	&--queued,
	&--pending_doi {
		color: $warning;
		background: $warning-50;
		border-color: $warning-100;
	}

	&--skipped,
	&--paused {
		color: $gray-600;
		background: $gray-100;
		border-color: $gray-200;
	}
}

.rbfb-log-filters {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rbfb-space-3);
	margin-bottom: var(--rbfb-space-4);
	flex-wrap: wrap;

	.components-search-control {
		min-width: 240px;
	}
}

.rbfb-chips {
	display: inline-flex;
	gap: 5px;
	padding: var(--rbfb-space-1);
	background: $white;
	border: 1px solid $gray-200;
	border-radius: var(--rbfb-radius-md);
}

.rbfb-chip {
	border: none;
	background: transparent;
	padding: 6px 12px;
	border-radius: 6px;
	font-family: inherit;
	font-size: var(--rbfb-font-size-xs);
	font-weight: 500;
	color: $gray-500;
	cursor: pointer;
	text-transform: capitalize;
	transition: all var(--rbfb-transition-fast);

	&:hover {
		color: $primary;
		background: $primary-extralight;
	}

	&.is-active {
		background: $primary;
		color: #fff;
	}
}

.rbfb-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: var(--rbfb-space-3);
	color: $gray-500;
	font-size: var(--rbfb-font-size-xs);
}

.rbfb-stat-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--rbfb-space-4);
	margin-bottom: var(--rbfb-space-5);

	.rbfb-stat-card .components-card__body {
		display: flex;
		flex-direction: column;
		gap: var(--rbfb-space-1);
	}

	.rbfb-stat-card__value {
		font-size: var(--rbfb-font-size-2xl);
		font-weight: 600;
		color: $black;
	}

	.rbfb-stat-card__label {
		font-size: var(--rbfb-font-size-xs);
		color: $gray-500;
	}
}

.rbfb-json {
	background: $gray-50;
	border: 1px solid $gray-200;
	border-radius: var(--rbfb-radius-md);
	padding: var(--rbfb-space-3);
	font-size: var(--rbfb-font-size-xs);
	max-height: 260px;
	overflow: auto;
	white-space: pre-wrap;
	word-break: break-word;
}

.rbfb-payload-modal .components-modal__content {
	min-width: min(640px, 90vw);
}

.rbfb-muted {
	color: $gray-500;
	font-size: var(--rbfb-font-size-xs);
}

.rbfb-editor-actions {
	display: flex;
	gap: var(--rbfb-space-2);
	margin: var(--rbfb-space-4) 0 var(--rbfb-space-8);
}

.rbfb-mapping-table {
	td .components-base-control + .components-base-control {
		margin-top: var(--rbfb-space-1);
	}
}

.rbfb-feed-editor {
	.components-base-control,
	.components-toggle-control {
		margin-bottom: var(--rbfb-space-3);
	}
}

/* ------------------------------------------------------------- notices -- */

/* A type glyph on every Note. Done here rather than in the ported Note
   component so styles/components/_note.scss stays diffable against the
   source system. Pseudo-element content cannot rely on the icon font's
   ligatures, so these are the Material codepoints: info e88e, warning
   e002, error e000. The glyph is decorative — the note text always says
   what it says without it. */
.rbfb-top-level-wrapper .rbfb-note {
	position: relative;
	padding-left: 2.375rem;

	&::before {
		position: absolute;
		top: 0.75rem;
		left: 0.9375rem;
		font-family: rbfb-icon, sans-serif;
		font-size: 1rem;
		font-weight: 400;
		line-height: 1;
		-webkit-font-smoothing: antialiased;
	}

	&--info::before {
		content: "\e88e";
		color: $primary;
	}

	&--warning::before {
		content: "\e002";
		color: $warning;
	}

	&--error::before {
		content: "\e000";
		color: $error;
	}
}

/* ---------------------------------------------------------- date field -- */

/* The visible control is a text input formatted dd-mm-yyyy. The native
   type="date" input is kept only so its calendar can be opened by the button
   beside it, so it is shrunk out of the way rather than hidden: showPicker()
   throws on a display:none element. The input selector has to out-specify
   .rbfb-input__group input from the Input atom, which stretches every field
   it contains to the full width. */
.rbfb-top-level-wrapper .rbfb-date-field {

	.rbfb-input__group {
		position: relative;
	}

	.rbfb-date-field__button {
		display: inline-flex;
		align-items: center;
		padding: 0;
		border: 0;
		background: none;
		color: inherit;
		cursor: pointer;

		&:hover .rbfb-icon,
		&:focus-visible .rbfb-icon {
			color: var(--rbfb-primary);
		}
	}

	.rbfb-input__group input.rbfb-date-field__native {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 1px;
		min-width: 0;
		height: 1px;
		min-height: 0;
		padding: 0;
		border: 0;
		opacity: 0;
		pointer-events: none;
	}
}
