/**
 * StreamForge portal isolation styles.
 *
 * All StreamForge front-end content lives inside one of the root shells
 * marked with #streamforge-app / .sf-portal. These rules make the portal
 * visually self-contained and dark regardless of the active WordPress theme.
 *
 * @package StreamForge
 */

/* ------------------------------------------------------------------
 * 1. Design tokens
 * ------------------------------------------------------------------ */
#streamforge-app,
#streamforge-app::before,
#streamforge-app::after,
#streamforge-app *,
#streamforge-app *::before,
#streamforge-app *::after {
	box-sizing: border-box;
}

#streamforge-app {
	/* Layout */
	--sf-portal-bg: #0b0c0e;
	--sf-portal-surface: #111214;
	--sf-portal-surface-2: #191b1f;
	--sf-portal-surface-3: #22252a;

	/* Text */
	--sf-portal-text: #ffffff;
	--sf-portal-text-muted: #9ca0a8;
	--sf-portal-text-dim: #6e737c;

	/* UI accents */
	--sf-portal-border: rgba(255, 255, 255, 0.10);
	--sf-portal-border-strong: rgba(255, 255, 255, 0.16);
	--sf-portal-accent: #d71920;
	--sf-portal-accent-hover: #b0131b;
	--sf-portal-success: #2fbf71;
	--sf-portal-warning: #e5a323;
	--sf-portal-danger: #d71920;

	/* Typography */
	--sf-portal-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--sf-portal-radius: 12px;
	--sf-portal-radius-sm: 8px;
	--sf-portal-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
	--sf-portal-focus: 0 0 0 2px rgba(215, 25, 32, 0.45);

	/* Surface reset */
	background: var(--sf-portal-bg);
	color: var(--sf-portal-text);
	font-family: var(--sf-portal-font);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ------------------------------------------------------------------
 * 2. Background / prevent theme leakage
 * ------------------------------------------------------------------ */
#streamforge-app,
#streamforge-app .sf-public-wrap,
#streamforge-app .sf-guest-shell,
#streamforge-app .sf-viewer-shell,
#streamforge-app .sf-app-shell,
#streamforge-app .sf-main,
#streamforge-app .sf-page {
	background: var(--sf-portal-bg);
	color: var(--sf-portal-text);
}

#streamforge-app .sf-public-wrap,
#streamforge-app .sf-guest-shell,
#streamforge-app .sf-viewer-shell,
#streamforge-app .sf-app-shell {
	min-height: 100vh;
}

/* ------------------------------------------------------------------
 * 3. Typography
 * ------------------------------------------------------------------ */
#streamforge-app h1,
#streamforge-app h2,
#streamforge-app h3,
#streamforge-app h4,
#streamforge-app h5,
#streamforge-app h6,
#streamforge-app p,
#streamforge-app li,
#streamforge-app dt,
#streamforge-app dd,
#streamforge-app label,
#streamforge-app legend,
#streamforge-app figcaption {
	color: var(--sf-portal-text);
}

#streamforge-app h1,
#streamforge-app h2,
#streamforge-app h3,
#streamforge-app h4,
#streamforge-app h5,
#streamforge-app h6 {
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 0.6em;
}

#streamforge-app p,
#streamforge-app ul,
#streamforge-app ol,
#streamforge-app dl {
	margin: 0 0 1em;
}

#streamforge-app .sf-text-muted,
#streamforge-app .sf-muted,
#streamforge-app .sf-dim {
	color: var(--sf-portal-text-muted);
}

/* ------------------------------------------------------------------
 * 4. Links
 * ------------------------------------------------------------------ */
#streamforge-app a,
#streamforge-app a:link,
#streamforge-app a:visited {
	color: var(--sf-portal-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}

#streamforge-app a:hover,
#streamforge-app a:focus {
	color: var(--sf-portal-accent);
}

#streamforge-app a.sf-button,
#streamforge-app a.sf-button:hover,
#streamforge-app a.sf-button:focus {
	text-decoration: none;
}

/* ------------------------------------------------------------------
 * 5. Buttons
 * ------------------------------------------------------------------ */
#streamforge-app .sf-button,
#streamforge-app a.sf-button,
#streamforge-app button.sf-button,
#streamforge-app input[type="submit"].sf-button,
#streamforge-app input[type="button"].sf-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 16px;
	border: 0;
	border-radius: var(--sf-portal-radius-sm);
	font-family: var(--sf-portal-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, box-shadow 0.15s;
	background: var(--sf-portal-surface-2);
	color: var(--sf-portal-text);
}

#streamforge-app .sf-button:hover,
#streamforge-app .sf-button:focus {
	background: var(--sf-portal-surface-3);
	color: var(--sf-portal-text);
}

