/**
 * SpacePanel UI — Components
 *
 * Panels, Cards, Buttons, Badges, CTA, Tabellen, Navigation.
 * Referenziert ausschließlich Tokens aus tokens.css.
 *
 * Console-inspiriertes Designsystem mit farbigen Bars und Endkappen.
 */

/* ===========================
   Console Panel
   Das Hauptelement des Interfaces.
   Farbige linke Bar + dunkler Content-Bereich.
   =========================== */
.sp-panel {
	display: flex;
	background-color: var(--sp-color-panel);
	border-radius: var(--sp-radius-panel);
	overflow: hidden;
	box-shadow: var(--sp-shadow-panel);
}

.sp-panel__bar {
	width: var(--sp-sidebar-bar-width);
	min-width: var(--sp-sidebar-bar-width);
	background-color: var(--sp-color-amber);
	flex-shrink: 0;
}

.sp-panel__bar--lavender {
	background-color: var(--sp-color-lavender);
}

.sp-panel__bar--mauve {
	background-color: var(--sp-color-mauve);
}

.sp-panel__bar--periwinkle {
	background-color: var(--sp-color-periwinkle);
}

.sp-panel__bar--tangerine {
	background-color: var(--sp-color-tangerine);
}

.sp-panel__bar--sky {
	background-color: var(--sp-color-sky);
}

.sp-panel__bar--coral {
	background-color: var(--sp-color-coral);
}

.sp-panel__bar--sand {
	background-color: var(--sp-color-sand);
}

.sp-panel__content {
	flex: 1;
	padding: var(--sp-space-lg);
	min-width: 0;
}

.sp-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--sp-space-md);
}

.sp-panel__title {
	font-family: var(--sp-font-heading);
	font-size: var(--sp-text-lg);
	font-weight: var(--sp-weight-bold);
	color: var(--sp-color-text-heading);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 0;
}

.sp-panel__meta {
	font-size: var(--sp-text-xs);
	color: var(--sp-color-text-muted);
	font-family: var(--sp-font-mono);
}

/* Panel mit Top-Bar statt Side-Bar */
.sp-panel--top {
	flex-direction: column;
}

.sp-panel--top .sp-panel__bar {
	width: 100%;
	min-width: auto;
	height: var(--sp-bar-height-sm);
	border-radius: 0;
}

/* ===========================
   Command Button
   Pill-förmiger Button im Console-Stil
   =========================== */
.sp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-space-xs);
	padding: var(--sp-space-xs) var(--sp-space-xl);
	font-family: var(--sp-font-heading);
	font-size: var(--sp-text-sm);
	font-weight: var(--sp-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--sp-color-text-inverse);
	background-color: var(--sp-color-amber);
	border: none;
	border-radius: var(--sp-radius-endcap);
	cursor: pointer;
	transition: background-color var(--sp-transition-fast),
	            transform var(--sp-transition-fast);
	white-space: nowrap;
	text-decoration: none;
	line-height: 1;
	min-height: 40px;
}

.sp-btn:hover {
	background-color: var(--sp-color-amber-light);
}

.sp-btn:focus-visible {
	outline: 2px solid var(--sp-color-amber-light);
	outline-offset: 2px;
}

.sp-btn:active {
	transform: scale(0.97);
}

/* Button Varianten */
.sp-btn--secondary {
	background-color: var(--sp-color-periwinkle);
}

.sp-btn--secondary:hover {
	background-color: var(--sp-color-secondary-hover);
}

.sp-btn--lavender {
	background-color: var(--sp-color-lavender);
}

.sp-btn--lavender:hover {
	background-color: #b098d8;
}

.sp-btn--tangerine {
	background-color: var(--sp-color-tangerine);
}

.sp-btn--tangerine:hover {
	background-color: #f08858;
}

.sp-btn--sand {
	background-color: var(--sp-color-sand);
}

.sp-btn--sand:hover {
	background-color: var(--sp-color-sand-light);
}

.sp-btn--ghost {
	background-color: transparent;
	color: var(--sp-color-amber);
	border: 1px solid var(--sp-color-amber);
}

.sp-btn--ghost:hover {
	background-color: var(--sp-color-accent-muted);
	color: var(--sp-color-amber-light);
}

/* Größen */
.sp-btn--sm {
	padding: var(--sp-space-2xs) var(--sp-space-md);
	font-size: var(--sp-text-xs);
	min-height: 32px;
}

.sp-btn--lg {
	padding: var(--sp-space-sm) var(--sp-space-2xl);
	font-size: var(--sp-text-base);
	min-height: 48px;
}

/* ===========================
   Badge
   =========================== */
