@use '../design/scss/_variables.scss' as *;
@use '../design/scss/_inputs.scss' as *;
@use '../design/scss/_button-group.scss' as *;
@use '../design/scss/_mixins.scss';
@use '../design/scss/_placeholders.scss';


.adpresso-icon-main, .adpresso-icon-selected, .adpresso-icon-unselected, {
	.ap-ui-icon-color-base {
		fill: #222222;
	}

	.ap-ui-icon-color-contrast {
		fill: #FFFFFF;
	}

	.ap-ui-icon-color-dotted-border {
		fill: #DEDEDE;
	}

	.ap-ui-icon-color-content-light {
		fill: #646464;
	}

	.ap-ui-icon-color-content-dark {
		fill: #434343;
	}
}

.adpresso-field button.is-active .adpresso-icon-unselected, .adpresso-icon-selected {
	.ap-ui-icon-color-base {
		fill: #004F66;
	}

	.ap-ui-icon-color-contrast {
		fill: #FFFFFF;
	}

	.ap-ui-icon-color-dotted-border {
		fill: #D9E5E8;
	}

	.ap-ui-icon-color-content-light {
		fill: #4C8394;
	}

	.ap-ui-icon-color-content-dark {
		fill: #26697D;
	}
}

.adpresso-field button:not(.is-active) {
	.adpresso-icon-unselected {
		.ap-ui-icon-color-base {
			fill: #AAAAAA;
		}

		.ap-ui-icon-color-contrast {
			fill: #FFFFFF;
		}

		.ap-ui-icon-color-dotted-border {
			fill: #F2F2F2;
		}

		.ap-ui-icon-color-content-light {
			fill: #C3C3C3;
		}

		.ap-ui-icon-color-content-dark {
			fill: #B7B7B7;
		}
	}
}

/** Premium */
.adpresso-image-group-item.is-premium {
	svg {
		.ap-ui-icon-color-base {
			fill: $color-premium;
		}

		.ap-ui-icon-color-contrast {
			fill: $color-premium-disabled;
		}

		.ap-ui-icon-color-dotted-border {
			fill: $color-premium-lighter;
		}

		.ap-ui-icon-color-content-light {
			fill: $color-premium-superdark;
		}

		.ap-ui-icon-color-content-dark {
			fill: $color-premium-darker;
		}
	}
}

.adpresso-card.is-active {
	.ap-ui-icon-color-base {
		fill: $color-white;
	}

	.ap-ui-icon-color-contrast {
		fill: $color-accent;
	}

	.ap-ui-icon-color-dotted-border {
		fill: #D9E5E8;
	}

	.ap-ui-icon-color-content-light {
		fill: #4C8394;
	}

	.ap-ui-icon-color-content-dark {
		fill: #26697D;
	}
}

.adpresso-invisible {
	visibility: hidden;
}

.adpresso-hide {
	display: none;
}

.adpresso-notice {
	position: relative;
}

.adpresso-manual-link {
	color: $color-accent;
	text-decoration: none;

	&:hover {
		color: $color-accent;
	}
}

.adpresso-tooltip-wrapper {
	position: relative;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 0.5em;

	&.adpresso-help {
		cursor: help;
	}
}

p.description {
	margin: 0;

	&.is-premium {
		color: $color-premium !important;
	}

	> .adpresso-premium-label {
		margin-top: -0.5em;
		display: inline-block;
	}
}

.adpresso-choices-select {
	& + .adpresso-premium-label {
		font-size: $font-size;
	}

	&.is-premium {
		border-color: $color-premium !important;
		background-color: $color-premium-disabled !important;
	}

	&:disabled {
		pointer-events: none;
		cursor: not-allowed !important;
	}
}

.adpresso-tooltip {
	position: relative;
	cursor: pointer;
	display: inline-block;
	color: $color-primary;

	.adpresso-tooltip-text, + .adpresso-tooltip-text {
		visibility: hidden;
		opacity: 0;
		width: max-content;
		max-width: 18em;
		background-color: $color-primary;
		color: $color-white;
		text-align: left;
		text-transform: none;
		border-radius: 0.4em;
		padding: calc(0.5em / 1.2) calc(1em / 1.2);
		position: absolute;
		// Above WP's own admin-menu/admin-bar chrome (z-index ~9990/99999) - without
		// this a tooltip near the page edge renders visible but behind the menu.
		z-index: 99999;
		top: 120%;
		left: 50%;
		transform: translateX(-50%);
		transition: opacity 0.3s ease;
		white-space: normal;
		font-size: 12px;
	}

	&:hover {
		.adpresso-tooltip-text, + .adpresso-tooltip-text {
			visibility: visible;
			opacity: 1;
		}
	}
}

