/* ---- Theme palettes -------------------------------------------------------
   Light is the default (:root). Dark applies when the user picks it
   (:root[data-theme="dark"]) or when they pick "System" (no data-theme attr)
   and the OS is dark. Explicit light (data-theme="light") always wins. */
:root {
  --bg: #f4f6f9; --panel: #ffffff; --panel-2: #eef1f5; --border: #d9dee5;
  --text: #1b2430; --muted: #64707e; --accent: #2f7fe0; --accent-d: #2f7fe0;
  --accent-ct: #ffffff;
  --ok-bg: #e4f7ec; --ok-fg: #17864a;
  --fail-bg: #fdeaea; --fail-fg: #c62f2f;
  --warn-bg: #fdf1dd; --warn-fg: #b7791a;
  --run-bg: #e4eefb; --run-fg: #2f6fd0;
  --log-bg: #0f141b; --log-fg: #d6dde7;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0f1419; --panel: #1a2027; --panel-2: #222a33; --border: #2c3742;
    --text: #e6e9ee; --muted: #8b97a4; --accent: #4a9eff; --accent-d: #2f7fe0;
    --accent-ct: #ffffff;
    --ok-bg: #123a24; --ok-fg: #35c46b;
    --fail-bg: #3a1515; --fail-fg: #ef6a6a;
    --warn-bg: #3a2e1a; --warn-fg: #e6a23c;
    --run-bg: #14314f; --run-fg: #4a9eff;
    --log-bg: #0b0f14; --log-fg: #cdd6e0;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1419; --panel: #1a2027; --panel-2: #222a33; --border: #2c3742;
  --text: #e6e9ee; --muted: #8b97a4; --accent: #4a9eff; --accent-d: #2f7fe0;
  --accent-ct: #ffffff;
  --ok-bg: #123a24; --ok-fg: #35c46b;
  --fail-bg: #3a1515; --fail-fg: #ef6a6a;
  --warn-bg: #3a2e1a; --warn-fg: #e6a23c;
  --run-bg: #14314f; --run-fg: #4a9eff;
  --log-bg: #0b0f14; --log-fg: #cdd6e0;
}

/* Match native form controls (checkbox tick, scrollbars) to the active theme */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; } }

* { box-sizing: border-box; }
input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 0.9em; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; height: 52px; background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--text); font-size: 1.05rem; }
.brand:hover { text-decoration: none; }
.brand-logo { height: 32px; width: auto; display: block; border-radius: 6px; }
.topbar nav { display: flex; align-items: center; gap: 16px; }
.topbar .user { color: var(--muted); }
.online { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.85rem; max-width: 320px; }
.online #online-list { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.online-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ok-fg); flex: 0 0 auto;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok-fg) 25%, transparent);
  animation: abw-pulse 2s ease-in-out infinite;
}

.theme-picker { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.theme-ico { font-size: 1rem; }

select {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 10px; font-size: 0.92rem; cursor: pointer;
}
select:focus { outline: none; border-color: var(--accent); }
select:disabled { opacity: 0.5; cursor: not-allowed; }

.container { max-width: 960px; margin: 24px auto; padding: 0 20px; }

.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 20px 22px; margin-bottom: 20px;
}
.card h2 { margin: 0 0 14px; font-size: 1.1rem; }

.banner { padding: 12px 16px; border-radius: 8px; margin-bottom: 18px; }
.banner.warn { background: var(--warn-bg); border: 1px solid var(--warn-fg); color: var(--warn-fg); }
.banner.ok { background: var(--ok-bg); border: 1px solid var(--ok-fg); color: var(--ok-fg); }

.muted { color: var(--muted); }
.error { color: var(--fail-fg); }

.btn {
  display: inline-block; cursor: pointer; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text); padding: 8px 16px;
  border-radius: 8px; font-size: 0.95rem;
}
.btn:hover { border-color: var(--accent); text-decoration: none; }
.btn.primary { background: var(--accent-d); border-color: var(--accent-d); color: var(--accent-ct); }
.btn.primary:hover { filter: brightness(1.07); }
.btn.danger { background: var(--fail-bg); border-color: var(--fail-fg); color: var(--fail-fg); }
.btn.small { padding: 4px 10px; font-size: 0.85rem; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Build trigger form */
.build-form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.build-form label { color: var(--muted); font-size: 0.9rem; }
.build-form select { min-width: 260px; }
.build-go { min-width: 96px; text-align: center; }
.build-desc {
  flex-basis: 100%; padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
  font-size: 0.95rem;
}
.build-desc:focus { outline: none; border-color: var(--accent); }
.job-desc { font-size: 0.82rem; }
.user-pw, .user-pw-sm {
  padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text); font-size: 0.9rem;
}
.user-pw-sm { padding: 4px 8px; font-size: 0.82rem; width: 130px; }
.user-pw:focus, .user-pw-sm:focus { outline: none; border-color: var(--accent); }

