/* gittv admin — same palette as the wallboard. */
:root {
  color-scheme: dark;
  --page:#0d0d0d; --surface-1:#1a1a19; --surface-2:#222220;
  --text-primary:#fff; --text-secondary:#c3c2b7; --text-muted:#898781;
  --hairline:#2c2c2a; --border:rgba(255,255,255,0.10);
  --good:#0ca30c; --critical:#d03b3b; --running:#3987e5; --warning:#fab219;
}
* { box-sizing:border-box; margin:0; padding:0; }
body {
  background:var(--page); color:var(--text-primary); min-height:100vh;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif; font-size:15px; line-height:1.5;
}
body.centered { display:grid; place-items:center; padding:24px; }
a { color:var(--running); }

/* header */
.top {
  display:flex; align-items:center; gap:24px; padding:14px 24px;
  border-bottom:1px solid var(--hairline); background:var(--surface-1); flex-wrap:wrap;
}
.brand { font-weight:700; font-size:18px; letter-spacing:-0.01em; color:var(--text-primary); text-decoration:none; }
.nav { display:flex; gap:4px; }
.nav a {
  color:var(--text-secondary); text-decoration:none; padding:6px 12px; border-radius:8px; font-weight:500;
}
.nav a:hover { background:var(--surface-2); color:var(--text-primary); }
.nav a.on { background:var(--surface-2); color:var(--text-primary); }
.signout { margin-left:auto; display:flex; align-items:center; gap:12px; }
.who { color:var(--text-muted); font-size:13px; }

.tabs { display:flex; gap:4px; padding:12px 24px 0; flex-wrap:wrap; border-bottom:1px solid var(--hairline); }
.tabs a {
  color:var(--text-secondary); text-decoration:none; padding:8px 14px; font-weight:500; font-size:14px;
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tabs a:hover { color:var(--text-primary); }
.tabs a.on { color:var(--text-primary); border-bottom-color:var(--running); }

.page { max-width:860px; margin:0 auto; padding:24px; display:flex; flex-direction:column; gap:20px; }
.auth { width:100%; max-width:400px; display:flex; flex-direction:column; gap:16px; }
.auth-brand { font-weight:700; font-size:22px; text-align:center; }

/* cards */
.card { background:var(--surface-1); border:1px solid var(--border); border-radius:12px; padding:20px; }
.card h2 { font-size:16px; font-weight:600; margin-bottom:4px; }
.card .sub { color:var(--text-muted); font-size:13px; margin-bottom:16px; }
.card h2 + form, .card h2 + .stack, .card h2 + p:not(.sub), .card h2 + table { margin-top:16px; }
.card + .card { margin-top:0; }

.stack { display:flex; flex-direction:column; gap:14px; }
.row { display:flex; gap:14px; flex-wrap:wrap; }
.row > * { flex:1 1 200px; }

/* forms */
.field { display:flex; flex-direction:column; gap:5px; }
.label { font-size:13px; font-weight:600; color:var(--text-secondary); }
.hint { font-size:12px; color:var(--text-muted); }
input[type=text], input[type=password], input[type=number], input[type=url], select {
  background:var(--page); border:1px solid var(--hairline); border-radius:8px;
  padding:9px 11px; color:var(--text-primary); font:inherit; width:100%;
}
input:focus, select:focus, button:focus-visible {
  outline:2px solid var(--running); outline-offset:1px; border-color:transparent;
}
input::placeholder { color:var(--text-muted); }
.check { display:flex; gap:10px; align-items:flex-start; cursor:pointer; }
.check input { margin-top:3px; width:16px; height:16px; accent-color:var(--running); flex:0 0 auto; }
.check span { display:flex; flex-direction:column; gap:2px; }

button, .btn {
  background:var(--running); color:#fff; border:1px solid transparent; border-radius:8px;
  padding:9px 16px; font:inherit; font-weight:600; cursor:pointer; text-decoration:none; display:inline-block;
}
button:hover, .btn:hover { filter:brightness(1.1); }
button.ghost, .btn.ghost { background:transparent; border-color:var(--hairline); color:var(--text-secondary); font-weight:500; }
button.ghost:hover { color:var(--text-primary); border-color:var(--border); }
button.danger { background:var(--critical); }
button.small, .btn.small { padding:5px 10px; font-size:13px; }
.actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:4px; }

/* flash */
.flash { border-radius:10px; padding:11px 14px; font-size:14px; border:1px solid; }
.flash.ok { background:color-mix(in srgb, var(--good) 14%, var(--surface-1)); border-color:color-mix(in srgb, var(--good) 45%, transparent); }
.flash.err { background:color-mix(in srgb, var(--critical) 14%, var(--surface-1)); border-color:color-mix(in srgb, var(--critical) 45%, transparent); }

/* tables */
table { width:100%; border-collapse:collapse; font-size:14px; }
th { text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-muted); padding:0 10px 8px 0; font-weight:600; }
td { padding:10px 10px 10px 0; border-top:1px solid var(--hairline); vertical-align:middle; }
td.right, th.right { text-align:right; padding-right:0; }
.muted { color:var(--text-muted); }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; }
.pill {
  display:inline-block; padding:1px 8px; border-radius:999px; font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.05em; border:1px solid var(--border); color:var(--text-secondary);
}
.pill.on { color:var(--good); border-color:color-mix(in srgb, var(--good) 50%, transparent); }
.pill.off { color:var(--text-muted); }
.pill.warn { color:var(--warning); border-color:color-mix(in srgb, var(--warning) 50%, transparent); }

/* repo picker */
.repolist { max-height:420px; overflow-y:auto; border:1px solid var(--hairline); border-radius:10px; }
.repolist .check {
  padding:9px 12px; border-bottom:1px solid var(--hairline); margin:0; align-items:center; gap:12px;
}
.repolist .check:last-child { border-bottom:none; }
.repolist .check:hover { background:var(--surface-2); }
.repolist .check span { flex-direction:row; align-items:center; gap:10px; flex-wrap:wrap; }
.repolist .name { font-weight:500; }
.filterbar { display:flex; gap:10px; align-items:center; margin-bottom:12px; flex-wrap:wrap; }
.filterbar input { flex:1 1 220px; }
.count { color:var(--text-muted); font-size:13px; }

/* 2FA */
.qr { display:flex; gap:24px; flex-wrap:wrap; align-items:flex-start; }
.qr svg, .qr img { border-radius:8px; flex:0 0 auto; }
.qr-side { flex:1 1 260px; display:flex; flex-direction:column; gap:12px; min-width:240px; }
.secret {
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:15px; letter-spacing:0.06em;
  background:var(--page); border:1px solid var(--hairline); border-radius:8px; padding:10px 12px;
  word-break:break-all; user-select:all;
}
.codes { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; }
.codes code {
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:var(--page);
  border:1px solid var(--hairline); border-radius:6px; padding:7px 10px; text-align:center; user-select:all;
}
input.code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:20px; letter-spacing:0.3em; text-align:center; }

/* Spacing utilities. These exist as classes rather than style="" attributes
   because style-src 'self' drops inline style attributes — verified in Chrome,
   and it fails silently, so the page just quietly loses its spacing. */
.mt-10 { margin-top:10px; }
.mt-12 { margin-top:12px; }
.mt-14 { margin-top:14px; }
.mt-16 { margin-top:16px; }
.mt-18 { margin-top:18px; }
.mb-14 { margin-bottom:14px; }
.mb-16 { margin-bottom:16px; }
.pad-14 { padding:14px; }
.reveal { cursor:pointer; font-size:13px; }