/**
 * SOF2 CVAR Database — cvar-database.css
 *
 * Self-contained styles. All selectors are prefixed with .sof2-cvar-
 * to avoid collisions with the active WordPress theme.
 */

/* ── Custom properties ────────────────────────────────────────────────────── */
.sof2-cvar-db {
	--sof2-bg:           #0d1117;
	--sof2-surface:      #161b22;
	--sof2-surface-alt:  #1c2128;
	--sof2-border:       #30363d;
	--sof2-border-faint: #21262d;
	--sof2-text:         #c9d1d9;
	--sof2-text-muted:   #8b949e;
	--sof2-text-dim:     #999999;
	--sof2-accent:       #bf864c;
	--sof2-accent-dim:   #7a6218;
	--sof2-blue:         #79c0ff;
	--sof2-link:         #58a6ff;
	--sof2-green:        #56d364;
	--sof2-green-bg:     #1a4731;
	--sof2-green-border: #2ea043;
	--sof2-red:          #f85149;
	--sof2-mono:         'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	--sof2-radius:       6px;
	--sof2-radius-sm:    4px;

	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: var(--sof2-text);
	background: var(--sof2-bg);
	max-width: 1100px;
	margin: 0 auto;
	padding: 20px;
	box-sizing: border-box;
}

.sof2-cvar-db *,
.sof2-cvar-db *::before,
.sof2-cvar-db *::after {
	box-sizing: inherit;
}

/*
 * Force the HTML `hidden` attribute to always hide elements inside the plugin.
 *
 * Problem: many WordPress themes contain rules like `section { display: block }`
 * which override the browser's built-in `[hidden] { display: none }` for
 * semantic elements, while leaving generic divs alone.  Adding `!important`
 * here wins that specificity battle unconditionally.
 *
 * This covers every use of `hidden` in the plugin:
 *   - entry body panels  (accordion collapsed state)
 *   - category sections  (filtered out by search)
 *   - cvar entry rows    (filtered out by search)
 *   - no-results message (shown/hidden by search)
 */
.sof2-cvar-db [hidden] {
	display: none !important;
}

/* ── Search bar ───────────────────────────────────────────────────────────── */
.sof2-cvar-db__search-wrap {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--sof2-surface);
	border: 1px solid var(--sof2-border);
	border-radius: var(--sof2-radius);
	padding: 10px 14px;
	margin-bottom: 20px;
	box-shadow: 0 4px 16px rgba(0,0,0,.4);
}

.sof2-cvar-db__search-icon {
	flex-shrink: 0;
	color: var(--sof2-text-dim);
}

.sof2-cvar-db__search-input {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: none;
	outline: none;
	font-size: 15px;
	font-family: inherit;
	color: var(--sof2-text);
}

.sof2-cvar-db__search-input::placeholder {
	color: var(--sof2-text-dim);
}

.sof2-cvar-db__search-count {
	flex-shrink: 0;
	font-size: 12px;
	color: var(--sof2-text-muted);
	white-space: nowrap;
}

.sof2-cvar-db__search-clear {
	flex-shrink: 0;
	background: none;
	border: none;
	color: var(--sof2-text-muted);
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	padding: 2px 6px;
	border-radius: var(--sof2-radius-sm);
	font-family: inherit;
	transition: background 0.12s, color 0.12s;
}

.sof2-cvar-db__search-clear:hover {
	background: var(--sof2-surface-alt);
	color: var(--sof2-text);
}

/* ── Category navigation ──────────────────────────────────────────────────── */
.sof2-cvar-db__cat-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 32px;
}

.sof2-cvar-db__cat-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 13px;
	border-radius: 20px;
	background: var(--sof2-surface);
	border: 1px solid var(--sof2-accent);
	color: var(--sof2-accent);
	text-decoration: none !important;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	transition: background 0.12s, color 0.12s, border-color 0.12s, opacity 0.12s;
	white-space: nowrap;
}

