/**
 * AdPresso - React App Main Stylesheet (SCSS)
 * ===========================================
 *
 * Implements the full UI design based on the provided specifications.
 * Uses a single base font-size on the root app container and relative `em` units
 * throughout for a truly scalable and maintainable UI.
 */
@use '../../../design/scss/_variables.scss' as *;
@use '../../../design/scss/_mixins.scss';
@use '../../../design/scss/_placeholders.scss';
@use '../../../design/partials/header.scss';


// --- 2. Main App Layout & Base Font Size ---

body.admin_page_adpresso-list-tables {
	background-color: $color-white;
}

.adpresso-app-container {

}


// NOT USED ANYMORE
// --- 5. Filter Bar (`.adpresso-filter-bar`) ---

//.adpresso-filter-bar {
//	display: flex;
//	gap: 2em;
//	margin-bottom: 1.5em;
//
//	.components-base-control {
//		display: flex;
//		align-items: center;
//		gap: $space-4;
//	}
//
//	.components-select-control__input {
//		font-size: 1.25em;
//		border-radius: $space-2;
//		border-width: 0.2em;
//	}
//}

.adpresso-filter-popover {
	top: -63px !important;
	left: -1em !important;
	font-size: $font-size-base;

	.components-popover__content {
		box-shadow: none;

		.adpresso-filter-popover-content {
			display: flex;
			flex: 1 1 auto;
			overflow: hidden;

			.adpresso-filter-popover-options {
				flex: 1 1 auto;
				overflow-y: auto;
			}
		}
	}

	.adpresso-filter-popover-actions > button.adpresso-btn-action {
		font-size: 1.25em;
		padding: 1em;
		border-width: 0.1em;
	}

	.adpresso-filter-group-label {
		padding: 1em;
		color: $color-white;
		background-color: $color-text-light;
		position: sticky;
		top: 0;
		z-index: 1;
		font-size: $font-size;
	}

	// Entferne den oberen Border bei der allerersten Gruppe
	.adpresso-filter-group:first-child .adpresso-filter-group-label {
		border-top: none;
	}

	.adpresso-filter-popover-search {
		padding: 0.4em;
		background-color: white;

		.adpresso-th__icon {
			color: $color-primary;
		}

		.adpresso-input-reset {
			border: none;
			padding: 0;
			margin: 0;
			width: 100%;
			flex-grow: 1;
			font-size: $font-size;
			line-height: inherit;

			&::placeholder {
				color: $color-text;
			}

			&:focus {
				outline: none !important;
				box-shadow: none !important;
			}
		}
	}

	.components-popover__content {
		@extend %card-popover;
		min-width: 300px;
		width: auto;
		overflow: visible !important;
		display: flex;
		flex-direction: column;
	}

	&-header {
		@include mixins.flex-center;
		gap: $space-4;
		border-bottom: calc(0.12em * $font-size-rate) solid $color-primary-light;
		padding-bottom: $space-4;
		width: 100%;

		.components-text-control__input {
			border-radius: $space-3;
			border-color: $color-primary;
			border-width: $border-small;
			height: 36px;

			&:focus {
				border-color: $color-primary;
				box-shadow: none;
				outline: none;
			}
		}

		&:empty {
			border: none;
		}
	}

	&-subheader {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: $space-4;
		border-bottom: $border-md solid $color-primary;

		.left {
			display: inline-flex;
			align-items: center;
			gap: $space-4;
		}

		.left, .right {
			color: $color-text-light;
		}

		.components-checkbox-control__input-container {
			margin-right: 0;
		}

		.label, span.right {
			font-size: $font-size;
		}
	}

	&-search {
		flex: 1 1 auto;
		margin: 0; // WP setzt gerne Margins, neutralisieren
	}

	&-actions {
		display: flex;
		gap: $space-4;

		.components-button {
			@include placeholders.btn-reset;
			height: 32px;
			line-height: 30px;
			padding: 0 $space-3;
			border-radius: $radius-md;
		}

		.components-button.is-primary {
			background-color: $color-primary;
			color: $color-white;

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

		.components-button.is-secondary {
			background-color: transparent;
			box-shadow: inset 0 0 0 $border-small $color-primary, 0 0 0 currentColor;
			color: $color-primary;

			&:focus {
				box-shadow: inset 0 0 0 $border-small $color-primary, 0 0 0 currentColor;
			}

			&:hover {
				background-color: transparent;
			}
		}
	}

	&-options {
		.adpresso-filter-option {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: $space-4;
			cursor: pointer;
			border-bottom: $border-small solid $color-primary-light;
			color: $color-text;
			padding: $space-4;
			border-radius: 0;

			.components-checkbox-control__input-container {
				margin-right: $space-4;
			}

			/* CheckboxControl-Container enger & flexend */
			.components-base-control {
				margin: 0;
				flex: 1 1 auto;
			}

			&:hover {
				background: #dae9ec;
			}

			&.is-selected {
				background: #c5dbe0;
			}

			&:last-child {
				border-bottom: none;
			}

			&__count {
				@include placeholders.pill;
				flex: 0 0 auto;
				min-width: 2.5em;
				height: 2em;
				padding: 0 $space-3;
				border: $border-small solid $color-text-light;
				font-weight: 600;
				color: $color-text-light;
				line-height: 2em;
				font-size: $font-size;
			}
		}
	}
	.adpresso-filter-popover-calendar {
		font-size: $font-size;
	}
}


// --- 6. Data Table (`.adpresso-data-table`) ---

.adpresso-data-table {
	width: 100%;
	background: $color-white;
	border-spacing: 0;
	color: $color-text;
	border-bottom: $space-1 solid $color-accent;
	margin-bottom: 2em;

	a {
		&:focus {
			box-shadow: 0 0 0 2px #fff, 0 0 0 4px $color-primary;
			outline: none;
		}
	}

	th, td {
		font-size: $font-size;
		line-height: 2em;
		color: $color-text;
		vertical-align: top;
		//padding: calc(3.7em / $font-size-rate) calc(1em / $font-size-rate) calc(2em / $font-size-rate);
	}

	thead {
		th, td {
			border-bottom: calc($space-1 / $font-size-rate) solid $color-accent;
			text-align: left;
			font-weight: 400;
		}

		th {
			padding: 2em 1em 1em;
		}
	}

	tbody {
		td {
			padding: 3.4em 1em 0.1em;

			&.column-title {
				strong {
					font-size: 1em;
				}
			}
		}

		tr:not(:last-of-type) {
			td {
				border-bottom: $border-small solid $color-divider;
			}
		}
	}

	.check-column {
		padding-left: 2em;
		width: 2.2em;
		padding-right: $space-4;

		input[type="checkbox"] {
			width: 1.5em;
			height: 1.5em;
			border-radius: $radius-xs;
		}


	}

	th.column-cb {
		background: transparent !important;
		vertical-align: middle;
	}

	td.column-type {
		padding-bottom: 0.3em;

		.adpresso-tooltip-wrapper {
			transform: translateY(-1.3em);
			display: block;
		}
	}

	td.column-title:focus-within, tr:hover {
		.row-actions {
			left: -1em;
		}
	}

	td.column-title {
		> div {
			position: relative;
		}

		.row-actions {
			border: 0.12em solid $color-icon;
			border-radius: $radius-sm;
			color: $color-text;
			display: flex;
			align-items: center;
			width: auto;
			position: absolute;
			padding: 1em;
			margin-top: 1em;
			background-color: $color-white;
			z-index: 1;

			> span {
				display: flex;
				font-size: 1em;

				&:after {
					content: "|";
					padding: 0 .5em;
				}

				&:last-of-type:after {
					content: "";
					padding: 0
				}

				> button {
					white-space: nowrap;

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

				.adpresso-premium-label {
					display: inline-flex;
					flex-direction: row;
					gap: 0.5em;
					align-items: center;
				}
			}
		}
	}

	.column-preview img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	a {
		text-decoration: none;
		color: $color-text;
	}

	.used-in-section {
		ul {
			margin: 0 0 $space-4;

			li {
				margin: 0;
			}
		}
	}

	.used-in-section-placements {
		a {
			color: $color-primary;
		}

		> strong {
			background-color: $color-primary;
		}
	}

	.used-in-section-groups {
		a {
			color: $color-accent;
		}

		> strong {
			background-color: $color-accent;
		}
	}

	.components-checkbox-control__input[type=checkbox] {
		appearance: auto;
		background-color: $color-primary;

		&:focus {
			background-color: $color-primary;
		}
	}

	/* Chip-Icon: bei aktivem Filter wird "no" gezeigt, Cursor deutlich */
	.adpresso-chip {
		cursor: pointer;

		.adpresso-th__icon {
			color: $color-icon;
			@include mixins.flex-center;
			font-size: 2em;
			width: auto;
			height: auto;
			margin-top: -2px;
			margin-bottom: -2px;
		}

		.adpresso-th__icon.dashicons-no {
			background-color: $color-white;
			border-radius: $radius-pill;
			color: $color-primary;
			line-height: 1;
			@include mixins.flex-center;
		}

		&.is-active {
			border-color: $color-primary;
			background: $color-primary;

			span {
				color: white;
			}

			input {
				background-color: $color-primary;
				color: $color-white;
			}

			.adpresso-th__icon {
				cursor: pointer;
			}
		}

		&:focus {
			box-shadow: none;
		}
	}

	.adpresso-th {
		padding-right: $space-4;
		vertical-align: middle;

		&__inner {
			@include mixins.flex-center;
			gap: $space-2;

			.adpresso-input-reset {
				padding: 0;
				margin: 0;
				width: 100%;
				flex-grow: 1;
				line-height: inherit;

				&::placeholder {
					color: $color-text;
				}

				&:focus {
					outline: none !important;
					box-shadow: none !important;
				}

				border: 0;
				font-size: 1.25em;
				height: auto;
				min-height: auto;

				&::placeholder {
					color: $color-text;
					font-weight: 400;
				}

				&:focus {
					box-shadow: none;
				}
			}
		}

		.dashicon {
			color: $color-icon;
		}

		.adpresso-th__label {
			font-size: 1.25em;
			color: $color-text;
			white-space: nowrap;
		}

		// Chip specific CSS
		&__chip {

		}
	}

	.adpresso-cell-conditions {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5em;
	}

	&.selection-table {
		background-color: #eff7f9;
		border-bottom: none;
		margin-bottom: 0;

		thead {
			th {
				color: #5B8B99;
				padding: 1em;
				border-bottom: 0.12em solid #004F66;
			}
		}

		tbody {

			tr {
				&:hover {
					background-color: $color-primary-light;
				}
				&.is-selected {
					background-color: $color-teal-very-bright;
				}

				td {
					align-items: center;
					cursor: pointer;
					border-bottom: 0.12em solid $color-primary-light;
					color: #222;
					border-radius: 0;
					padding: 3.1em 1em 0.1em;

					&.column-weight > div {
						transform: translateY(-0.7em);
					}

				}
			}

			tr:last-of-type {
				td {
					border-bottom: none;
				}
			}

		}
	}
}

.adpresso-table-wrapper.selection-table {
	border-radius: 0.5em;
	border: 0.12em solid #004F66;
	padding: 1em;
	background-color: #eff7f9;
}

.adpresso-table-footer {
	padding-left: 2em;
}

.adpresso-data-table-container {
	position: relative;
}

/* halbtransparentes Overlay mit Spinner zentriert */
.adpresso-reloading-overlay {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.65);
	@include mixins.flex-center;
	z-index: 3;
	pointer-events: all;
}

/* optional: Body abdunkeln ohne Header */
.adpresso-data-table-container.is-reloading table.adpresso-data-table tbody {
	opacity: .45;
}

.adpresso-empty-row td {
	text-align: center;
}

.adpresso-empty-message {
	font-weight: 600;
}

/* GANZE SPALTE einfärben (Header + Zellen) */
.adpresso-data-table th.is-filter-active,
.adpresso-data-table td.is-filter-active {
	background: $color-primary-light !important; /* aus deinem Screenshot */
}