:root{
  --bg: #0f1115;
  --text: #e6e6e6;
  --muted: #a0a4ad;

  --panel-tasks:  #151a2a;  /* slightly different than details */
  --panel-details:#131826;

  --hdr-tasks:    #1b2540;  /* distinct header colors */
  --hdr-details:  #171d2b;

  --blue:   #3a86ff;
  --green:  #2ec27e;
  --yellow: #f7c948;
  --red:    #ef5f6b;

  --chip:   #232633;
  --border: #232633;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; color: var(--text); background: var(--bg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif;
  line-height: 1.45;
}

.topbar {
  display: flex; align-items: center; padding: 10px 16px;
  background: #11141b; border-bottom: 1px solid var(--border);
}
.topbar h1 { margin: 0; font-size: 18px; }
.spacer { flex: 1; }

/* Vertical stack: tasks on top, details/logs below */
main.stack { display: flex; flex-direction: column; gap: 16px; padding: 16px; }

.panel {
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
}
.panel-tasks   { background: var(--panel-tasks); }
.panel-details { background: var(--panel-details); }

.panel-header {
  display: flex; align-items: center; padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.panel-header h2 { margin: 0; font-size: 16px; }
.panel-header-tasks   { background: var(--hdr-tasks); }
.panel-header-details { background: var(--hdr-details); }

.inline-controls { margin-left: auto; display: flex; align-items: center; gap: 10px; color: var(--muted); }
.inline-controls input { width: 110px; }

.table { padding: 8px; }
.table .row {
  display: grid;
  /* name | status | user | active | succ | fail | start | button */
  grid-template-columns: 1fr 110px 120px 90px 120px 90px 140px 90px;
  gap: 8px; align-items: center; padding: 8px; border-bottom: 1px solid var(--border);
}
.table .row.header { font-weight: 600; color: var(--muted); position: sticky; top: 0; z-index: 1; }
.table .row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table .row .right { text-align: right; }
.table .row .actions { display: flex; justify-content: flex-end; }

.btn {
  background: #1f2430; color: var(--text); border: 1px solid var(--border);
  padding: 6px 10px; border-radius: 6px; cursor: pointer;
}
.btn:hover { border-color: #2c3242; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--blue); border-color: var(--blue); }

.switch { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.switch input { transform: translateY(1px); }

.status-bar {
  display: grid; grid-template-columns: auto auto auto 1fr auto; gap: 10px; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
}
.status-bar .counts { display: flex; gap: 8px; }
.status-bar .times { display: flex; gap: 12px; color: var(--muted); }
.ws-ctrls { display: flex; gap: 8px; }

.chip {
  display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--chip); color: var(--text);
  border: 1px solid var(--border); font-size: 12px;
}
.chip-blue   { background: rgba(58,134,255,.15); border-color: rgba(58,134,255,.4); color: #9fc1ff; }
.chip-green  { background: rgba(46,194,126,.15); border-color: rgba(46,194,126,.35); color: #9be2c1; }
.chip-yellow { background: rgba(247,201,72,.15); border-color: rgba(247,201,72,.4); color: #f7d98a; }
.chip-red    { background: rgba(239,95,107,.15); border-color: rgba(239,95,107,.4); color: #f7a2aa; }
.chip-grey   { background: #1c1f29; border-color: #2a2f3f; color: var(--muted); }

.logs {
  margin: 0; padding: 12px 14px;
  white-space: pre-wrap; /* toggle with .nowrap */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  background: #0e1016;
  border-top: 1px solid var(--border);
  max-height: 70vh;
  overflow: auto;
}
.logs.nowrap { white-space: pre; }
.resizable { resize: vertical; min-height: 220px; }

.error {
  padding: 10px 14px; background: rgba(239,95,107,.12); border-top: 1px solid rgba(239,95,107,.4);
  color: #ffb6bd;
}
.hidden { display: none; }

@media (max-width: 1200px) {
  .table .row {
    grid-template-columns: 1fr 100px 120px 70px 100px 80px 130px 90px;
  }
}