/**
 * Stream Forge application components — Phase A
 *
 * Reusable, token-based UI primitives.
 * All selectors are scoped under .sf-app-shell, .sf-viewer-shell, .sf-guest-shell,
 * or use the .sf- component namespace.
 *
 * @package StreamForge
 */

/* ------------------------------------------------------------------
 * Typography
 * ------------------------------------------------------------------ */

.sf-title {
	font: var(--sf-font-title);
	margin: 0 0 var(--sf-space-4);
}

.sf-section-title {
	font: var(--sf-font-section);
	margin: 0 0 var(--sf-space-4);
}

.sf-card-title {
	font: var(--sf-font-card);
	margin: 0 0 var(--sf-space-3);
}

.sf-body {
	font: var(--sf-font-body);
	margin: 0 0 var(--sf-space-3);
}

.sf-metadata {
	font: var(--sf-font-metadata);
	color: var(--sf-text-muted);
}

.sf-caption {
	font: var(--sf-font-caption);
	color: var(--sf-text-muted);
}

.sf-text-secondary {
	color: var(--sf-text-secondary);
}

.sf-text-muted {
	color: var(--sf-text-muted);
}

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

.sf-card {
	background: var(--sf-surface);
	border: 1px solid var(--sf-border);
	border-radius: var(--sf-radius-lg);
	padding: var(--sf-space-5);
	box-shadow: var(--sf-shadow-raised);
}

.sf-card + .sf-card {
	margin-top: var(--sf-space-5);
}

.sf-section {
	margin-bottom: var(--sf-space-6);
}

.sf-section__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sf-space-3);
	margin-bottom: var(--sf-space-4);
}

.sf-list-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sf-space-3);
	margin-bottom: var(--sf-space-4);
}

/* ------------------------------------------------------------------
 * Status badges
 * ------------------------------------------------------------------ */

.sf-status {
	display: inline-flex;
	align-items: center;
	gap: var(--sf-space-2);
	padding: var(--sf-space-1) var(--sf-space-3);
	border-radius: 9999px;
	font: var(--sf-font-label);
	background: var(--sf-surface-raised);
	color: var(--sf-text-secondary);
	border: 1px solid var(--sf-border);
}

.sf-status::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

.sf-status--live {
	background: rgba(239, 68, 68, 0.12);
	color: var(--sf-live);
	border-color: rgba(239, 68, 68, 0.35);
}

.sf-status--live::before {
	animation: sf-pulse 1.5s ease-in-out infinite;
}

@keyframes sf-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.4; }
}

.sf-status--ready,
.sf-status--active,
.sf-status--connected {
	background: rgba(34, 197, 94, 0.12);
	color: var(--sf-success);
	border-color: rgba(34, 197, 94, 0.35);
}

.sf-status--offline,
.sf-status--disabled,
.sf-status--canceled {
	background: var(--sf-surface-raised);
	color: var(--sf-offline);
	border-color: var(--sf-border);
}

.sf-status--warning,
.sf-status--connecting,
.sf-status--past_due {
	background: rgba(255, 191, 71, 0.12);
	color: var(--sf-warning);
	border-color: rgba(255, 191, 71, 0.35);
}

.sf-status--danger,
.sf-status--error,
.sf-status--rejected,
.sf-status--suspended {
	background: rgba(239, 68, 68, 0.12);
	color: var(--sf-danger);
	border-color: rgba(239, 68, 68, 0.35);
}

.sf-status--scheduled,
.sf-status--pending {
	background: rgba(184, 190, 202, 0.12);
	color: var(--sf-text-secondary);
	border-color: var(--sf-border);
}

/* ------------------------------------------------------------------
 * Metrics
 * ------------------------------------------------------------------ */

.sf-metric {
	display: flex;
	flex-direction: column;
	gap: var(--sf-space-1);
}

.sf-metric__value {
	font: var(--sf-font-display);
	font-size: 1.75rem;
	color: var(--sf-text);
}

.sf-metric__label {
	font: var(--sf-font-label);
	color: var(--sf-text-muted);
}

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

.sf-button,
button.sf-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sf-space-2);
	padding: var(--sf-space-3) var(--sf-space-4);
	border-radius: var(--sf-radius);
	font: var(--sf-font-body);
	font-weight: 500;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--sf-transition), border-color var(--sf-transition), color var(--sf-transition), box-shadow var(--sf-transition);
}

.sf-button:disabled,
.sf-button[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
}

.sf-button--primary {
	background: var(--sf-accent);
	color: var(--sf-text);
	border-color: var(--sf-accent);
}

.sf-button--primary:hover:not(:disabled) {
	background: var(--sf-accent-bright);
	border-color: var(--sf-accent-bright);
}

.sf-button--secondary {
	background: var(--sf-surface-raised);
	color: var(--sf-text);
	border-color: var(--sf-border-strong);
}

