/* pi-plugin/assets/css/playground.css */

/* Set up height chain for full viewport usage */
body.page-template-page-pijs-playground-php #page {
	height: 100vh;
	display: flex;
	flex-direction: column;
}

body.page-template-page-pijs-playground-php #masthead .container {
	margin-left: 0;
}

body.page-template-page-pijs-playground-php #content {
	flex: 1;
	display: flex;
	flex-direction: column;
}

body.page-template-page-pijs-playground-php #primary {
	flex: 1;
	display: flex;
	flex-direction: column;
}

body.page-template-page-pijs-playground-php #main {
	flex: 1;
	display: flex;
	flex-direction: column;
}

body.page-template-page-pijs-playground-php footer {
	padding: var( --pi-space-md ) 0;
}

.pijs-playground {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.pijs-playground-buttons {
	background-color: var( --pi-code-bg );
	display: flex;
	gap: var( --pi-space-sm );
	padding: var( --pi-space-sm );
	align-items: center;
	justify-content: space-between;
}

.pijs-playground-buttons button {
	min-width: 120px;
	height: 29px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pijs-run-controls {
	display: flex;
	gap: var( --pi-space-xs );
}

.pijs-layout-toggle {
	display: flex;
	gap: var( --pi-space-xs );
}

.pijs-layout-toggle .layout-btn {
	min-width: 40px;
	font-size: 24px;
	padding: 0 0 2px 0;
}

.pijs-layout-toggle .layout-btn.active {
	background-color: var( --pi-accent-darker-red );
}

.pijs-playground-content {
	position: relative;
	flex: 1;
	overflow: hidden;
}

.pijs-playground-editor {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var( --pi-code-bg );
	padding-top: 8px;
	border-top: 1px solid var( --pi-nav-border );
	transition: none;
}

.pijs-playground-runner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var( --pi-color-bg );
	border-top: 1px solid var( --pi-nav-border );
	display: none;
	transition: none;
}

.pijs-playground-runner iframe {
	width: 100%;
	height: 100%;
	border: none;
}

.pijs-runner-message {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var( --pi-color-bg );
	z-index: 1;
}

.pijs-runner-message-content {
	text-align: center;
	color: var( --pi-color-text );
	padding: var( --pi-space-lg );
}

.pijs-runner-message-content h3 {
	margin: 0 0 var( --pi-space-sm ) 0;
	font-size: var( --pi-h3 );
	color: var( --pi-color-text-bright );
}

.pijs-runner-message-content p {
	margin: 0;
	font-size: var( --pi-font-size );
	opacity: 0.8;
}

/* Message visibility is controlled by JavaScript */

/* Resize handles */
.pijs-resize-handle {
	position: absolute;
	background: var( --pi-nav-border );
	z-index: 10;
	display: none;
}

.pijs-resize-handle-vertical {
	top: 0;
	width: 4px;
	height: 100%;
	cursor: col-resize;
}

.pijs-resize-handle-horizontal {
	left: 0;
	width: 100%;
	height: 4px;
	cursor: row-resize;
}

.pijs-resize-handle:hover {
	background: var( --pi-accent-blue );
}

/* Drag overlay */
.pijs-drag-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	z-index: 20;
	display: none;
	pointer-events: all;
}

/* Layout states */
.pijs-playground[data-layout="fullscreen"] .pijs-playground-editor {
	display: block;
}

.pijs-playground[data-layout="fullscreen"] .pijs-playground-runner {
	display: none;
}

/* Fullscreen running state - show runner, hide editor */
.pijs-playground[data-layout="fullscreen"].running .pijs-playground-editor {
	display: none;
}

.pijs-playground[data-layout="fullscreen"].running .pijs-playground-runner {
	display: block;
}

.pijs-playground[data-layout="vertical"] .pijs-playground-editor {
	display: block;
	width: 50%;
}

.pijs-playground[data-layout="vertical"] .pijs-playground-runner {
	display: block;
	left: 50%;
	width: 50%;
}

.pijs-playground[data-layout="vertical"] .pijs-resize-handle-vertical {
	display: block;
	left: 50%;
	margin-left: -2px;
}

.pijs-playground[data-layout="horizontal"] .pijs-playground-editor {
	display: block;
	height: 50%;
}

.pijs-playground[data-layout="horizontal"] .pijs-playground-runner {
	display: block;
	top: 50%;
	height: 50%;
}

.pijs-playground[data-layout="horizontal"] .pijs-resize-handle-horizontal {
	display: block;
	top: 50%;
	margin-top: -2px;
}

/* Mobile responsive - hide button text, show only symbols */
@media (max-width: 768px) {
	.pijs-run-controls .run {
		font-size: 0;
		min-width: 40px;
		position: relative;
	}
	
	.pijs-run-controls .run::before {
		content: "►";
		font-size: 16px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	
	.pijs-run-controls .run.restart::before {
		content: "⟲";
		font-size: 20px;
	}
	
	.pijs-run-controls .stop {
		font-size: 0;
		min-width: 40px;
		position: relative;
	}
	
	.pijs-run-controls .stop::before {
		content: "⏹";
		font-size: 16px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}