.sof2-cvar-db__cat-link:hover {
	background: var(--sof2-surface-alt);
	border-color: var(--sof2-border);
	color: var(--sof2-text-muted);
	text-decoration: none !important;
}

.sof2-cvar-db__cat-link.is-empty {
	opacity: 0.3;
	pointer-events: none;
}

.sof2-cvar-db__cat-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 16px;
	padding: 0 5px;
	background: var(--sof2-surface-alt);
	border-radius: 10px;
	font-size: 10px;
	color: var(--sof2-text-dim);
	line-height: 1;
}

/* ── No-results message ───────────────────────────────────────────────────── */
.sof2-cvar-db__no-results {
	text-align: center;
	padding: 48px 20px;
	color: var(--sof2-text-muted);
	font-size: 15px;
	margin: 0;
}

/* ── Category section ─────────────────────────────────────────────────────── */
.sof2-cvar-db__section {
	margin-bottom: 44px;
	scroll-margin-top: 80px; /* offset for sticky search bar */
}

.sof2-cvar-db__section-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px 0;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--sof2-border-faint);
	font-size: 13px;
	font-weight: 700;
	color: var(--sof2-accent);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.sof2-cvar-db__section-count {
	font-size: 11px;
	font-weight: 400;
	color: var(--sof2-text-dim);
	text-transform: none;
	letter-spacing: 0;
}

.sof2-cvar-db__section-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

/* ── CVAR entry ───────────────────────────────────────────────────────────── */
.sof2-cvar-entry {
	border: 1px solid var(--sof2-border-faint);
	border-radius: var(--sof2-radius-sm);
	overflow: hidden;
	transition: border-color 0.15s;
	scroll-margin-top: 80px;
}

.sof2-cvar-entry:target {
	border-color: var(--sof2-accent-dim);
	box-shadow: 0 0 0 3px rgba(201,162,39,.12);
}

.sof2-cvar-entry.is-open {
	border-color: var(--sof2-accent-dim);
}

/* Entry header (button) */
.sof2-cvar-entry__header {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	background: var(--sof2-surface);
	border: none;
	text-align: left;
	padding: 9px 14px;
	cursor: pointer;
	color: inherit;
	font-size: inherit;
	font-family: inherit;
	line-height: 1.4;
	transition: background 0.1s;
}

.sof2-cvar-entry__header:hover,
.sof2-cvar-entry__header:focus-visible {
	background: var(--sof2-surface-alt);
	outline: none;
}

.sof2-cvar-entry__header:focus-visible {
	box-shadow: inset 0 0 0 2px var(--sof2-link);
}

.sof2-cvar-entry.is-open .sof2-cvar-entry__header {
	background: var(--sof2-surface-alt);
}

/* CVAR name */
.sof2-cvar-entry__name {
	flex-shrink: 0;
	min-width: 220px;
	font-family: var(--sof2-mono);
	font-size: 14px;
	font-weight: 600;
	color: var(--sof2-blue);
	letter-spacing: 0.01em;
}

/* Short description (collapsed preview) */
.sof2-cvar-entry__desc {
	flex: 1;
	min-width: 0;
	font-size: 14px;
	color: var(--sof2-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Toggle indicator */
.sof2-cvar-entry__toggle {
	flex-shrink: 0;
	margin-left: auto;
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sof2-text-dim);
	font-size: 18px;
	line-height: 1;
	transition: transform 0.18s ease;
	user-select: none;
}

.sof2-cvar-entry__toggle::before {
	content: '+';
	display: block;
}

.sof2-cvar-entry.is-open .sof2-cvar-entry__toggle {
	transform: rotate(45deg);
}

/* Entry body (expanded details) */
.sof2-cvar-entry__body {
	background: var(--sof2-bg);
	padding: 14px 18px 16px;
	border-top: 1px solid var(--sof2-border-faint);
}

/* Details definition list */
.sof2-cvar-entry__details {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.sof2-cvar-entry__row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	font-size: 14px !important;
}

.sof2-cvar-entry__row dt {
	flex-shrink: 0;
	min-width: 100px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--sof2-text-dim);
	padding-top: 3px;
}

