/* Deliberately plain -- this is a personal home-lab tool, not a product. Dark-only
   (matches the *arr apps' own default themes this dashboard sits alongside) rather
   than a full light/dark toggle, to keep the one CSS file small and legible. */

:root {
  --bg: #14161a; --panel: #1c1f26; --border: #2c313c; --text: #d7dae0; --muted: #838a99;
  --ok: #3fb950; --warn: #d29922; --err: #f85149; --info: #58a6ff; --accent: #6e9fff;
}
* { box-sizing: border-box; }
body {
  background: var(--bg); color: var(--text); font: 14px/1.5 -apple-system, Segoe UI, sans-serif;
  margin: 0; padding: 0 1.5rem 3rem;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
header { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; }
header h1 { font-size: 1.1rem; margin: 0; }
header .spacer { flex: 1; }
header .whoami { color: var(--muted); font-size: 0.85rem; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; }
tr:hover td { background: #1a1d24; }

.badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 1rem; font-size: 0.75rem; font-weight: 600; }
.badge-ok { background: rgba(63,185,80,.15); color: var(--ok); }
.badge-warn { background: rgba(210,153,34,.15); color: var(--warn); }
.badge-err { background: rgba(248,81,73,.15); color: var(--err); }
.badge-info { background: rgba(88,166,255,.15); color: var(--info); }
.badge-muted { background: rgba(131,138,153,.15); color: var(--muted); }

.card { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; }
.health-strip { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.health-pill { font-size: 0.78rem; padding: 0.2rem 0.6rem; border-radius: 1rem; border: 1px solid var(--border); }

.stage-track { display: flex; gap: 0.25rem; margin: 0.5rem 0; flex-wrap: wrap; }
.stage { padding: 0.25rem 0.6rem; border-radius: 4px; font-size: 0.78rem; border: 1px solid var(--border); }
.stage-done { background: rgba(63,185,80,.12); border-color: var(--ok); }
.stage-active { background: rgba(88,166,255,.12); border-color: var(--info); }
.stage-blocked { background: rgba(248,81,73,.12); border-color: var(--err); }
.stage-unknown { color: var(--muted); }

.diagnosis { border-left: 3px solid var(--border); padding: 0.5rem 0.75rem; margin: 0.5rem 0; }
.diagnosis.ok { border-color: var(--ok); }
.diagnosis.info { border-color: var(--info); }
.diagnosis.warning { border-color: var(--warn); }
.diagnosis.error { border-color: var(--err); }
.diagnosis .headline { font-weight: 600; }
.diagnosis .since { color: var(--muted); font-size: 0.8rem; }

.attempt-card { border: 1px solid var(--border); border-radius: 6px; padding: 0.75rem; margin: 0.5rem 0; }
.attempt-card .name { font-weight: 600; font-size: 0.9rem; }
.attempt-card .covers { color: var(--muted); font-size: 0.8rem; }

button, .btn {
  background: var(--accent); color: #0b1220; border: none; padding: 0.4rem 0.8rem;
  border-radius: 4px; font-weight: 600; cursor: pointer; font-size: 0.85rem;
}
button.secondary { background: transparent; color: var(--text); border: 1px solid var(--border); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

pre.log { background: #0d0f12; padding: 0.75rem; border-radius: 4px; max-height: 260px; overflow: auto; font-size: 0.78rem; }
.login-box { max-width: 320px; margin: 4rem auto; }
.login-box input { width: 100%; padding: 0.5rem; margin-bottom: 0.75rem; background: var(--panel); border: 1px solid var(--border); color: var(--text); border-radius: 4px; }
.error { color: var(--err); margin-bottom: 0.75rem; }
.muted { color: var(--muted); }
.evidence { font-size: 0.78rem; color: var(--muted); margin-top: 0.25rem; }