/* klivo-admin — jediný ručně psaný stylesheet (D3). Žádný framework, žádný build. */

/* Tmavý režim je jediný (rozhodnutí 2026-08-17, světlá varianta zatím nebude). */
:root {
	color-scheme: dark;
	--bg: #14161c;
	--surface: #1d2028;
	--surface-deep: #0d0f14;
	--border: #343945;
	--text: #e6e8ee;
	--text-muted: #9aa1ae;
	--accent: #7aaaff;
	--accent-hover: #9dc0ff;
	--danger: #f07178;
	--danger-bg: #3a2226;
	--ok: #4cc38a;
	--ok-bg: #1e3329;
	--warn: #e5b567;
	--warn-bg: #3a3222;
	--state-provisioning: #3b6fd4;
	--state-ready: #2b8a52;
	--state-failed: #cc4a52;
	--state-deprovisioning: #5b6472;
	--state-deleted: #5b6472;
	--state-imported: #9257c4;
	--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--radius: 6px;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 16px;
	--space-4: 24px;
	--shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: 15px;
	line-height: 1.5;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: 0 0 var(--space-3); }
h2 { font-size: 1.15rem; margin: 0 0 var(--space-2); }
h3 { font-size: 1rem; margin: var(--space-3) 0 var(--space-2); }
code { font-family: var(--font-mono); }

/* Topbar */
.topbar { background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); }
.topbar-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 var(--space-3);
	display: flex;
	align-items: center;
	gap: var(--space-4);
	min-height: 52px;
}
.brand { font-weight: 700; color: var(--text); }
.brand:hover { text-decoration: none; }
.nav { display: flex; gap: var(--space-3); flex: 1; }
.nav-link { color: var(--text-muted); padding: var(--space-2) 0; border-bottom: 2px solid transparent; }
.nav-link:hover { color: var(--text); text-decoration: none; }
.nav-link.active { color: var(--text); border-bottom-color: var(--accent); }
.topbar-user { display: flex; align-items: center; gap: var(--space-2); color: var(--text-muted); }
.signout-form { display: inline; }

/* Layout */
.content { max-width: 1100px; margin: 0 auto; padding: var(--space-4) var(--space-3); }
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.page-head h1 { margin: 0; }
.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: var(--space-3);
	margin-bottom: var(--space-3);
}
.card-danger { border-color: var(--danger); }
.empty { color: var(--text-muted); font-style: italic; }
.muted { color: var(--text-muted); }

/* Flash zprávy */
.flash { padding: var(--space-2) var(--space-3); border-radius: var(--radius); margin-bottom: var(--space-3); }
.flash-success { background: var(--ok-bg); color: var(--ok); }
.flash-error { background: var(--danger-bg); color: var(--danger); }

/* Tabulky */
.table { width: 100%; border-collapse: collapse; background: var(--surface); }
.table th, .table td {
	text-align: left;
	padding: var(--space-2) var(--space-3);
	border-bottom: 1px solid var(--border);
	vertical-align: top;
}
.table thead th { color: var(--text-muted); font-weight: 600; font-size: 0.85rem; }
.table tbody tr:hover { background: var(--bg); }
.table.kv th { width: 220px; color: var(--text-muted); font-weight: 500; }
.mono td, .mono code { font-family: var(--font-mono); font-size: 0.9rem; }

/* Badges stavů (D3: provisioning=modrá, ready=zelená, failed=červená, depro/deleted=šedá, imported=fialová) */
.badge {
	display: inline-block;
	padding: 1px var(--space-2);
	border-radius: 999px;
	color: #fff;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.5;
}
.badge-provisioning, .badge-pending, .badge-running { background: var(--state-provisioning); }
.badge-ready, .badge-done { background: var(--state-ready); }
.badge-failed { background: var(--state-failed); }
.badge-deprovisioning, .badge-deleted, .badge-skipped { background: var(--state-deprovisioning); }
.badge-imported { background: var(--state-imported); }
.badge-legacy { background: var(--state-imported); }