/*.adpresso-tooltip:hover::after {*/
/*	content: attr(data-tooltip);*/
/*	position: absolute;*/
/*	z-index: 1000;*/
/*	left: 100%;*/
/*	top: 0;*/
/*	background: #fff;*/
/*	border: 1px solid #ccc;*/
/*	padding: 10px;*/
/*	white-space: nowrap;*/
/*	box-shadow: 0 0 8px rgba(0,0,0,0.2);*/
/*}*/

.adpresso-accordion-content-container.adpresso-accordion-closed,
.adpresso-accordion-content.adpresso-accordion-closed {
	display: none;
}

/* ==========================================================================
   Global Container & Settings-Header
   ========================================================================== */

// Haupt-Wrapper für die gesamte Seite
.adpresso-container-wrap {
	margin-right: 2em;
	font-size: $font-size-base;
}

.adpresso-settings-header {
	display: flex;
	align-items: center;
	gap: $space-3;
	margin-bottom: $space-2;
	padding-left: 1em;

	.adpresso-back-button {
		text-decoration: none;
		font-size: 2em;
		color: $color-text;
	}

	h1.adpresso-settings-title {
		font-size: 2em;
		font-weight: 600;
		color: $color-primary;
		margin: 0;
		padding: 0;
	}
}

/* ==========================================================================
   Settings-Tabs (Nav-Bar)
   ========================================================================== */

// 4. Tab Navigation (`.adpresso-tab-navigation`) ---

.adpresso-tab-navigation {
	@include mixins.flex-center;
	width: 100%;
	gap: $space-1;
	margin-bottom: 2em;

	a {
		text-decoration: none;
	}

	.adpresso-tab-item {
		flex-grow: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: $space-1 solid $color-divider;
		background-color: transparent;
		padding: 2em;
		cursor: pointer;
		transition: background-color 0.2s;

		&:hover, &:focus {
			border-bottom-color: #bf7200;
			outline: none;
			box-shadow: none;
		}

		&:has(.adpresso-square-btn:hover) {
			border-bottom-color: $color-divider;
		}

		&.is-active {
			border-bottom-color: $color-accent;

			&:hover, &:focus {
				border-bottom-color: #bf7200;
				outline: none;
				box-shadow: none;
			}

			.adpresso-tab-count {
				@include placeholders.color-button-active;
			}

			.adpresso-square-btn {
				@include placeholders.color-active;
			}

			.adpresso-pill__action {
				background: $color-accent2;
			}

			.adpresso-pill--split {
				border-color: $color-text-active;
			}
		}

		.adpresso-tab-count {
			font-size: 1.5em;
			font-weight: 500;
			padding: $space-3;
			min-width: 2em;
			border-style: solid;
			border-width: calc($border-small / 1.5 * $font-size-rate);

			&.adpresso-pill--split {
				display: inline-flex;
				font-size: 1.5em;
				font-weight: 500;
				line-height: 1;
				border: calc(0.12em / 1.5 * $font-size-rate) solid $color-icon;
				border-radius: 2em;
				overflow: hidden;
				min-width: 0;
				padding: 0;

				.adpresso-pill__count {
					padding-right: 0;
				}
			}
		}

		.adpresso-tab-label {
			color: $color-text-active;
			font-size: 2em;
			font-weight: 500;
			text-align: center;
			min-height: 2em;
			line-height: 2em;
		}

		// Resets native button styles so the label looks like the former span.
		.adpresso-tab-label--button {
			appearance: none;
			background: none;
			border: 0;
			margin: 0;
			padding: 0;
			font-family: inherit;
			letter-spacing: inherit;
			cursor: pointer;

			&:focus-visible {
				outline: 2px solid $color-text-active;
				outline-offset: 4px;
			}
		}

	}
}

.adpresso-settings-nav.adpresso-tab-navigation {
	width: auto;

	.adpresso-tab-item {
		justify-content: center;

		&.adpresso-settings-back, &.adpresso-settings-heading, &.adpresso-settings-arrow {
			border-bottom-color: $color-primary;
			color: $color-primary;
		}

		&.adpresso-settings-arrow {
			margin-right: -1em;

			> a {
				display: flex;
				align-items: center;
				height: 40px;
				width: 40px;
				color: $color-primary;
			}
		}

		&.adpresso-settings-heading {
			background-color: #eff7f9;
			cursor: auto;

			&:hover, &:focus {
				border-bottom-color: $color-primary;
			}

		}
	}
}

