:root {
	--bg: #fff;
	--fg: #1a1a1a;
	--muted: #7d8a97;
	--line: #e6eaee;
	--accent: #2066b0;
	--accent-soft: #eaf2fb;
	--warn-bg: #fff6e5;
	--warn-fg: #8a5a00;
	--err-bg: #fdeceb;
	--err-fg: #a8322b;
	--hit: #ffe9a8;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	padding: 16px 20px 40px;
	font: 14px/1.45 "Helvetica Neue", Arial, sans-serif;
	color: var(--fg);
	background: var(--bg);
}

h1 { margin: 0 0 2px; font-size: 20px; font-weight: 600; }
p { margin: 0; }
.muted { color: var(--muted); font-size: 13px; }

.head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

.btn {
	padding: 7px 14px;
	border-radius: 4px;
	border: 1px solid var(--line);
	background: #fff;
	color: var(--fg);
	font-size: 13px;
	cursor: pointer;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn[disabled] { opacity: .5; cursor: default; }

.toolbar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }

.search {
	width: 100%;
	padding: 10px 12px;
	font-size: 15px;
	border: 1px solid var(--line);
	border-radius: 4px;
	outline: none;
}
.search:focus { border-color: var(--accent); }

.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; }
.sel {
	padding: 6px 8px;
	font-size: 13px;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: #fff;
	max-width: 240px;
}

.status { margin-bottom: 12px; font-size: 13px; color: var(--muted); }
.status--warn { padding: 8px 12px; border-radius: 4px; background: var(--warn-bg); color: var(--warn-fg); }
.status--err  { padding: 8px 12px; border-radius: 4px; background: var(--err-bg); color: var(--err-fg); }

.table-wrap { overflow-x: auto; }

.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
.grid th {
	text-align: left;
	padding: 8px 10px;
	border-bottom: 2px solid var(--line);
	font-weight: 600;
	color: var(--muted);
	white-space: nowrap;
}
.grid td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.grid tbody tr:hover { background: #fafbfc; }

.col-robot { width: 24%; }
.col-task  { width: 30%; }
.col-place { width: 32%; }
.col-meta  { width: 14%; }

.robot-name { font-weight: 600; }
.robot-type { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }

.task-title { word-break: break-word; }
.task-title--none { color: var(--muted); font-style: italic; }
.task-resp { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }

.place-line { display: block; }
.place-entity { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.place-stage { font-weight: 600; }
.place-link { display: inline-block; margin-top: 3px; color: var(--accent); text-decoration: none; }
.place-link:hover { text-decoration: underline; }

.tag {
	display: inline-block;
	padding: 1px 6px;
	border-radius: 3px;
	background: var(--accent-soft);
	color: var(--accent);
	font-size: 11px;
	white-space: nowrap;
}
.tag--bp { background: #f0eaf7; color: #6b4a9e; }
.tag--trigger { background: #e7f6ec; color: #2c7a4b; }
.tag--off { background: #f1f3f5; color: var(--muted); }

.tmpl-id { font-size: 11px; color: var(--muted); }

mark { background: var(--hit); padding: 0 1px; }

.empty { padding: 24px 0; color: var(--muted); }

.diag { margin-top: 28px; font-size: 12px; color: var(--muted); }
.diag pre { overflow: auto; max-height: 320px; padding: 10px; background: #f7f8f9; border-radius: 4px; }

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #191b1d; --fg: #e8eaed; --muted: #9aa4ae; --line: #2f3336;
		--accent: #6ba9e8; --accent-soft: #1e2c3b; --hit: #6b5a1e;
		--warn-bg: #3a3020; --warn-fg: #e8c98a;
		--err-bg: #3b2422; --err-fg: #f0a49c;
	}
	.btn, .search, .sel { background: #202325; color: var(--fg); }
	.grid tbody tr:hover { background: #1e2123; }
	.diag pre { background: #202325; }
	.tag--bp { background: #2c2438; color: #c0a8e6; }
	.tag--trigger { background: #1e3226; color: #8fd3a8; }
	.tag--off { background: #26292b; }
}