/* INTSODE // Agent Control — Mission-Control-Terminal */
:root {
  --bg: #060a0e;
  --bg-raise: #0b1219;
  --bg-card: #0e161f;
  --line: #1c2a38;
  --line-hot: #2c4258;
  --ink: #cfe3ee;
  --ink-dim: #6d8496;
  --ink-faint: #45596a;
  --phosphor: #3aff9e;
  --phosphor-dim: rgba(58, 255, 158, .12);
  --amber: #ffb347;
  --alert: #ff5468;
  --alert-dim: rgba(255, 84, 104, .12);
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --display: "Chakra Petch", var(--mono);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background:
    radial-gradient(1200px 500px at 70% -10%, #0d1d29 0%, transparent 60%),
    radial-gradient(900px 400px at 0% 110%, #0a1a14 0%, transparent 55%),
    var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.5;
}

/* dezente CRT-Textur über allem */
.scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 999;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

/* ------------------------------------------------ topbar */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-raise), transparent);
  position: sticky; top: 0; backdrop-filter: blur(6px); z-index: 10;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand h1 {
  font-family: var(--display); font-size: 17px; font-weight: 700;
  letter-spacing: .14em; margin: 0; text-transform: uppercase;
}
.brand-sep { color: var(--phosphor); margin: 0 .3em; }
.brand-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--phosphor);
  box-shadow: 0 0 10px var(--phosphor), 0 0 22px rgba(58,255,158,.5);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .45; } }
.topbar-right { display: flex; align-items: center; gap: 18px; }
.clock { color: var(--ink-dim); font-size: 13px; letter-spacing: .08em; }
.logout {
  color: var(--ink-dim); text-decoration: none; font-size: 12px;
  border: 1px solid var(--line); padding: 5px 12px; letter-spacing: .1em;
  text-transform: uppercase; transition: all .15s;
}
.logout:hover { color: var(--alert); border-color: var(--alert); }

/* ------------------------------------------------ board */
.board {
  display: grid; gap: 18px; padding: 20px;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  max-width: 1500px; margin: 0 auto;
}
@media (max-width: 420px) { .board { padding: 12px; gap: 12px; } }

.machine {
  border: 1px solid var(--line); background: var(--bg-card);
  animation: rise .4s ease both;
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.machine-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px dashed var(--line);
}
.machine-name {
  font-family: var(--display); font-weight: 600; font-size: 15px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
}
.machine-name::before { content: "▞ "; color: var(--phosphor); }
.machine-meta { color: var(--ink-faint); font-size: 11px; }