#streamforge-app .sf-button--primary,
#streamforge-app .sf-button-primary {
	background: var(--sf-portal-accent);
	color: #ffffff;
}

#streamforge-app .sf-button--primary:hover,
#streamforge-app .sf-button--primary:focus,
#streamforge-app .sf-button-primary:hover,
#streamforge-app .sf-button-primary:focus {
	background: var(--sf-portal-accent-hover);
	color: #ffffff;
}

#streamforge-app .sf-button--secondary,
#streamforge-app .sf-button-secondary {
	background: var(--sf-portal-surface-2);
	color: var(--sf-portal-text);
}

#streamforge-app .sf-button--tertiary,
#streamforge-app .sf-button-tertiary {
	background: transparent;
	color: var(--sf-portal-text);
}

#streamforge-app .sf-button--tertiary:hover,
#streamforge-app .sf-button--tertiary:focus {
	background: rgba(255, 255, 255, 0.06);
}

#streamforge-app .sf-button--small,
#streamforge-app .sf-button-small {
	padding: 6px 12px;
	font-size: 13px;
}

#streamforge-app .sf-button:disabled,
#streamforge-app .sf-button--disabled,
#streamforge-app .sf-button[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ------------------------------------------------------------------
 * 6. Forms
 * ------------------------------------------------------------------ */
#streamforge-app input,
#streamforge-app select,
#streamforge-app textarea,
#streamforge-app .sf-input,
#streamforge-app .sf-select,
#streamforge-app .sf-textarea {
	width: 100%;
	max-width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--sf-portal-border-strong);
	border-radius: var(--sf-portal-radius-sm);
	background: var(--sf-portal-surface);
	color: var(--sf-portal-text);
	font-family: var(--sf-portal-font);
	font-size: 14px;
	line-height: 1.4;
	transition: border-color 0.15s, box-shadow 0.15s;
}

#streamforge-app input::placeholder,
#streamforge-app textarea::placeholder {
	color: var(--sf-portal-text-dim);
	opacity: 1;
}

#streamforge-app input:focus,
#streamforge-app select:focus,
#streamforge-app textarea:focus,
#streamforge-app .sf-input:focus,
#streamforge-app .sf-select:focus,
#streamforge-app .sf-textarea:focus {
	outline: none;
	border-color: var(--sf-portal-accent);
	box-shadow: var(--sf-portal-focus);
}

#streamforge-app input[type="checkbox"],
#streamforge-app input[type="radio"] {
	width: auto;
	min-width: 18px;
	min-height: 18px;
	accent-color: var(--sf-portal-accent);
}

#streamforge-app label,
#streamforge-app .sf-label {
	display: inline-block;
	margin-bottom: 6px;
	font-weight: 500;
	color: var(--sf-portal-text);
}

#streamforge-app fieldset,
#streamforge-app .sf-fieldset {
	border: 1px solid var(--sf-portal-border);
	border-radius: var(--sf-portal-radius);
	padding: 16px;
	margin: 0 0 1em;
}

/* ------------------------------------------------------------------
 * 7. Cards and panels
 * ------------------------------------------------------------------ */
#streamforge-app .sf-card,
#streamforge-app .sf-panel,
#streamforge-app .sf-surface,
#streamforge-app .sf-empty,
#streamforge-app .sf-stat,
#streamforge-app .sf-public-empty,
#streamforge-app .sf-event-card,
#streamforge-app .sf-broadcast-card {
	background: var(--sf-portal-surface);
	border: 1px solid var(--sf-portal-border);
	border-radius: var(--sf-portal-radius);
	color: var(--sf-portal-text);
	box-shadow: var(--sf-portal-shadow);
}

#streamforge-app .sf-card {
	padding: 24px;
}

#streamforge-app .sf-card h1,
#streamforge-app .sf-card h2,
#streamforge-app .sf-card h3,
#streamforge-app .sf-card h4,
#streamforge-app .sf-card h5,
#streamforge-app .sf-card h6,
#streamforge-app .sf-card p,
#streamforge-app .sf-card li {
	color: var(--sf-portal-text);
}

#streamforge-app .sf-card a,
#streamforge-app .sf-card a:link,
#streamforge-app .sf-card a:visited {
	color: var(--sf-portal-text);
}

#streamforge-app .sf-card a:hover,
#streamforge-app .sf-card a:focus {
	color: var(--sf-portal-accent);
}

/* ------------------------------------------------------------------
 * 8. Tables
 * ------------------------------------------------------------------ */
#streamforge-app table,
#streamforge-app .sf-table {
	width: 100%;
	border-collapse: collapse;
	background: transparent;
	color: var(--sf-portal-text);
}