.sp-badge {
	display: inline-flex;
	align-items: center;
	padding: var(--sp-space-2xs) var(--sp-space-sm);
	font-family: var(--sp-font-mono);
	font-size: var(--sp-text-xs);
	font-weight: var(--sp-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--sp-color-text-inverse);
	background-color: var(--sp-color-amber);
	border-radius: var(--sp-radius-endcap);
	line-height: 1;
	white-space: nowrap;
}

.sp-badge--lavender {
	background-color: var(--sp-color-lavender);
}

.sp-badge--periwinkle {
	background-color: var(--sp-color-periwinkle);
}

.sp-badge--tangerine {
	background-color: var(--sp-color-tangerine);
}

.sp-badge--success {
	background-color: var(--sp-color-success);
}

.sp-badge--danger {
	background-color: var(--sp-color-danger);
}

.sp-badge--outline {
	background-color: transparent;
	color: var(--sp-color-amber);
	border: 1px solid currentColor;
}

/* ===========================
   Card
   =========================== */
.sp-card {
	display: flex;
	flex-direction: column;
	background-color: var(--sp-color-panel);
	border-radius: var(--sp-radius-panel);
	overflow: hidden;
	transition: box-shadow var(--sp-transition-base),
	            transform var(--sp-transition-base);
}

.sp-card:hover {
	box-shadow: var(--sp-shadow-lg);
	transform: translateY(-2px);
}

.sp-card__bar {
	height: var(--sp-bar-height-sm);
	background-color: var(--sp-color-amber);
}

.sp-card__bar--lavender {
	background-color: var(--sp-color-lavender);
}

.sp-card__bar--periwinkle {
	background-color: var(--sp-color-periwinkle);
}

.sp-card__bar--tangerine {
	background-color: var(--sp-color-tangerine);
}

.sp-card__image {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.sp-card__body {
	padding: var(--sp-space-lg);
	flex: 1;
	display: flex;
	flex-direction: column;
}

.sp-card__title {
	font-family: var(--sp-font-heading);
	font-size: var(--sp-text-md);
	font-weight: var(--sp-weight-bold);
	color: var(--sp-color-text-heading);
	margin-bottom: var(--sp-space-xs);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.sp-card__title a {
	color: inherit;
	transition: color var(--sp-transition-fast);
}

.sp-card__title a:hover {
	color: var(--sp-color-accent);
}

.sp-card__excerpt {
	font-size: var(--sp-text-sm);
	color: var(--sp-color-text-muted);
	margin-bottom: var(--sp-space-md);
	flex: 1;
}

.sp-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: var(--sp-space-sm);
	border-top: 1px solid var(--sp-color-divider);
	font-size: var(--sp-text-xs);
	color: var(--sp-color-text-muted);
}

/* ===========================
   Section Header
   Titel-Zeile mit farbiger Bar
   =========================== */
.sp-section-header {
	display: flex;
	align-items: center;
	gap: var(--sp-space-md);
	margin-bottom: var(--sp-space-xl);
}

.sp-section-header__bar {
	width: 6px;
	height: 32px;
	background-color: var(--sp-color-amber);
	border-radius: var(--sp-radius-endcap);
	flex-shrink: 0;
}

.sp-section-header__bar--lavender {
	background-color: var(--sp-color-lavender);
}

.sp-section-header__bar--periwinkle {
	background-color: var(--sp-color-periwinkle);
}

.sp-section-header__title {
	font-family: var(--sp-font-heading);
	font-size: var(--sp-text-2xl);
	font-weight: var(--sp-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--sp-color-text-heading);
	margin-bottom: 0;
}

.sp-section-header__line {
	flex: 1;
	height: 2px;
	background: linear-gradient(
		to right,
		var(--sp-color-panel-border),
		transparent
	);
}

/* ===========================
   CTA Strip
   Horizontaler Balken mit Aufforderung
   =========================== */
.sp-cta-strip {
	display: flex;
	flex-direction: column;
	gap: var(--sp-space-md);
	padding: var(--sp-space-lg) var(--sp-space-xl);
	background-color: var(--sp-color-panel);
	border-left: 4px solid var(--sp-color-amber);
	border-radius: 0 var(--sp-radius-panel) var(--sp-radius-panel) 0;
}

@media (min-width: 768px) {
	.sp-cta-strip {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.sp-cta-strip__text {
	font-size: var(--sp-text-md);
	font-weight: var(--sp-weight-medium);
	color: var(--sp-color-text-heading);
}

.sp-cta-strip__text small {
	display: block;
	font-size: var(--sp-text-sm);
	color: var(--sp-color-text-muted);
	margin-top: var(--sp-space-2xs);
}

/* ===========================
   Data Block
   Zahlenwert mit Label (KPIs)
   =========================== */
.sp-data-block {
	display: flex;
	flex-direction: column;
	gap: var(--sp-space-2xs);
}

.sp-data-block__value {
	font-family: var(--sp-font-mono);
	font-size: var(--sp-text-3xl);
	font-weight: var(--sp-weight-bold);
	color: var(--sp-color-accent);
	line-height: 1;
}

.sp-data-block__label {
	font-size: var(--sp-text-xs);
	font-weight: var(--sp-weight-medium);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sp-color-text-muted);
}

/* ===========================
   Console Divider
   Dekorative horizontale Trennlinie
   =========================== */
.sp-divider {
	display: flex;
	align-items: center;
	gap: var(--sp-bar-gap);
	height: var(--sp-bar-height-sm);
	margin: var(--sp-space-xl) 0;
}

.sp-divider__segment {
	height: 100%;
	border-radius: var(--sp-radius-endcap);
}

.sp-divider__segment:nth-child(1) {
	flex: 0.1;
	background-color: var(--sp-color-mauve);
}

.sp-divider__segment:nth-child(2) {
	flex: 1;
	background-color: var(--sp-color-lavender);
}

.sp-divider__segment:nth-child(3) {
	flex: 0.15;
	background-color: var(--sp-color-amber);
}

/* ===========================
   Comparison Table
   Gut für Affiliate-Seiten
   =========================== */
.sp-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--sp-radius-panel);
	border: 1px solid var(--sp-color-panel-border);
}