.sf-button--secondary:hover:not(:disabled) {
	background: var(--sf-surface-overlay);
	border-color: var(--sf-border);
}

.sf-button--tertiary {
	background: transparent;
	color: var(--sf-text-secondary);
	border-color: transparent;
}

.sf-button--tertiary:hover:not(:disabled) {
	color: var(--sf-text);
	background: var(--sf-surface-raised);
}

.sf-button--danger {
	background: var(--sf-danger);
	color: var(--sf-text);
	border-color: var(--sf-danger);
}

.sf-button--danger:hover:not(:disabled) {
	background: #dc2626;
	border-color: #dc2626;
}

.sf-button--small {
	padding: var(--sf-space-2) var(--sf-space-3);
	font: var(--sf-font-metadata);
}

.sf-button--large {
	padding: var(--sf-space-3) var(--sf-space-5);
	font: var(--sf-font-section);
}

.sf-button-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sf-space-3);
}

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

.sf-form-group {
	margin-bottom: var(--sf-space-4);
}

.sf-label,
label.sf-label {
	display: block;
	font: var(--sf-font-label);
	color: var(--sf-text-secondary);
	margin-bottom: var(--sf-space-2);
}

.sf-hint {
	font: var(--sf-font-caption);
	color: var(--sf-text-muted);
	margin-top: var(--sf-space-1);
}

.sf-input,
input.sf-input,
select.sf-input,
textarea.sf-input {
	width: 100%;
	padding: var(--sf-space-3);
	background: var(--sf-surface-raised);
	border: 1px solid var(--sf-border-strong);
	border-radius: var(--sf-radius);
	color: var(--sf-text);
	font: var(--sf-font-body);
	transition: border-color var(--sf-transition), box-shadow var(--sf-transition);
}

.sf-input:focus,
input.sf-input:focus,
select.sf-input:focus,
textarea.sf-input:focus {
	outline: none;
	border-color: var(--sf-accent);
	box-shadow: 0 0 0 3px var(--sf-border-focus);
}

.sf-input::placeholder {
	color: var(--sf-text-muted);
}

select.sf-input {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b8beca' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 40px;
}

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

.sf-table {
	width: 100%;
	border-collapse: collapse;
	font: var(--sf-font-body);
}

.sf-table thead {
	border-bottom: 1px solid var(--sf-border-strong);
}

.sf-table th,
.sf-table td {
	padding: var(--sf-space-3) var(--sf-space-2);
	text-align: left;
	vertical-align: top;
}

.sf-table th {
	font: var(--sf-font-label);
	color: var(--sf-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.sf-table tbody tr {
	border-bottom: 1px solid var(--sf-border);
}

.sf-table tbody tr:hover {
	background: var(--sf-surface-raised);
}

/* ------------------------------------------------------------------
 * Empty states
 * ------------------------------------------------------------------ */

.sf-empty-state {
	text-align: center;
	padding: var(--sf-space-7) var(--sf-space-5);
	max-width: 520px;
	margin: 0 auto;
}

.sf-empty-state__title {
	font: var(--sf-font-section);
	color: var(--sf-text);
	margin-bottom: var(--sf-space-2);
}

.sf-empty-state__body {
	font: var(--sf-font-body);
	color: var(--sf-text-secondary);
	margin-bottom: var(--sf-space-4);
}

/* ------------------------------------------------------------------
 * Alerts
 * ------------------------------------------------------------------ */

.sf-alert {
	padding: var(--sf-space-4);
	border-radius: var(--sf-radius);
	border: 1px solid var(--sf-border);
	background: var(--sf-surface-raised);
	color: var(--sf-text);
	margin-bottom: var(--sf-space-4);
}

.sf-alert p:first-child {
	margin-top: 0;
}

.sf-alert p:last-child {
	margin-bottom: 0;
}

.sf-alert--success {
	background: rgba(34, 197, 94, 0.10);
	border-color: rgba(34, 197, 94, 0.35);
	color: var(--sf-success);
}

.sf-alert--warning {
	background: rgba(255, 191, 71, 0.10);
	border-color: rgba(255, 191, 71, 0.35);
	color: var(--sf-warning);
}

.sf-alert--error {
	background: rgba(239, 68, 68, 0.10);
	border-color: rgba(239, 68, 68, 0.35);
	color: var(--sf-danger);
}

.sf-alert--info {
	background: rgba(184, 190, 202, 0.10);
	border-color: var(--sf-border-strong);
	color: var(--sf-text-secondary);
}

/* ------------------------------------------------------------------
 * Utility
 * ------------------------------------------------------------------ */

.sf-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.sf-stack > * + * {
	margin-top: var(--sf-space-4);
}

.sf-grid {
	display: grid;
	gap: var(--sf-space-4);
}

.sf-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sf-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sf-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1023px) {
	.sf-grid--2,
	.sf-grid--3,
	.sf-grid--4 {
		grid-template-columns: 1fr;
	}
}