/* style.css - OTcommand: Build & Defend (POC)
** SCADA/HMI-inspired dark theme. Colors are named custom properties
** (not literal values) so the palette stays consistent and each use
** is traceable back to its meaning.
*/

:root
{
	--color-background: #10161c;
	--color-surface: #1a232c;
	--color-surface-raised: #212d38;
	--color-border: #33424f;
	--color-text: #d7e2ea;
	--color-text-muted: #8fa3b0;
	--color-accent: #4fc3d9;
	--color-accent-strong: #7fe0f5;
	--color-safety-risk: #e0663f;
	--color-trust-positive: #6fbf73;
	--color-trust-negative: #d9534f;
	--color-button-background: #243441;
	--color-button-background-hover: #2f4453;
	--color-focus-ring: #7fe0f5;
}

* , *::before , *::after
{
	box-sizing: border-box;
}

body
{
	margin: 0;
	padding: 0;
	background: var(--color-background);
	color: var(--color-text);
	font-family: "Segoe UI", Verdana, sans-serif;
	line-height: 1.4;
}

#app-header
{
	padding: 1rem 1.5rem;
	background: var(--color-surface-raised);
	border-bottom: 1px solid var(--color-border);
}

#app-header h1
{
	margin: 0 0 0.25rem 0;
	color: var(--color-accent-strong);
	font-size: 1.4rem;
}

#app-subtitle
{
	margin: 0;
	color: var(--color-text-muted);
	font-size: 0.9rem;
}

#app-main
{
	max-width: 40rem;
	margin: 0 auto;
	padding: 1rem 1.5rem 3rem 1.5rem;
}

#app-main section
{
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 0.4rem;
	padding: 1rem;
	margin-bottom: 1rem;
}

#app-main h2 , #app-main h3
{
	margin-top: 0;
	color: var(--color-accent);
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

#status-list
{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
}

#status-list li
{
	color: var(--color-text-muted);
}

#status-list span
{
	color: var(--color-text);
	font-weight: bold;
}

#options-list
{
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

button
{
	font: inherit;
	color: var(--color-text);
	background: var(--color-button-background);
	border: 1px solid var(--color-border);
	border-radius: 0.3rem;
	padding: 0.6rem 0.8rem;
	text-align: left;
	cursor: pointer;
}

button:hover
{
	background: var(--color-button-background-hover);
}

button:focus-visible
{
	outline: 2px solid var(--color-focus-ring);
	outline-offset: 2px;
}

#feedback-panel
{
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px dashed var(--color-border);
}

#feedback-subcategory
{
	color: var(--color-accent);
	font-size: 0.9rem;
}

#summary-subcategories
{
	margin: 0;
	padding-left: 1.2rem;
}

#summary-subcategories li
{
	font-family: "Consolas", "Courier New", monospace;
	font-size: 0.85rem;
	margin-bottom: 0.25rem;
}

#app-footer
{
	max-width: 40rem;
	margin: 0 auto;
	padding: 0 1.5rem 2rem 1.5rem;
	color: var(--color-text-muted);
	font-size: 0.8rem;
}