.sof2-cvar-entry__row dd {
	margin: 0;
	flex: 1;
	min-width: 0;
	color: var(--sof2-text);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

/* Inline code blocks */
.sof2-cvar-entry__code {
	font-family: var(--sof2-mono);
	font-size: 12px;
	background: var(--sof2-surface);
	border: 1px solid var(--sof2-border);
	border-radius: var(--sof2-radius-sm);
	padding: 2px 7px;
	color: #e6edf3;
	word-break: break-all;
}

.sof2-cvar-entry__code--recommended {
	color: var(--sof2-green);
	border-color: var(--sof2-green-border);
	background: var(--sof2-green-bg);
}

/* Notes field */
.sof2-cvar-entry__notes {
	color: var(--sof2-text-muted);
	font-style: italic;
}

/* Copy button */
.sof2-cvar-entry__copy {
	flex-shrink: 0;
	padding: 2px 9px;
	background: var(--sof2-surface-alt);
	border: 1px solid var(--sof2-border);
	border-radius: var(--sof2-radius-sm);
	color: var(--sof2-text-muted);
	font-size: 11px;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.12s, color 0.12s, border-color 0.12s;
	line-height: 1.6;
}

.sof2-cvar-entry__copy:hover {
	background: var(--sof2-border);
	color: var(--sof2-text);
}

.sof2-cvar-entry__copy.is-copied {
	background: var(--sof2-green-bg);
	border-color: var(--sof2-green-border);
	color: var(--sof2-green);
}

.sof2-cvar-entry__copy.is-failed {
	background: #2d1214;
	border-color: #6e1e22;
	color: var(--sof2-red);
}

/* Related CVARs */
.sof2-cvar-entry__related {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.sof2-cvar-entry__rel-link {
	font-family: var(--sof2-mono);
	font-size: 12px;
	color: var(--sof2-link);
	text-decoration: none;
	background: var(--sof2-surface);
	border: 1px solid var(--sof2-border);
	border-radius: var(--sof2-radius-sm);
	padding: 2px 8px;
	transition: border-color 0.12s, color 0.12s, background 0.12s;
}

.sof2-cvar-entry__rel-link:hover {
	border-color: var(--sof2-link);
	background: rgba(88,166,255,.08);
	text-decoration: none;
}

/* ── Error state ──────────────────────────────────────────────────────────── */
.sof2-cvar-error {
	padding: 12px 16px;
	background: #2d1214;
	border: 1px solid #6e1e22;
	border-radius: var(--sof2-radius);
	color: var(--sof2-red);
	font-size: 14px;
	margin: 0;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
	.sof2-cvar-db {
		padding: 12px;
	}

	.sof2-cvar-entry__name {
		min-width: 150px;
		font-size: 12px;
	}

	.sof2-cvar-entry__desc {
		display: none; /* Show only name on small screens */
	}

	.sof2-cvar-entry__row {
		flex-direction: column;
		gap: 4px;
	}

	.sof2-cvar-entry__row dt {
		min-width: auto;
		padding-top: 0;
	}

	.sof2-cvar-db__search-count {
		display: none;
	}
}

@media (max-width: 400px) {
	.sof2-cvar-entry__header {
		padding: 8px 10px;
		gap: 8px;
	}

	.sof2-cvar-entry__body {
		padding: 10px 12px 12px;
	}
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.sof2-cvar-entry__toggle {
		transition: none;
	}

	.sof2-cvar-db__cat-link,
	.sof2-cvar-entry,
	.sof2-cvar-entry__header,
	.sof2-cvar-entry__copy,
	.sof2-cvar-entry__rel-link {
		transition: none;
	}
}