/* Daimon Web UI v2 — design system base (Plan 3, Dilim A).
   Mobile-first: single column by default, widened via min-width media queries.
   Light/dark: pure CSS via prefers-color-scheme (NO JS). All colours are custom
   properties on :root (light) with a dark override. Fully self-hosted — no CDN,
   no external fonts/images/scripts (CSP default-src 'self'). */

/* ---- design tokens (light, default) ---- */
:root {
  --bg:        #f7f8fa;
  --surface:   #ffffff;
  --surface-2: #eef1f5;
  --border:    #d8dee6;
  --text:      #1a1f27;
  --text-muted:#5b6672;
  --accent:    #2b6cb0;
  --accent-fg: #ffffff;
  --danger:    #c53030;
  --warn:      #b7791f;
  --ok:        #2f855a;
  --taint-bg:  #fff5f5;
  --taint-fg:  #c53030;
  --taint-bd:  #feb2b2;

  --radius:   8px;
  --radius-sm:4px;
  --gap:      1rem;
  --gap-sm:   .5rem;
  --maxw:     44rem;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* ---- design tokens (dark) ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #12151a;
    --surface:   #1b1f27;
    --surface-2: #232a34;
    --border:    #333c48;
    --text:      #e6e9ee;
    --text-muted:#9aa5b1;
    --accent:    #63b3ed;
    --accent-fg: #10151b;
    --danger:    #fc8181;
    --warn:      #f6ad55;
    --ok:        #68d391;
    --taint-bg:  #2a1a1a;
    --taint-fg:  #fc8181;
    --taint-bd:  #742a2a;
  }
}

/* ---- base ---- */
* { box-sizing: border-box; }
html { color-scheme: light dark; }
body {
  font: 16px/1.55 var(--sans);
  margin: 0;
  color: var(--text);
  background: var(--bg);
}

