/**
 * UK Social Care Directory — Legacy aliases
 * ============================================================================
 * ⚠️  TEMPORARY. THIS FILE IS SCHEDULED FOR DELETION.
 *
 * Delete it — and its registration in UK_SCD_Assets — at the end of Phase 4,
 * once the last file has been migrated off the old class names.
 * ============================================================================
 *
 * Phase 4 migrates one file at a time so that every step is shippable. That
 * means old and new markup coexist for a while: a template migrated on Monday
 * uses `.scd-card`, while one not yet touched still uses `.uk-scd-card`.
 *
 * This file bridges that gap. It maps the four historical prefixes
 * (`.uk-scd-`, `.uk-`, `.scd-` in its old inconsistent sense, and the
 * unprefixed classes in the pre-arrival template) onto the new components,
 * plus the ten `--uk-*` custom properties onto the new token names.
 *
 * RULES WHILE THIS FILE EXISTS:
 *   - Never add a NEW selector here. It exists only to describe what already
 *     existed on the day the refactor started.
 *   - Never write new markup that targets an aliased class.
 *   - When a file is migrated, delete the aliases it was the last user of.
 *
 * Track progress with:
 *   grep -rn "uk-scd-\|uk-tab-\|wiki-tab-" templates/ includes/ | wc -l
 * When that reaches zero, delete this file.
 */

/* =====================================================================
 * TOKEN ALIASES
 *
 * The old `:root` block defined ten properties, referenced 51 times inside
 * class-frontend-dashboard.php. That block was injected globally on wp_head;
 * deleting the injector without replacing it would leave every not-yet-
 * migrated file resolving `var(--uk-*)` to nothing — i.e. unstyled.
 *
 * So this is a FAITHFUL SHIM: the same ten properties, the same literal
 * values, at the same `:root` scope. It cannot be expressed as
 * `var(--scd-accent)` here, because the new palette tokens live on
 * `.scd-theme-dark` rather than `:root`, and would resolve to nothing
 * outside a themed subtree.
 *
 * These literals are the ONLY hex values permitted outside tokens.css, and
 * they leave with this file.
 * ===================================================================== */

:root {
	--uk-primary: #6366f1;
	--uk-primary-hover: #4f46e5;
	--uk-success: #10b981;
	--uk-warning: #f59e0b;
	--uk-error: #ef4444;
	--uk-background: #0f172a;
	--uk-card-bg: rgba(30, 41, 59, 0.7);
	--uk-border: rgba(255, 255, 255, 0.1);
	--uk-text: #f8fafc;
	--uk-text-muted: #94a3b8;
}

/* Inside a themed subtree, prefer the real tokens — so a migrated wrapper
 * gets correct values in BOTH themes, while the :root shim above keeps
 * un-migrated markup alive. */
.scd-root,
.uk-scd-dashboard,
.uk-scd-single-page {
	--uk-primary: var(--scd-accent);
	--uk-primary-hover: var(--scd-accent-hover);
	--uk-success: var(--scd-success);
	--uk-warning: var(--scd-warning);
	--uk-error: var(--scd-danger);
	--uk-background: var(--scd-surface-0);
	--uk-card-bg: var(--scd-surface-1);
	--uk-border: var(--scd-border);
	--uk-text: var(--scd-text);
	--uk-text-muted: var(--scd-text-muted);
}

/* =====================================================================
 * CONTAINER ALIASES
 *
 * Legacy wrappers become theme roots so their descendants resolve tokens.
 * Without this, an un-migrated block sits outside `.scd-root` and every
 * `var(--scd-*)` inside it falls back to nothing.
 * ===================================================================== */

.uk-scd-dashboard,
.uk-scd-single-page,
.uk-scd-frontend-render {
	background: var(--scd-surface-0);
	color: var(--scd-text);
	font-family: var(--scd-font-sans);
}

.uk-scd-dashboard {
	margin: var(--scd-space-5) 0;
	padding: var(--scd-space-8);
	border: 1px solid var(--scd-border);
	border-radius: var(--scd-radius-lg);
	background: var(--scd-surface-2);
	box-shadow: var(--scd-shadow-3);
}

/* =====================================================================
 * COMPONENT ALIASES
 * ===================================================================== */

/* --- Cards ------------------------------------------------------------ */

.uk-scd-card,
.uk-scd-card-premium {
	padding: var(--scd-space-5);
	border: 1px solid var(--scd-border);
	border-radius: var(--scd-radius-lg);
	background: var(--scd-surface-inset);
	margin-bottom: var(--scd-space-5);
}

.uk-scd-card-premium {
	background: var(--scd-surface-1);
	border-radius: var(--scd-radius-xl);
	box-shadow: var(--scd-shadow-2);
}

/* --- Buttons ----------------------------------------------------------- */

.uk-scd-btn,
.uk-rights-btn,
.uk-download-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--scd-space-2);
	min-height: var(--scd-tap);
	padding: var(--scd-space-3) var(--scd-space-6);
	border: 0;
	border-radius: var(--scd-radius-sm);
	background: var(--scd-accent);
	color: var(--scd-accent-contrast);
	font-weight: var(--scd-weight-semibold);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--scd-dur-fast) var(--scd-ease-out);
}

.uk-scd-btn:hover,
.uk-rights-btn:hover,
.uk-download-btn:hover {
	background: var(--scd-accent-hover);
	color: var(--scd-accent-contrast);
	text-decoration: none;
}

/* --- Badges ------------------------------------------------------------ */

.uk-badge,
.uk-scd-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--scd-space-1);
	padding: var(--scd-space-1) var(--scd-space-2);
	border-radius: var(--scd-radius-xs);
	background: var(--scd-accent-soft);
	color: var(--scd-accent-on-soft);
	font-size: var(--scd-text-2xs);
	font-weight: var(--scd-weight-bold);
	white-space: nowrap;
}

