/* ═══════════════════════════════════════════════
   Manrope Font
   ═══════════════════════════════════════════════ */
@font-face {
	font-family: 'Manrope';
	src: url('/fonts/Manrope-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Manrope';
	src: url('/fonts/Manrope-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Manrope';
	src: url('/fonts/Manrope-SemiBold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Manrope';
	src: url('/fonts/Manrope-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ═══════════════════════════════════════════════
   Skaro Theme — Global Variables
   ═══════════════════════════════════════════════ */
:root {
	--bg: #212121;
    --bg1: #111111;
	--bg2: #1a1a1a;
	--bg3: #313335;
	--sf: #3c3f41;
	--sf2: #45494a;
	--sf-hover: rgba(75, 110, 175, 0.15);
	--bd: #323232;
	--bd2: #515151;
	--bd-focus: #4b6eaf;
	--tx: #cccccc;
	--tx-bright: #eeeeee;
	--dm: #999999;
	--dm2: #606060;
	--ac: #589df6;
	--ac2: #4b6eaf;
	--ac-dim: #375a7f;
	--gn: #1f9f6d;
	--gn-bright: #19c884;
	--yl: #ffc66d;
	--yl-dim: #bbb529;
	--rd: #f44747;
	--rd-dim: #bc3f3c;
	--or: #d05e52;
	--purple: #9876aa;
	--r: .6rem;
	--r2: .4rem;
	--font-ui: 'JetBrains Mono', 'Consolas', 'Menlo', 'Monaco', monospace;
	--font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* ═══════════════════════════════════════════════
   Light Theme
   ═══════════════════════════════════════════════ */
[data-theme="light"] {
	--bg: #f2f2f2;
    --bg1: #ffffff;
	--bg2: #e8e8ea;
	--bg3: #dcdcdc;
	--sf: #ffffff;
	--sf2: #eaeaea;
	--sf-hover: rgba(75, 110, 175, 0.08);
	--bd: #d0d0d0;
	--bd2: #b8b8b8;
	--bd-focus: #4b6eaf;
	--tx: #2b2b2b;
	--tx-bright: #000000;
	--dm: #6e6e6e;
	--dm2: #a0a0a0;
	--ac: #4a78c2;
	--ac2: #3d6098;
	--ac-dim: #2d4a73;
	--gn: #4a8c3f;
	--gn-bright: #3b7a2c;
	--yl: #b87b1a;
	--yl-dim: #8a6c10;
	--rd: #d03030;
	--rd-dim: #a82828;
	--or: #a85a1b;
	--purple: #7b5da6;
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
	background: #c0c0c0;
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
	background: #a0a0a0;
}

/* ═══════════════════════════════════════════════
   Reset & Base
   ═══════════════════════════════════════════════ */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	font-family: var(--font-sans);
	background: var(--bg);
	color: var(--tx);
	line-height: 1.5;
	font-size: 1rem;
	overflow: hidden;
	height: 100vh;
	min-width: 75rem;
}

a {
	color: var(--ac);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

h2 {
	font-size: 1.6rem;
}

h3 {
	font-size: 1.2rem;
}

select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 1.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
}

hr {
    margin: 2rem 0;
    height: 1px;
    border: none;
    background: var(--bg2);
}

table td {
    padding: .5rem;
}

/* Scrollbar */
::-webkit-scrollbar {
	width: 0.5rem;
	height: 0.5rem;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: var(--bd2);
	border-radius: 0.25rem;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--dm);
}

/* ═══════════════════════════════════════════════
   Shared Components
   ═══════════════════════════════════════════════ */

/* Card */
.card {
    background: var(--bd);
    border: none;
    border-radius: var(--r);
    padding: 1.3rem 1.5rem;
    margin-bottom: .5rem;
}

.card h3 {
	font-weight: 600;
	margin-bottom: .7rem;
	color: var(--tx-bright);
}

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.65rem;
	border-radius: var(--r);
	border: 0.0625rem solid var(--dm2);
    background: transparent;
	color: var(--tx-bright);
	cursor: pointer;
	font-size: 0.9rem;
	font-family: inherit;
	transition: all 0.2s;
	font-weight: 700;
}

.btn:hover {
    background: var(--bg1);
    border-color: var(--bg1);
}

.btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.btn-primary {
	background: var(--tx);
	color: var(--bg2);
	border-color: var(--tx);
}

.btn-primary:hover {
	background: var(--tx-bright);
	border-color: var(--tx-bright);
}

.btn-success {
	background: var(--gn);
	color: #fff;
	border-color: var(--gn);
}

.btn-success:hover {
	background: var(--gn-bright);
	border-color: var(--gn-bright);
	color: #fff;
}

.btn-danger {
	border-color: var(--rd-dim);
	color: var(--rd);
}

.btn-danger:hover {
	background: rgba(244, 71, 71, 0.1);
}

.btn-sm {
	padding: 0.25rem 0.5rem;
	font-size: 0.8rem;
}

/* Button Group */
.btn-group {
	display: flex;
	gap: .75rem;
	margin: 1.3rem auto;
	flex-wrap: wrap;
	align-items: center;
	justify-content: end;
}

/* Alerts */
.alert {
	padding: 0.5rem 0.75rem;
	border-radius: var(--r);
	margin-bottom: 0.75rem;
	font-size: 0.9rem;
	line-height: 1.5;
}

.alert-warn {
	background: rgba(188, 63, 60, 0.1);
	border: 0.0625rem solid rgba(188, 63, 60, 0.3);
	color: var(--rd);
}

.alert-info {
	background: rgba(75, 110, 175, 0.1);
	border: 0.0625rem solid rgba(75, 110, 175, 0.25);
	color: var(--ac);
}

.alert-success {
	background: #19c8841a;
	border: 0.0625rem solid #19c8844d;
	color: var(--gn-bright);
}

/* Instructions */
.instructions {
	background: var(--bg2);
	border: 0.0625rem solid var(--bd);
	border-radius: var(--r);
	padding: 0.75rem 1rem;
	margin: 0.75rem 0;
}

.instructions h4 {
	font-size: 0.75rem;
	color: var(--dm);
	text-transform: uppercase;
	letter-spacing: 0.05rem;
	margin-bottom: 0.375rem;
	font-weight: 600;
}

.instructions ol,
.instructions ul {
	margin-left: 1.125rem;
	color: var(--tx);
}

.instructions li {
	margin-bottom: 0.25rem;
	font-size: 0.8125rem;
}

.instructions li code {
	font-size: 0.75rem;
}

/* Check List */
.check-list {
	list-style: none;
	padding: 0;
}

.check-list li {
	padding: 0.25rem 0;
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.8125rem;
}

/* ═══════════════════════════════════════════════
   Shared Page Patterns
   (extracted from repeated component styles)
   ═══════════════════════════════════════════════ */

.main {
    padding: 1rem 2rem;
}


/* Page Header — used by all tab views */
.main-header {
	margin-bottom: 1.25rem;
}

.main-header h2 {
	font-weight: 600;
	color: var(--tx-bright);
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.main-header p {
	color: var(--dm);
	margin-top: 0.125rem;
	font-size: 0.9375rem;
}

/* Empty state placeholder */
.empty {
	text-align: center;
	padding: 2rem;
	color: var(--dm);
}

.empty p {
	color: var(--dm);
}

/* Hint text */
.hint {
	font-size: 0.8125rem;
	margin-top: 0.375rem;
}

/* Subtitle */
.subtitle {
	color: var(--dm);
	margin-bottom: 0.625rem;
	font-size: 0.8125rem;
}

/* Loading indicator */
.loading-text {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--dm);
	font-size: 0.8125rem;
}

/* Spinner */
.spinner {
	display: inline-block;
	width: 0.875rem;
	height: 0.875rem;
	border: 0.125rem solid var(--bd2);
	border-top-color: var(--ac);
	border-radius: 50%;
	animation: spin 0.6s linear infinite;
}

.spin {
	animation: spin 0.6s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* ═══════════════════════════════════════════════
   Stat Table
   (shared by DashboardTab, StatsTab)
   ═══════════════════════════════════════════════ */

.stat-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.8125rem;
	font-family: var(--font-ui);
}

.stat-table th {
	font-size: 0.6875rem;
	color: var(--dm);
	text-transform: uppercase;
	letter-spacing: 0.03rem;
	padding: 0.375rem 0.5rem;
	border-bottom: 0.0625rem solid var(--bg);
}

.stat-table td {
	padding: 0.3125rem 0.5rem;
	border-bottom: 0.0625rem solid var(--bg);
	color: var(--tx);
}

.stat-table .al { text-align: left; }
.stat-table .ar { text-align: right; }

.stat-table .name {
	font-weight: 500;
	color: var(--tx-bright);
}

.stat-table .num {
	font-family: var(--font-ui);
	color: var(--tx);
}

.stat-table .mono {
	font-family: var(--font-ui);
	font-size: 0.75rem;
}

/* Log table (variant inside .stat-table) */
.log-scroll {
	max-height: 18.75rem;
	overflow-y: auto;
}

.log-table td {
	font-size: 0.75rem;
}

/* Empty hint — italic placeholder text */
.empty-hint {
	color: var(--dm2);
	font-size: 0.8125rem;
	font-style: italic;
}

/* Section head with secondary action button */
.section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: .7rem;
}

.section-head h3 { margin-bottom: 0; }

.sec-btn {
	display: inline-block;
	padding: 0.1875rem 0.625rem;
	font-size: 0.6875rem;
	color: var(--dm);
	background: var(--bg2);
	border: 0.0625rem solid var(--bd);
	border-radius: var(--r2);
	text-decoration: none;
	transition: background .15s, color .15s, border-color .15s;
	cursor: pointer;
	line-height: 1.4;
}

.sec-btn:hover {
	background: var(--sf2);
	color: var(--tx-bright);
	border-color: var(--bd2);
	text-decoration: none;
}

/* ═══════════════════════════════════════════════
   Highlight.js — Skaro-adapted theme
   Uses CSS variables so it works in both dark and
   light modes without a separate stylesheet.
   ═══════════════════════════════════════════════ */
.hljs {
	color: var(--tx);
	background: transparent;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-name,
.hljs-tag {
	color: var(--or);
}

.hljs-string,
.hljs-title.class_,
.hljs-section,
.hljs-attribute,
.hljs-literal,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-addition {
	color: var(--gn);
}

.hljs-comment,
.hljs-quote,
.hljs-meta {
	color: var(--dm);
}

.hljs-deletion {
	color: var(--rd);
}

.hljs-number,
.hljs-regexp,
.hljs-symbol,
.hljs-variable,
.hljs-link {
	color: var(--ac);
}

.hljs-title,
.hljs-title.function_ {
	color: var(--yl);
}

.hljs-params {
	color: var(--tx-bright);
}

.hljs-meta .hljs-keyword,
.hljs-doctag {
	color: var(--purple);
}

.hljs-emphasis {
	font-style: italic;
}

.hljs-strong {
	font-weight: 700;
}

/* ═══════════════════════════════════════════════
   Markdown-rendered links (markdown-it output)
   ═══════════════════════════════════════════════ */
.md-content a,
.turn-text a {
	color: var(--ac);
	text-decoration: none;
}

.md-content a:hover,
.turn-text a:hover {
	text-decoration: underline;
}