// Wrapper for the WordPress-Tab-Navigation
.adpresso-nav-tab-wrapper {
	border-bottom: 2px solid $color-border;
	display: flex;
	align-items: center;
	gap: $space-4;
	padding-left: 1em;
	margin-bottom: 2em;
	border-bottom-color: transparent;

	a.nav-tab {
		padding: 1em 0.4em;
		margin: 0;
		font-size: 1.5em;
		font-weight: 500;
		color: $color-text-active;
		background: none;
		border: none;
		border-bottom: 3px solid $color-icon;
		transition: color 0.2s ease, border-color 0.2s ease;

		&:hover {
			color: $color-primary;
			border-bottom-color: $color-accent;
		}

		&.nav-tab-active {
			color: $color-primary;
			background: none;
			border: none;
			border-bottom: 3px solid $color-primary;
			box-shadow: none;
		}
	}
}

/* ==========================================================================
   Settings-Sektionen (Accordion-Style)
   ========================================================================== */

.adpresso-tab-content {
	padding-left: 2em;
	padding-top: 2em;

	> .wrap {
		margin: 0;
	}

	// The <form>-Element will be our Grid-Container, identical to the modal.
	> div > form {
		display: grid;
		gap: 1em 4em;
		grid-template-columns: fit-content(220px) 1fr; // Title | Content
		padding-right: 2em;
		padding-bottom: 100px;
	}

	// Make it consistent to modal title
	h2.adpresso-section-title,
	h2.adpresso-accordion-trigger {
		align-items: flex-start;
		cursor: pointer;
		display: flex;
		font-weight: 600;
		gap: $space-3;
		grid-column: 1; // Title goes in column 1
		margin-top: 0;
		padding-bottom: 10px;
		white-space: nowrap;
		color: $color-text;
		min-width: 120px;
		font-size: 1.3em;

		&::before {
			content: "\f139"; // dashicons-arrow-right-alt2
			font-family: dashicons, serif;
			font-size: 2em;
			color: $color-text;
			transition: transform 0.2s ease-in-out;
			transform: rotate(0deg); // Close state

			@media (prefers-reduced-motion: reduce) {
				transition: none;
			}
		}

		&.is-open::before {
			transform: rotate(90deg);
		}

		&.is-premium {
			color: $color-premium;

			&::before {
				color: $color-premium;
			}
		}
	}

	h2.adpresso-section-title[data-controls-content$="_module_activation-content"] {
		visibility: hidden;
	}

	// Die Standard WP-Tabelle wird zum Inhalts-Container
	table.form-table,
	table.adpresso-accordion-content {
		grid-column: 2; // Content goes in column 2
		margin-top: 0;
		margin-bottom: 2em;

		&.adpresso-accordion-closed {
			display: none;
		}
	}

	p.submit {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: 2em;
		margin: 0;
		position: fixed;
		bottom: 0;
		left: calc(160px + 20px + calc(3em - 20px));
		right: calc(3em / $font-size-rate);
		width: auto;
		background-color: #fff;
		border-top: 0.4em solid #D88200 !important;
		padding: 2em !important;
		z-index: 900;


		body.folded &, body.auto-fold & {
			left: calc(160px + 20px + calc(3em - 20px));
		}

		[dir="rtl"] & {
			left: 0;
			right: var(--wp-admin--menu-width, 160px);
			text-align: left;

			body.folded &, body.auto-fold & {
				right: var(--wp-admin--menu-width-collapsed, 36px);
			}
		}

		input.button {
			line-height: 1.5em;
			font-size: 1.5em;
		}
	}

	p.submit input[data-adpresso-action="start-import"] {
		z-index: 901;
	}

	p.submit:has(input[data-adpresso-action="start-import"]) {
		background: transparent;
	}
}

.adpresso-editor-container {
	display: none;

	&.active {
		display: block;
	}
}

/** TODO: Replace .toplevel_page_adpresso with .admin_page_adpresso_settings */
.adpresso-tab-content .adpresso-field-wrapper {
	grid-template-columns: 1fr;

	> {
		label, div.adpresso-label-wrapper > label {
			grid-column: unset;

			&.is-premium {
				color: $color-premium;
			}
		}

		:not(label) {
			grid-column: 1;
		}
	}

	> *:not(:first-child) {
		margin-left: 1em;
	}
}

.adpresso-field-wrapper {
	margin-bottom: 10px;
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 5px 20px;

	> {
		label, h2, div.adpresso-label-wrapper {
			grid-column: 1;
			padding-left: 0 !important;
			font-size: $font-size;
		}

		:not(label, h2) {
			grid-column: 2;
		}
	}

	&__child {
		margin-left: 1em;
	}
}

.adpresso-container-wrap {
	padding-left: calc(3em - 20px);
}

.adpresso-app-container {
	font-size: $font-size-base;
	padding: 0 3em 2em calc(3em - 20px);
}

body {
	&.toplevel_page_adpresso, &.admin_page_adpresso-tools, &.adpresso_page_adpresso-statistics, &.adpresso_page_adpresso-tools {
		background-color: $color-white;
	}
}

