/* KOURASKS - Custom Styling */

:root {
	--terminal-bg: #1a1a1a;
	--terminal-text: #00ff00;
	--success-color: #00ff00;
	--error-color: #ff3333;
	--warning-color: #ffaa00;
	--deploying-color: #3399ff;
}

* {
	box-sizing: border-box;
}

body {
	display: flex;
	flex-direction: column;
	height: 100vh;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

/* Header / Navbar */
.navbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 2rem;
	background: var(--card-background-color);
	border-bottom: 1px solid var(--card-border-color);
}

.score-section {
	display: flex;
	align-items: baseline;
	gap: 1rem;
}

.score-label {
	font-size: 0.9rem;
	opacity: 0.7;
}

.score-value {
	font-size: 2rem;
	font-weight: bold;
}

.yield-value {
	font-size: 1.2rem;
	font-weight: bold;
}

.yield-value.positive {
	color: var(--success-color);
}

.yield-value.negative {
	color: var(--error-color);
}

.center-section h1 {
	margin: 0;
	font-size: 1.5rem;
}

.info-section {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.5rem;
}

.ceo-lives,
.trimester {
	font-size: 0.9rem;
}

/* Main Content */
.game-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	padding: 1rem;
	overflow-y: auto;
	flex: 1;
}

.left-panel {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.right-panel {
	display: flex;
	flex-direction: column;
}

/* Sections */
section {
	background: var(--card-background-color);
	border: 1px solid var(--card-border-color);
	border-radius: var(--border-radius);
	padding: 1rem;
	display: flex;
	flex-direction: column;
}

section h2 {
	margin-top: 0;
	margin-bottom: 1rem;
	font-size: 1.2rem;
}

.hardware-section {
	max-height: 40vh;
	overflow-y: auto;
}

.projects-section {
	flex: 1;
	overflow-y: auto;
}

.services-section {
	height: 100%;
	overflow-y: auto;
}

/* Lists */
.hardware-list,
.projects-list,
.services-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.empty-message {
	text-align: center;
	opacity: 0.5;
	padding: 2rem 0;
}

/* Cards */
.hardware-card,
.project-card,
.service-card {
	border: 1px solid var(--card-border-color);
	border-radius: var(--border-radius);
	padding: 1rem;
	background: var(--card-sectionning-background-color);
}

.hardware-card.crashed,
.service-card.crashed {
	border-color: var(--error-color);
	animation: pulse-red 1s infinite;
}

@keyframes pulse-red {
	0%,
	100% {
		border-color: var(--error-color);
	}
	50% {
		border-color: transparent;
	}
}

.project-card.has-issues {
	border-color: var(--error-color);
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5rem;
	cursor: pointer;
}

.card-header h3 {
	margin: 0;
	font-size: 1rem;
}

.card-body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* Status badges */
.status-badge {
	padding: 0.2rem 0.5rem;
	border-radius: 0.25rem;
	font-size: 0.75rem;
	font-weight: bold;
	text-transform: uppercase;
}

.status-badge.running {
	background: var(--success-color);
	color: black;
}

.status-badge.crashed {
	background: var(--error-color);
	color: white;
}

.status-badge.deploying,
.status-badge.restarting {
	background: var(--deploying-color);
	color: white;
}

.status-badge.stopped {
	background: var(--muted-color);
	color: white;
}

/* Hardware specific */
.hardware-gauge {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.gauge-label {
	display: flex;
	justify-content: space-between;
	font-size: 0.85rem;
}

.gauge-bar {
	height: 8px;
	background: var(--muted-color);
	border-radius: 4px;
	overflow: hidden;
}

.gauge-fill {
	height: 100%;
	background: var(--success-color);
	transition: width 0.3s ease;
}

.hardware-services {
	margin-top: 0.5rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--card-border-color);
}

.hardware-services h4 {
	margin: 0 0 0.5rem 0;
	font-size: 0.9rem;
}

.service-mini {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.25rem 0;
	font-size: 0.85rem;
}

/* Project specific */
.project-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 0.5rem;
}

.project-header h3 {
	margin: 0;
	font-size: 1.1rem;
}

.project-stats {
	font-size: 0.85rem;
	opacity: 0.8;
}

.project-description {
	font-size: 0.85rem;
	opacity: 0.7;
	margin: 0 0 0.75rem 0;
}

.kpi-section {
	padding: 0.5rem;
	background: var(--card-background-color);
	border-radius: var(--border-radius);
	margin-bottom: 0.5rem;
}

.kpi-label {
	display: flex;
	justify-content: space-between;
	font-size: 0.85rem;
	margin-bottom: 0.25rem;
}

.kpi-bar {
	height: 10px;
	background: var(--muted-color);
	border-radius: 5px;
	overflow: hidden;
}

.kpi-fill {
	height: 100%;
	background: var(--success-color);
	transition: width 0.3s ease;
}

.strikes {
	margin-top: 0.5rem;
	color: var(--error-color);
	font-weight: bold;
	font-size: 0.85rem;
}

.requirements-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.requirement-badge {
	padding: 0.4rem 0.8rem;
	border-radius: 0.25rem;
	font-size: 0.75rem;
	cursor: pointer;
	border: 2px solid;
	transition: all 0.2s;
}

.requirement-badge:hover {
	transform: scale(1.05);
}