header, footer {
  padding: .75rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
footer { border-bottom: 0; border-top: 1px solid var(--border); }
header { position: relative; }        /* anchor for the .navlinks dropdown panel */
header h1 { font-size: 1.15rem; margin: 0 0 .5rem; }

/* ---- nav: native <details>/<summary> dropdown (JS-free, CSP-clean).
   Same behaviour on mobile AND desktop — the panel anchors under the summary via
   header{position:relative}. GATE-A revision (2026-07-16). ---- */
.navmenu > summary {
  list-style: none;                 /* remove default disclosure triangle (Firefox/std) */
  cursor: pointer;
  display: inline-block;
  padding: .55rem .8rem;            /* comfortable tap target */
  color: var(--accent);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  user-select: none;
}
.navmenu > summary::-webkit-details-marker { display: none; }  /* Safari/WebKit triangle */
.navlinks {
  position: absolute;
  z-index: 20;                      /* above page content */
  margin-top: .3rem;
  min-width: 12rem;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  padding: .35rem;
}
.navlinks a {
  color: var(--accent);
  text-decoration: none;
  padding: .55rem .6rem;            /* comfortable tap target */
  border-radius: var(--radius-sm);
}
.navlinks a:hover { text-decoration: underline; background: var(--surface-2); }

main {
  padding: 1rem;
  max-width: var(--maxw);
  margin: 0;
}

h2 { font-size: 1.3rem; margin: 0 0 var(--gap); }

/* ---- forms ---- */
label { display: block; margin: .5rem 0; }
input, textarea, button, select {
  font: inherit;
  width: 100%;
  padding: .6rem;
  margin-top: .25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
}
button {
  background: var(--accent);
  color: var(--accent-fg);
  border: 0;
  cursor: pointer;
}
button.danger { background: var(--danger); color: #fff; }

/* ---- Görev prompt: comfortable default size (post-GATE-D UX feedback) ---- */
/* Class specificity beats the desktop `textarea { width:auto }` rule, so the task
   box stays full-width AND tall by default; drag handle still available. */
.taskbox { width: 100%; min-height: 16rem; resize: vertical; }

/* ---- show-password toggle: inline checkbox + label (GATE-A revision) ---- */
.showpw { display: flex; align-items: center; font-weight: normal; }
.showpw input[type=checkbox] { width: auto; margin: 0 .4rem 0 0; }

code, pre { font-family: var(--mono); }
.muted { color: var(--text-muted); }
.error { color: var(--danger); }
.notice { color: var(--ok); }

/* ---- component: card (surface container for a task / block / event group) ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--gap);
  margin: 0 0 var(--gap);
}
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

.empty-state {
  text-align: center;
  color: var(--text-muted);
  padding: 2rem var(--gap);
}
.empty-state p:first-child { color: var(--text); font-size: 1.05rem; }

/* ---- component: badge (small status pill) + taint variant ---- */
.badge {
  display: inline-block;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .05rem .55rem;
  font-size: .82rem;
  line-height: 1.4;
}
.badge-taint {
  background: var(--taint-bg);
  color: var(--taint-fg);
  border-color: var(--taint-bd);
}

/* ---- component: status badge colour-kinds (GATE-B revision 2026-07-16).
   The daemon owns the label text; the gateway maps it to a kind, the kind picks a colour so each
   status is distinguishable at a glance. Built on .badge; a subtle tint + coloured text + matching
   border are DERIVED from the design tokens via color-mix() (no hardcoded hex) so BOTH light and
   dark stay legible — the tokens already carry dark overrides. Unknown/unrecognized label maps to
   .status-unknown (neutral gray) — fail-safe, never breaks. ---- */
.status-success {
  background: color-mix(in srgb, var(--ok) 15%, transparent);
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 45%, transparent);
}
.status-failed {
  background: color-mix(in srgb, var(--danger) 15%, transparent);
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
}
.status-running {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.status-waiting {
  background: color-mix(in srgb, var(--warn) 15%, transparent);
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 45%, transparent);
}
.status-queued {
  background: color-mix(in srgb, var(--text-muted) 14%, transparent);
  color: var(--text-muted);
  border-color: color-mix(in srgb, var(--text-muted) 40%, transparent);
}
.status-unknown {
  background: var(--surface-2);
  color: var(--text-muted);
  border-color: var(--border);
}

/* ---- outcome text: a settled result's message as readable plain text (NOT a dict repr).
   pre-wrap keeps the model message's own line breaks; wide lines scroll inside the block. ---- */
.outcome-text {
  margin: .35rem 0 0;
  padding: .5rem .6rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  white-space: pre-wrap;
  overflow-x: auto;
  font-size: .9rem;
}
.outcome-usage { font-size: .8rem; margin: .35rem 0 0; }

/* ---- component: diff-file (a file's diff block in a preview) ---- */
.diff-file {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin: 0 0 var(--gap-sm);
  overflow: hidden;
}
.diff-file > header {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  padding: .35rem .6rem;
  font: .85rem/1.4 var(--mono);
}
.diff-file pre {
  margin: 0;
  padding: .6rem;
  overflow-x: auto;
  font-size: .85rem;
  background: var(--surface);
}

/* ---- component: event (a single live-stream event row) ---- */
.event {
  display: flex;
  gap: var(--gap-sm);
  padding: .5rem .1rem;
  border-bottom: 1px solid var(--border);
}
.event:last-child { border-bottom: 0; }
.event time {
  color: var(--text-muted);
  font: .8rem/1.5 var(--mono);
  white-space: nowrap;
}
.event .event-body { flex: 1; min-width: 0; }

/* ---- Canlı page: live transcript stream (Task 14) ---- */
.live-head { display: flex; align-items: center; gap: var(--gap-sm); flex-wrap: wrap; }
.live-context { margin-left: auto; font: .8rem/1.4 var(--mono); }
/* warning band: degraded / gap / end{degraded} + capped full-content — VISIBLE, never hidden by CSS.
   The [hidden] attribute (toggled by live.js) is what conceals it until a real signal arrives. */
.live-warning {
  background: var(--taint-bg);
  color: var(--taint-fg);
  border: 1px solid var(--taint-bd);
  border-radius: var(--radius-sm);
  padding: .5rem .6rem;
  margin: var(--gap-sm) 0;
}
.live-error { margin: var(--gap-sm) 0; }
.live-status { font-size: .82rem; margin: var(--gap-sm) 0 0; }
.events { list-style: none; padding: 0; margin: var(--gap-sm) 0 0; }
.events .event { flex-direction: column; gap: .1rem; }   /* stack meta over body (base .event is a row) */
.event-meta { font: .78rem/1.4 var(--mono); }
.event-body { white-space: pre-wrap; word-break: break-word; }
.event-warn { background: var(--taint-bg); border-radius: var(--radius-sm); }
/* full-content event page: the reassembled payload as escaped plain text (wide lines scroll). */
.event-content {
  margin: .35rem 0 0;
  padding: .6rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  white-space: pre-wrap;
  overflow-x: auto;
  font-size: .9rem;
}

/* ---- component: statgrid (responsive KPI grid) ---- */
.statgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-sm);
  margin: 0 0 var(--gap);
}
.statgrid .stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .75rem;
}
.statgrid .stat .value { font-size: 1.4rem; font-weight: 600; }
.statgrid .stat .label { color: var(--text-muted); font-size: .85rem; }

/* ---- legacy list styling (page bodies migrate in later slices) ---- */
.items { list-style: none; padding: 0; margin: 0; }
.items li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .75rem;
  margin: 0 0 var(--gap-sm);
}
.label { font-weight: 600; margin-right: .5rem; }

/* ---- widen for tablet / desktop (min-width, mobile-first) ---- */
@media (min-width: 40rem) {
  header { display: flex; align-items: center; gap: 1.25rem; }
  header h1 { margin: 0; }
  /* nav is a dropdown on desktop too (GATE-A): no flex-row override — the panel stays a panel. */
  input, textarea, button, select { width: auto; }
  .items li form { display: inline-block; margin-right: .5rem; }
}

@media (min-width: 52rem) {
  .statgrid { grid-template-columns: repeat(3, 1fr); }
}