/** Settings CSS Hack for the table
  * AdPresso Settings Layout Override
  * Reset WordPress font size with our base size.
 */
.adpresso-settings .form-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: $font-size-base;

	td, td, th {
		font-size: $font-size-base;
	}

	p, a {
		font-size: $font-size;

		&.adpresso-manual-link {
			font-size: 1em;
		}
	}
}

.adpresso-settings .form-table th {
	display: none !important;
}

.adpresso-settings .form-table td {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
}

.adpresso-settings .form-table tr {
	display: block;
	margin-bottom: 2em;
	padding-bottom: 0;
}

.adpresso-settings .form-table .adpresso-field-wrapper {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

.adpresso-settings .form-table .description,
.adpresso-settings .form-table .adpresso-field-description {
	color: #b1b1b1;
	font-size: $font-size;
	line-height: 1.25em;
	margin-top: 0;
}

.adpresso-toggle-control {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	gap: 1em;
}

.adpresso-toggle-label {
	font-size: $font-size;
}

.adpresso-auto-ads-status {
	padding: 1em;
	border: 0.12em solid $color-text-active;
	border-radius: 0.4em;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1em;

	.adpresso-hint {
		color: $color-accent2;
		font-weight: bold;
	}

	.adpresso-success-hint {
		color: $color-graph-three;
		font-weight: bold;
	}

	.adpresso-auto-ads-entities {
		display: flex;
		flex-direction: column;
		gap: 1em;

		.adpresso-card {
			min-height: calc(6em / $font-size-rate);
			min-width: 400px;
			justify-content: center;
			font-size: $font-size;
			background-color: $color-accent-superlight;

			&__main {
				gap: calc(1em / $font-size-rate);
				cursor: auto;

				.adpresso-card__notice {
					a {
						color: $color-text-active;
					}
				}
			}

			&:hover {
				background-color: $color-accent-superlight;
			}
		}
	}

	p.description {
		margin-left: 1em;
	}

	a {
		font-size: 1em !important;
	}
}

.adpresso-text {
	&.adpresso-color-primary {
		color: $color-primary;
	}

	&.adpresso-color-destructive {
		color: $color-accent2;
	}

	&.adpresso-color-error {
		color: $color-graph-five;
	}

	&.adpresso-color-grey {
		color: $color-text-grey;
	}
}

#wpfooter {
	margin-bottom: 9em;
	margin-left: calc(3em + 160px);
	padding-left: 0;
	padding-right: 0;
	margin-right: 3em;
}

.admin_page_adpresso-list-tables, .adpresso_page_adpresso-account, .adpresso_page_adpresso-tools {
	#wpfooter {
		position: relative;
	}
}

.adpresso-edit-link-wrapper {
	display: flex;
	align-items: center;
	gap: 1em;
}

.adpresso-modal-section-subtitle {
	margin-top: 0;
}

.adpresso-premium-label {
	color: $color-premium;

	a {
		color: $color-premium;
	}
}

tr.setting-field-highlight > td {
	box-shadow: 0 0 0 1em #eee;
	background-color: #eee;
	transition: background-color 0.3s ease-in-out,
	box-shadow 0.3s ease-in-out;
}

/*
 * Defines the offset from the top.
 */
tr:target, tr.setting-field-highlight {
	scroll-margin-top: 100px;
}

.adpresso-notification-box {
	padding: 1em;
	border-radius: 0.5em;
	border: 0.12em solid $color-text-active;
	display: flex;
	font-size: $font-size;

	a {
		color: $color-primary;
	}

	> p {
		margin: 0;
	}

	&::before {
		font-weight: 600;
		margin-right: 0.75em;
	}

	&.adpresso-success {
		border-color: $color-graph-three;
		background-color: $color-graph-three-light;

		&::before {
			content: "✓";
			color: $color-graph-three-dark;
		}
	}

	&.adpresso-error {
		border-color: $color-accent2;
		background-color: $color-accent2-light;

		&::before {
			content: "✕";
			color: $color-accent2-dark;
		}
	}

	&.adpresso-warning {
		border-color: $color-accent;
		background-color: $color-accent-superlight;

		&::before {
			content: "⚠";
			color: $color-golden-brown-dark;
		}
	}
}

.adpresso-code-wrapper {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	cursor: pointer;
}

.adpresso-code {
	background: $color-divider;
	padding: 0.5em 0.75em;
	border-radius: 0.25em;
	color: $color-text-active;
}

button.adpresso-copy-masked-link {
	display: flex;
	color: $color-icon;
	background: none;
	border: none;
	margin: 1em 0;
	gap: 0.5em;
	align-items: center;
	cursor: pointer;
}

// Keeps keyboard-focused fields clear of the fixed save bar.
html:has(.adpresso-tab-content p.submit) {
	scroll-padding-bottom: 120px;
}