#streamforge-app th,
#streamforge-app td,
#streamforge-app .sf-table th,
#streamforge-app .sf-table td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--sf-portal-border);
	text-align: left;
	vertical-align: top;
	color: var(--sf-portal-text);
}

#streamforge-app thead th,
#streamforge-app .sf-table thead th {
	background: var(--sf-portal-surface-2);
	font-weight: 600;
	border-bottom: 1px solid var(--sf-portal-border-strong);
}

#streamforge-app tbody tr:hover,
#streamforge-app .sf-table tbody tr:hover {
	background: rgba(255, 255, 255, 0.03);
}

/* ------------------------------------------------------------------
 * 9. Navigation
 * ------------------------------------------------------------------ */
#streamforge-app .sf-admin-subnav,
#streamforge-app .sf-topbar,
#streamforge-app .sf-guest-topbar,
#streamforge-app .sf-viewer-topbar,
#streamforge-app .sf-sidebar,
#streamforge-app .sf-mobile-nav,
#streamforge-app .sf-nav-section,
#streamforge-app .sf-nav-section__label {
	background: transparent;
	color: var(--sf-portal-text);
}

#streamforge-app .sf-admin-subnav {
	background: rgba(255, 255, 255, 0.02);
	border-bottom: 1px solid var(--sf-portal-border);
}

#streamforge-app .sf-sidebar {
	background: var(--sf-portal-surface);
	border-right: 1px solid var(--sf-portal-border);
}

#streamforge-app .sf-nav-section__label,
#streamforge-app .sf-nav a,
#streamforge-app .sf-mobile-nav a {
	color: var(--sf-portal-text-muted);
}

#streamforge-app .sf-nav a:hover,
#streamforge-app .sf-nav a:focus,
#streamforge-app .sf-mobile-nav a:hover,
#streamforge-app .sf-mobile-nav a:focus,
#streamforge-app .sf-nav a.is-active {
	color: var(--sf-portal-text);
	background: rgba(255, 255, 255, 0.05);
}

/* ------------------------------------------------------------------
 * 10. Badges, alerts and status
 * ------------------------------------------------------------------ */
#streamforge-app .sf-badge,
#streamforge-app .sf-status,
#streamforge-app .sf-alert {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	background: var(--sf-portal-surface-2);
	color: var(--sf-portal-text);
}

#streamforge-app .sf-badge--success,
#streamforge-app .sf-status--success {
	background: rgba(47, 191, 113, 0.15);
	color: var(--sf-portal-success);
}

#streamforge-app .sf-badge--warning,
#streamforge-app .sf-status--warning {
	background: rgba(229, 163, 35, 0.15);
	color: var(--sf-portal-warning);
}

#streamforge-app .sf-badge--danger,
#streamforge-app .sf-status--danger,
#streamforge-app .sf-alert--danger {
	background: rgba(215, 25, 32, 0.15);
	color: var(--sf-portal-danger);
}

/* ------------------------------------------------------------------
 * 11. Utility helpers
 * ------------------------------------------------------------------ */
#streamforge-app .sf-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------
 * 12. Responsiveness
 * ------------------------------------------------------------------ */
#streamforge-app img,
#streamforge-app video,
#streamforge-app svg {
	max-width: 100%;
	height: auto;
}

#streamforge-app pre,
#streamforge-app code {
	font-family: Menlo, Consolas, monospace;
	background: var(--sf-portal-surface-2);
	color: var(--sf-portal-text);
}

/* ------------------------------------------------------------------
 * 13. StreamForge page canvas and portal width
 * ------------------------------------------------------------------ */
body.sf-portal-page {
	background: var(--sf-portal-bg, #0b0c0e) !important;
}

body.sf-portal-page #page,
body.sf-portal-page .site,
body.sf-portal-page #content,
body.sf-portal-page .site-content,
body.sf-portal-page .content-area,
body.sf-portal-page .site-main,
body.sf-portal-page .entry,
body.sf-portal-page .entry-content,
body.sf-portal-page article,
body.sf-portal-page .post,
body.sf-portal-page .page {
	background: transparent !important;
}

#streamforge-app {
	width: 80%;
	max-width: none;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 1200px) {
	#streamforge-app {
		width: 90%;
	}
}

@media (max-width: 768px) {
	#streamforge-app {
		width: 100%;
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* ------------------------------------------------------------------
 * 14. "Powered by" branding
 * ------------------------------------------------------------------ */
.sf-powered-by {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 28px 16px 22px;
	color: var(--sf-portal-text-muted);
	opacity: 0.8;
}

.sf-powered-by__label {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.sf-powered-by__logo {
	display: block;
	max-height: 28px;
	width: auto;
	max-width: 100%;
}

.sf-powered-by__fallback {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sf-portal-text);
}