.sp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--sp-text-sm);
}

.sp-table th {
	background-color: var(--sp-color-panel);
	padding: var(--sp-space-sm) var(--sp-space-md);
	font-weight: var(--sp-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: var(--sp-text-xs);
	color: var(--sp-color-text-heading);
	text-align: left;
	border-bottom: 2px solid var(--sp-color-amber);
	white-space: nowrap;
}

.sp-table td {
	padding: var(--sp-space-sm) var(--sp-space-md);
	border-bottom: 1px solid var(--sp-color-divider);
	color: var(--sp-color-text);
	vertical-align: middle;
}

.sp-table tbody tr:hover {
	background-color: var(--sp-color-accent-muted);
}

.sp-table tbody tr:last-child td {
	border-bottom: none;
}

/* ===========================
   Navigation Cluster
   Sidebar-Navigation im Console-Stil
   =========================== */
.sp-nav-cluster {
	display: flex;
	flex-direction: column;
	gap: var(--sp-bar-gap);
}

.sp-nav-cluster__item {
	display: flex;
	align-items: center;
	gap: var(--sp-space-sm);
	padding: var(--sp-space-xs) var(--sp-space-md);
	background-color: var(--sp-color-panel);
	border-radius: var(--sp-radius-md);
	font-size: var(--sp-text-sm);
	font-weight: var(--sp-weight-medium);
	color: var(--sp-color-text);
	transition: background-color var(--sp-transition-fast),
	            color var(--sp-transition-fast);
}

.sp-nav-cluster__item:hover {
	background-color: var(--sp-color-accent-muted);
	color: var(--sp-color-accent);
}

.sp-nav-cluster__item--active {
	border-left: 3px solid var(--sp-color-amber);
	color: var(--sp-color-accent);
}

.sp-nav-cluster__dot {
	width: 8px;
	height: 8px;
	border-radius: var(--sp-radius-full);
	background-color: var(--sp-color-amber);
	flex-shrink: 0;
}

/* ===========================
   WordPress Widgets (Sidebar)
   =========================== */
.widget {
	margin-bottom: var(--sp-space-lg);
}

.widget-title {
	font-size: var(--sp-text-sm);
	font-weight: var(--sp-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--sp-color-amber);
	margin-bottom: var(--sp-space-md);
	padding-bottom: var(--sp-space-xs);
	border-bottom: 2px solid var(--sp-color-panel-border);
}

/* ===========================
   Pagination
   =========================== */
.sp-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-bar-gap);
	padding: var(--sp-space-xl) 0;
}

.sp-pagination__link,
.sp-pagination__current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 var(--sp-space-xs);
	font-family: var(--sp-font-mono);
	font-size: var(--sp-text-sm);
	font-weight: var(--sp-weight-semibold);
	border-radius: var(--sp-radius-endcap);
	transition: background-color var(--sp-transition-fast);
}

.sp-pagination__link {
	color: var(--sp-color-text-muted);
	background-color: var(--sp-color-panel);
}

.sp-pagination__link:hover {
	background-color: var(--sp-color-accent-muted);
	color: var(--sp-color-accent);
}

.sp-pagination__current {
	color: var(--sp-color-text-inverse);
	background-color: var(--sp-color-amber);
}

/* ===========================
   Article Meta (Single Post)
   =========================== */
.sp-article-header {
	margin-bottom: var(--sp-space-xl);
}

.sp-article-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-space-xs);
	margin-top: var(--sp-space-md);
}

.sp-article-image {
	margin-bottom: var(--sp-space-xl);
	border-radius: var(--sp-radius-panel);
	overflow: hidden;
}