/* DNS indikátory */
.dns-ok { color: var(--ok); font-weight: 700; }
.dns-bad { color: var(--danger); font-weight: 700; }
.dns-unknown { color: var(--text-muted); font-weight: 700; }

/* Formuláře */
.form-row { margin-bottom: var(--space-3); }
.form-row label { display: block; font-weight: 600; margin-bottom: var(--space-1); }
.form-row input[type="text"], .form-row input[type="password"], .form-row input[type="search"],
.form-row select, .form-row textarea {
	width: 100%;
	max-width: 480px;
	padding: var(--space-2);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	font: inherit;
	background: var(--surface);
}
.form-row .hint { color: var(--text-muted); font-size: 0.85rem; margin-top: var(--space-1); }
.form-error { color: var(--danger); font-size: 0.85rem; display: block; margin-top: var(--space-1); }
.form-errors { color: var(--danger); padding-left: 1.2em; margin: 0 0 var(--space-3); }
.form-hidden { display: none; }
.inline-form { display: inline; }
.checkbox-row label { display: inline; font-weight: 400; margin-left: var(--space-1); }

/* Tlačítka */
.btn {
	display: inline-block;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--text);
	font: inherit;
	cursor: pointer;
}
.btn:hover { background: var(--bg); text-decoration: none; }
/* Světlý akcent na tmavém podkladu → tmavý text tlačítka (kontrast) */
.btn-primary { background: var(--accent); border-color: var(--accent); color: #0f1420; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #1c0f11; }
.btn-danger:hover { background: #d8555c; border-color: #d8555c; }
.btn-link { border: none; background: none; color: var(--accent); padding: 0; cursor: pointer; font: inherit; }
.btn-link:hover { text-decoration: underline; }

/* Filtry */
.filters { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-3); }
.filters select, .filters input[type="search"] {
	padding: var(--space-1) var(--space-2);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	font: inherit;
	background: var(--surface);
}

/* Stránkování */
.pagination { display: flex; gap: var(--space-3); margin-top: var(--space-3); align-items: center; }

/* Joby — kroky a logy (monospace na tmavém podkladu) */
.steps { list-style: none; padding: 0; margin: 0; }
.step { padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
.step-head { display: flex; gap: var(--space-2); align-items: baseline; }
.step-name { font-weight: 600; }
.step-times { color: var(--text-muted); font-size: 0.85rem; }
.step-log summary { cursor: pointer; color: var(--accent); margin-top: var(--space-1); }
.step-log pre {
	background: var(--surface-deep);
	color: #d7dae0;
	border: 1px solid var(--border);
	font-family: var(--font-mono);
	font-size: 0.85rem;
	padding: var(--space-3);
	border-radius: var(--radius);
	overflow-x: auto;
	white-space: pre-wrap;
}

/* Preflight / drift výsledky */
.result-ok { color: var(--ok); font-weight: 700; }
.result-fail { color: var(--danger); font-weight: 700; }

/* Tokeny — jednorázové zobrazení: pevná šířka, žádné zalomení (lekce klivo/vykaz).
   Token = "ka_" + 64 hex = 67 znaků (deterministické, pitfall 23). */
.token-plain {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 0.9rem;
	width: 67ch;
	max-width: 100%;
	white-space: nowrap;
	overflow-x: auto;
	background: var(--surface-deep);
	color: #d7dae0;
	border: 1px solid var(--border);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius);
}
.token-issued .warn { color: var(--warn); background: var(--warn-bg); padding: var(--space-2); border-radius: var(--radius); }

/* Login + error stránky */
.auth-page { display: flex; justify-content: center; padding-top: 10vh; }
.auth-card { width: 380px; }
.error-page { text-align: center; padding-top: 12vh; }
.error-page .code { font-size: 4rem; font-weight: 700; color: var(--text-muted); margin: 0; }