/* Password show/hide (eye) toggle */
.pw-wrap { display: flex; align-items: stretch; gap: 6px; width: 100%; }
.pw-wrap > input { flex: 1 1 auto; min-width: 0; }
.pw-toggle {
  flex: 0 0 auto; width: 40px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--muted); cursor: pointer; padding: 0;
}
.pw-toggle:hover { color: var(--text); border-color: var(--accent); }
.pw-toggle svg { width: 18px; height: 18px; }
.clean-check { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.9rem; cursor: pointer; white-space: nowrap; }
.clean-check input { cursor: pointer; }

/* Build-task chips (multi-build portal framing) */
.tasks-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.task-chip {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--panel-2); min-width: 150px;
}
.task-chip.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.task-chip .task-name { font-weight: 600; }
.task-chip .task-sub { color: var(--muted); font-size: 0.8rem; }
.task-chip.placeholder { opacity: 0.55; }
.task-chip .soon {
  align-self: flex-start; margin-top: 2px; font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--muted); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 7px;
}
.build-cmd-hint { margin: 10px 0 0; font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.85rem; }

table { width: 100%; border-collapse: collapse; }
table.jobs th, table.jobs td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); }
table.jobs th { color: var(--muted); font-weight: 600; font-size: 0.85rem; }
table.kv th { text-align: left; color: var(--muted); font-weight: 600; padding: 6px 16px 6px 0; vertical-align: top; white-space: nowrap; }
table.kv td { padding: 6px 0; }

.status { padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; text-transform: capitalize; }
.status-running { background: var(--run-bg); color: var(--run-fg); }
.status-success { background: var(--ok-bg); color: var(--ok-fg); }
.status-failed  { background: var(--fail-bg); color: var(--fail-fg); }
.status-error   { background: var(--warn-bg); color: var(--warn-fg); }

.detail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.log {
  background: var(--log-bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 14px; overflow-x: auto; max-height: 520px; overflow-y: auto;
  font-family: "SFMono-Regular", Consolas, monospace; font-size: 12.5px; line-height: 1.45;
  white-space: pre; color: var(--log-fg);
}

.login-card { max-width: 360px; margin: 8vh auto 0; }
.login-card h1 { margin: 0 0 18px; font-size: 1.3rem; text-align: center; }
.login-card form { display: flex; flex-direction: column; gap: 14px; }
.login-card label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 0.85rem; }
.login-card input {
  padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text); font-size: 1rem;
}
.login-card input:focus { outline: none; border-color: var(--accent); }

/* Running spinner + live-build UI */
.spin {
  display: inline-block; width: 10px; height: 10px; margin-right: 6px;
  vertical-align: -1px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: abw-spin 0.7s linear infinite;
}
@keyframes abw-spin { to { transform: rotate(360deg); } }
.status-running { animation: abw-pulse 1.6s ease-in-out infinite; }
@keyframes abw-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }

.active-run {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 4px;
  background: var(--run-bg); border: 1px solid var(--border); border-radius: 8px;
}
.active-run span:nth-child(2) { flex: 1; min-width: 200px; }

form.inline { display: inline; margin: 0; }
.artifact-actions { display: flex; gap: 8px; align-items: center; }
.artifact-cell { display: flex; flex-wrap: wrap; gap: 6px; }
.artifact-cell .btn { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Wide content (data tables) scrolls inside its own box, never the page body. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table.jobs { min-width: 560px; }
.build-cmd-hint { overflow-x: auto; white-space: nowrap; max-width: 100%; }

/* Small-screen (phone) tuning */
@media (max-width: 640px) {
  .container { margin: 16px auto; padding: 0 12px; }
  .card { padding: 16px 14px; }
  .topbar { padding: 0 12px; }
  .topbar nav { gap: 10px; }
  .build-form { align-items: stretch; }
  .build-form select { min-width: 0; width: 100%; }
  .build-form .build-go { width: 100%; }
  .active-run { flex-direction: column; align-items: flex-start; }
  .detail-head { flex-wrap: wrap; }
}

/* Put a little room between a card heading and an action button in its header */
.detail-head form { margin: 0; }