.sp-article-image__img {
	width: 100%;
	height: auto;
	display: block;
}

.sp-article-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-space-xs);
	margin-top: var(--sp-space-xl);
}

.sp-article-content {
	min-width: 0;
}

.sp-article-content .sp-panel {
	margin-bottom: var(--sp-space-xl);
}

/* ===========================
   Post Navigation
   =========================== */
.sp-post-nav {
	margin-top: var(--sp-space-xl);
}

.sp-post-nav__links {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-space-md);
}

@media (min-width: 768px) {
	.sp-post-nav__links {
		grid-template-columns: 1fr 1fr;
	}
}

.sp-post-nav__link {
	display: flex;
	flex-direction: column;
	gap: var(--sp-space-2xs);
	padding: var(--sp-space-md) var(--sp-space-lg);
	background-color: var(--sp-color-panel);
	border-radius: var(--sp-radius-panel);
	border-left: 4px solid var(--sp-color-amber);
	text-decoration: none;
	transition: background-color var(--sp-transition-fast),
	            border-color var(--sp-transition-fast);
}

.sp-post-nav__link:hover {
	background-color: var(--sp-color-accent-muted);
}

.sp-post-nav__link--next {
	border-left: none;
	border-right: 4px solid var(--sp-color-periwinkle);
	text-align: right;
}

.sp-post-nav__label {
	font-size: var(--sp-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--sp-color-text-muted);
	font-weight: var(--sp-weight-semibold);
}

.sp-post-nav__title {
	font-size: var(--sp-text-sm);
	color: var(--sp-color-text-heading);
	font-weight: var(--sp-weight-medium);
}

/* ===========================
   Search Form
   =========================== */
.sp-search-form__inner {
	display: flex;
	gap: var(--sp-space-sm);
	align-items: stretch;
}

.sp-search-form__input {
	flex: 1;
	min-width: 0;
}

@media (max-width: 639px) {
	.sp-search-form__inner {
		flex-direction: column;
	}
}

/* ===========================
   WordPress Core Alignment
   =========================== */
.entry-content .alignwide {
	margin-left: calc(-1 * var(--sp-space-xl));
	margin-right: calc(-1 * var(--sp-space-xl));
	max-width: calc(100% + var(--sp-space-xl) * 2);
}

.entry-content .alignfull {
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	max-width: 100vw;
	width: 100vw;
}

.entry-content .aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.entry-content .alignleft {
	float: left;
	margin-right: var(--sp-space-lg);
	margin-bottom: var(--sp-space-md);
}

.entry-content .alignright {
	float: right;
	margin-left: var(--sp-space-lg);
	margin-bottom: var(--sp-space-md);
}

/* ===========================
   WordPress Comments Styling
   =========================== */
.comments-area {
	margin-top: var(--sp-space-2xl);
}

.comments-title {
	font-size: var(--sp-text-xl);
	margin-bottom: var(--sp-space-lg);
}

.comment-list {
	list-style: none;
	padding: 0;
}

.comment-list .comment {
	padding: var(--sp-space-lg);
	margin-bottom: var(--sp-space-md);
	background-color: var(--sp-color-panel);
	border-radius: var(--sp-radius-panel);
	border-left: 4px solid var(--sp-color-lavender);
}

.comment-author {
	font-weight: var(--sp-weight-semibold);
	color: var(--sp-color-text-heading);
	margin-bottom: var(--sp-space-xs);
}

.comment-meta {
	font-size: var(--sp-text-xs);
	color: var(--sp-color-text-muted);
	margin-bottom: var(--sp-space-sm);
}

.comment-content p {
	font-size: var(--sp-text-base);
}

.comment-respond {
	margin-top: var(--sp-space-xl);
}

.comment-form label {
	display: block;
	margin-bottom: var(--sp-space-2xs);
}

.comment-form .submit {
	margin-top: var(--sp-space-md);
}

/* ===========================
   WordPress Pagination Override
   (native pagination styling)
   =========================== */
.nav-links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-bar-gap);
	flex-wrap: wrap;
}

.nav-links a,
.nav-links span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--sp-space-sm);
	font-family: var(--sp-font-mono);
	font-size: var(--sp-text-sm);
	font-weight: var(--sp-weight-semibold);
	border-radius: var(--sp-radius-endcap);
	text-decoration: none;
	transition: background-color var(--sp-transition-fast);
}

.nav-links a {
	color: var(--sp-color-text-muted);
	background-color: var(--sp-color-panel);
}

.nav-links a:hover {
	background-color: var(--sp-color-accent-muted);
	color: var(--sp-color-accent);
}

.nav-links .current {
	color: var(--sp-color-text-inverse);
	background-color: var(--sp-color-amber);
}

.nav-links .dots {
	background: none;
	color: var(--sp-color-text-muted);
}