.uk-badge-unclaimed { background: var(--scd-surface-2); color: var(--scd-text-muted); }

.uk-badge-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--scd-space-2);
}

/* --- Tabs -------------------------------------------------------------
 * Both historical tab conventions are aliased. `.uk-scd-tab-btn` is the
 * one used BOTH for JS panels and for server-rendered `<a>` links, so it is
 * styled but never wired to the JS component. */

.uk-scd-tabs-nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--scd-space-2);
	margin-bottom: var(--scd-space-6);
	padding: var(--scd-space-1);
	border: 1px solid var(--scd-border-subtle);
	border-radius: var(--scd-radius-lg);
	background: var(--scd-surface-inset);
	overflow-x: auto;
	scrollbar-width: none;
}

.uk-scd-tabs-nav::-webkit-scrollbar { display: none; }

.uk-tab-btn,
.uk-scd-tab-btn,
.wiki-tab-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--scd-space-2);
	flex: 0 0 auto;
	min-height: var(--scd-tap);
	padding: var(--scd-space-2) var(--scd-space-4);
	border: 0;
	border-radius: var(--scd-radius-md);
	background: transparent;
	color: var(--scd-text-muted);
	font-size: var(--scd-text-sm);
	font-weight: var(--scd-weight-semibold);
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--scd-dur-fast) var(--scd-ease-out);
}

.uk-tab-btn:hover,
.uk-scd-tab-btn:hover,
.wiki-tab-btn:hover { background: var(--scd-surface-2); color: var(--scd-text); }

.uk-tab-btn.active,
.uk-scd-tab-btn.active,
.wiki-tab-btn.active {
	background: var(--scd-accent);
	color: var(--scd-accent-contrast);
}

/* --- Forms ------------------------------------------------------------- */

.uk-scd-form-group { margin-bottom: var(--scd-space-5); }

.uk-scd-form-group label {
	display: block;
	margin-bottom: var(--scd-space-2);
	color: var(--scd-text-secondary);
	font-weight: var(--scd-weight-semibold);
}

.uk-scd-form-group input[type="text"],
.uk-scd-form-group input[type="email"],
.uk-scd-form-group select,
.uk-scd-form-group textarea {
	width: 100%;
	padding: var(--scd-space-3);
	border: 1px solid var(--scd-border);
	border-radius: var(--scd-radius-sm);
	background: var(--scd-surface-3);
	color: var(--scd-text);
}

.uk-scd-form-group input[readonly] {
	background: var(--scd-surface-2);
	color: var(--scd-text-muted);
	cursor: not-allowed;
}

/* --- Tables ------------------------------------------------------------ */

.uk-info-table,
.scd-rel-table { width: 100%; border-collapse: collapse; }

.uk-info-table th,
.uk-info-table td,
.scd-rel-table th,
.scd-rel-table td {
	padding: var(--scd-space-3) 0;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--scd-border-subtle);
}

.uk-info-table th,
.scd-rel-table th { color: var(--scd-text-muted); font-weight: var(--scd-weight-semibold); }

/* --- Timeline ---------------------------------------------------------- */

.uk-timeline,
.uk-scd-timeline-list { list-style: none; margin: 0; padding: 0; }

.uk-scd-timeline-item {
	position: relative;
	margin-bottom: var(--scd-space-4);
	padding-left: var(--scd-space-4);
	border-left: 2px solid var(--scd-accent);
}

.uk-scd-timeline-item::before {
	content: '';
	position: absolute;
	left: -6px;
	top: 5px;
	width: 10px;
	height: 10px;
	border-radius: var(--scd-radius-circle);
	background: var(--scd-accent);
}

.uk-timeline-date {
	font-size: var(--scd-text-xs);
	font-weight: var(--scd-weight-semibold);
	color: var(--scd-text-muted);
	text-transform: uppercase;
	letter-spacing: var(--scd-tracking-wide);
}

/* --- Grid -------------------------------------------------------------- */

.uk-scd-grid,
.uk-scd-layout {
	display: grid;
	gap: var(--scd-space-5);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
	.uk-scd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.uk-scd-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
}

/* --- Stat cards / titles ------------------------------------------------ */

.uk-scd-stat-card {
	padding: var(--scd-space-5);
	border: 1px solid var(--scd-border-subtle);
	border-radius: var(--scd-radius-lg);
	background: var(--scd-surface-inset);
}

.uk-scd-title {
	font-size: var(--scd-text-4xl);
	font-weight: var(--scd-weight-bold);
	line-height: var(--scd-leading-tight);
	color: var(--scd-text);
}

/* --- Old individuals-archive prefix ------------------------------------- */

.scd-grid-individuals {
	display: grid;
	gap: var(--scd-space-5);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.scd-individual-card {
	padding: var(--scd-space-5);
	border: 1px solid var(--scd-border);
	border-radius: var(--scd-radius-lg);
	background: var(--scd-surface-1);
	text-align: center;
}

.scd-archive-header { margin-bottom: var(--scd-space-8); }

/* =====================================================================
 * PRE-ARRIVAL VISUALIZER — unprefixed classes
 *
 * This template styles bare `.container`, `.header`, `.main-grid`, etc.
 * `.container` in particular collides head-on with Divi and with most CSS
 * frameworks. These are scoped under a wrapper class so the collision is
 * contained until the template is renamed in Phase 4 step 2.
 * ===================================================================== */

.scd-pre-arrival .container {
	width: 100%;
	max-width: var(--scd-container);
	margin-inline: auto;
	padding-inline: var(--scd-gutter);
}

.scd-pre-arrival .main-grid {
	display: grid;
	gap: var(--scd-space-6);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
	.scd-pre-arrival .main-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}