.requirement-badge.satisfied {
	background: var(--success-color);
	border-color: var(--success-color);
	color: black;
}

.requirement-badge.warning {
	background: var(--warning-color);
	border-color: var(--warning-color);
	color: black;
}

.requirement-badge.error {
	background: var(--error-color);
	border-color: var(--error-color);
	color: white;
}

.requirement-badge.missing {
	background: transparent;
	border-color: var(--error-color);
	color: var(--error-color);
}

/* Service specific */
.service-info {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-size: 0.85rem;
}

.service-card.inactive-hw {
	filter: grayscale(1) opacity(0.5);
}

.inactive-service-label {
	color: var(--error-color);
	font-weight: bold;
	margin-bottom: 0.5rem;
	font-size: 0.95rem;
}

/* Card actions */
.card-actions {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.card-actions button {
	flex: 1;
	margin: 0;
	padding: 0.4rem 0.8rem;
	font-size: 0.85rem;
}

/* Deploy button */
.deploy-button {
	margin-top: auto;
	width: 100%;
}

/* Terminal */
.terminal {
	height: 20vh;
	background: var(--terminal-bg);
	color: var(--terminal-text);
	border-top: 2px solid var(--success-color);
	display: flex;
	flex-direction: column;
	font-family: monospace;
	font-size: 0.85rem;
}

.terminal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 1rem;
	border-bottom: 1px solid var(--success-color);
}

.terminal-header button {
	margin: 0;
	padding: 0.25rem 0.5rem;
	font-size: 0.75rem;
}

.terminal-content {
	flex: 1;
	overflow-y: auto;
	padding: 0.5rem 1rem;
	display: flex;
	flex-direction: column;
}

.log-entry {
	display: flex;
	gap: 1rem;
	padding: 0.15rem 0;
}

.log-time {
	opacity: 0.5;
	min-width: 60px;
}

.log-entry.error {
	color: var(--error-color);
}

.log-entry.warning {
	color: var(--warning-color);
}

.log-entry.info {
	color: var(--deploying-color);
}

/* Modals */
dialog {
	max-width: 800px;
	max-height: 80vh;
	padding: 0;
	border: none;
	border-radius: var(--border-radius);
}

dialog article {
	margin: 0;
	max-height: 80vh;
	overflow-y: auto;
}

dialog header {
	position: sticky;
	top: 0;
	background: var(--card-background-color);
	z-index: 10;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid var(--card-border-color);
}

dialog header h2 {
	margin: 0;
}

.close {
	background: none;
	border: none;
	font-size: 1.5rem;
	cursor: pointer;
	padding: 0.5rem;
	line-height: 1;
}

.close:hover {
	opacity: 0.7;
}

.marketplace-content {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1rem;
}

.marketplace-filters {
	padding: 1rem;
	border-bottom: 1px solid var(--card-border-color);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.filter-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
}

.filter-inline {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9rem;
}

.filter-inline input[type="text"],
.filter-inline select {
	margin: 0;
	padding: 0.3rem 0.5rem;
	font-size: 0.85rem;
	min-width: 160px;
}

.filter-inline input[type="checkbox"] {
	margin: 0;
}

.marketplace-item {
	border: 1px solid var(--card-border-color);
	border-radius: var(--border-radius);
	padding: 1rem;
	background: var(--card-sectionning-background-color);
}

.item-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5rem;
}

.item-header h3 {
	margin: 0;
	font-size: 1.1rem;
}

.item-cost {
	font-weight: bold;
	font-size: 1.1rem;
}

.service-type {
	padding: 0.25rem 0.5rem;
	background: var(--muted-color);
	border-radius: 0.25rem;
	font-size: 0.75rem;
}

.item-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
	margin: 1rem 0;
	font-size: 0.85rem;
}

.marketplace-item > p {
	font-size: 0.9rem;
	opacity: 0.8;
	margin: 0.5rem 0;
}

.marketplace-item button {
	margin: 0;
	width: 100%;
}

/* Service versions */
.service-versions {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 1rem;
}

.version-item {
	border: 1px solid var(--card-border-color);
	border-radius: 0.25rem;
	padding: 0.75rem;
	background: var(--card-background-color);
}

.version-item.deprecated {
	border-color: var(--error-color);
	opacity: 0.7;
}

.version-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5rem;
}

.deprecated-badge {
	padding: 0.2rem 0.5rem;
	background: var(--error-color);
	color: white;
	border-radius: 0.25rem;
	font-size: 0.7rem;
	font-weight: bold;
}

.version-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.25rem;
	margin-bottom: 0.75rem;
	font-size: 0.85rem;
}

/* Service config */
.config-content {
	padding: 1rem;
}

.config-content h3 {
	margin-top: 0;
}

.hardware-detail-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
	margin: 1rem 0;
	font-size: 0.9rem;
}

.config-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 1rem 0;
}

.config-form label {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

/* Mail */
.mail-content {
	padding: 1rem;
}

.mail-content h3 {
	margin-top: 0;
}

.mail-options {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 1rem;
}

.mail-options button {
	margin: 0;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
	.game-container {
		grid-template-columns: 1fr;
	}

	.navbar {
		flex-direction: column;
		gap: 1rem;
	}

	.score-section,
	.info-section {
		flex-direction: row;
		gap: 1rem;
	}
}