.section-label {
  padding: 10px 16px 2px; font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* Sessions */
.session { padding: 10px 16px; border-bottom: 1px solid rgba(28,42,56,.5); }
.session:last-child { border-bottom: 0; }
.session-top { display: flex; align-items: center; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot-aktiv { background: var(--phosphor); box-shadow: 0 0 8px var(--phosphor); animation: pulse 1.6s infinite; }
.dot-inaktiv { background: var(--amber); opacity: .7; }
.dot-beendet { background: var(--ink-faint); }
.session-project { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.session-status { margin-left: auto; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; }
.session-status.aktiv { color: var(--phosphor); }
.session-status.inaktiv { color: var(--amber); }
.session-status.beendet { color: var(--ink-faint); }
.session-detail {
  color: var(--ink-dim); font-size: 12px; margin: 3px 0 0 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.session-time { color: var(--ink-faint); font-size: 11px; margin-left: 16px; }

/* Jobs */
.job { padding: 10px 16px 14px; border-bottom: 1px solid rgba(28,42,56,.5); }
.job:last-child { border-bottom: 0; }
.job-top { display: flex; align-items: baseline; gap: 8px; }
.job-title { font-weight: 700; overflow-wrap: anywhere; }
.job-pct { margin-left: auto; font-family: var(--display); font-size: 15px; color: var(--phosphor); }
.job.failed .job-pct { color: var(--alert); }
.job.done .job-pct { color: var(--ink-dim); }
.bar {
  height: 10px; margin-top: 7px; border: 1px solid var(--line-hot);
  background: var(--bg); position: relative; overflow: hidden;
}
.bar-fill {
  height: 100%; background: linear-gradient(90deg, rgba(58,255,158,.35), var(--phosphor));
  box-shadow: 0 0 12px rgba(58,255,158,.4); transition: width .6s ease;
  position: relative;
}
.job.running .bar-fill::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(-45deg, transparent 0 8px, rgba(0,0,0,.25) 8px 16px);
  animation: march 1s linear infinite;
}
@keyframes march { to { background-position: 22px 0; } }
.job.failed .bar-fill { background: linear-gradient(90deg, rgba(255,84,104,.4), var(--alert)); box-shadow: 0 0 12px rgba(255,84,104,.4); }
.job.done .bar-fill { background: var(--ink-faint); box-shadow: none; }
.job-detail { color: var(--ink-dim); font-size: 12px; margin-top: 5px; overflow-wrap: anywhere; }
.job-state-badge {
  font-size: 10px; letter-spacing: .15em; text-transform: uppercase;
  padding: 1px 7px; border: 1px solid;
}
.job-state-badge.running { color: var(--phosphor); border-color: var(--phosphor); background: var(--phosphor-dim); }
.job-state-badge.done { color: var(--ink-dim); border-color: var(--ink-faint); }
.job-state-badge.failed { color: var(--alert); border-color: var(--alert); background: var(--alert-dim); animation: pulse 1s infinite; }

/* empty state */
.empty { grid-column: 1 / -1; text-align: center; padding: 90px 20px; color: var(--ink-faint); }
.empty-glyph { font-size: 44px; color: var(--line-hot); margin-bottom: 10px; }
.empty-hint { font-size: 12px; }

/* statusline */
.statusline {
  position: fixed; bottom: 0; left: 0; right: 0; display: flex; gap: 16px;
  padding: 6px 20px; font-size: 11px; color: var(--ink-faint);
  border-top: 1px solid var(--line); background: var(--bg-raise); z-index: 10;
}
.conn-ok { color: var(--phosphor); }
.conn-bad { color: var(--alert); animation: pulse 1s infinite; }

/* ------------------------------------------------ login */
.login-body { display: grid; place-items: center; min-height: 100vh; }
.login-card {
  width: min(380px, 92vw); border: 1px solid var(--line-hot);
  background: var(--bg-card); padding: 34px 30px 30px;
  box-shadow: 0 0 60px rgba(58,255,158,.06), 0 30px 60px rgba(0,0,0,.5);
  animation: rise .5s ease both;
}
.login-head { display: flex; align-items: center; gap: 10px; }
.login-head h1 { font-family: var(--display); font-size: 15px; letter-spacing: .13em; margin: 0; }
.login-sub { color: var(--ink-faint); font-size: 11px; letter-spacing: .25em; text-transform: uppercase; margin: 14px 0 22px; }
.login-error { color: var(--alert); font-size: 12px; border: 1px solid var(--alert); background: var(--alert-dim); padding: 8px 10px; }
.login-card label { display: block; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim); margin: 14px 0 5px; }
.login-card input {
  width: 100%; background: var(--bg); border: 1px solid var(--line);
  color: var(--ink); font-family: var(--mono); font-size: 14px; padding: 10px 12px;
  outline: none; transition: border-color .15s;
}
.login-card input:focus { border-color: var(--phosphor); box-shadow: 0 0 0 1px var(--phosphor-dim); }
.login-card button {
  width: 100%; margin-top: 24px; padding: 11px; cursor: pointer;
  font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: #04140c; background: var(--phosphor);
  border: 0; transition: filter .15s;
}
.login-card button:hover { filter: brightness(1.15); }