/* Tajami Platform Console — design system.
   Colour carries a JOB, never decoration:
   • STATUS (good / warning / serious / critical) is reserved; every status also
     has an icon or a word, so colour is never the only signal.
   • SERIES colours identify lines in charts, in a fixed order.
   • INK / SURFACE is everything else. */
:root {
  --bg: #0b0e14; --bg-soft: #0f131c; --panel: #131823; --panel-2: #1a2130; --panel-3: #212a3b;
  --line: #232c3d; --line-soft: rgba(35, 44, 61, .55);
  --ink: #e6edf6; --ink-dim: #b6c2d4; --muted: #8b98ab; --faint: #5d6a7d;
  --accent: #14b8a6; --accent-2: #2dd4bf; --accent-ink: #04201c; --accent-soft: rgba(20, 184, 166, .14);
  --good: #22c55e; --warning: #fab219; --serious: #ec835a; --critical: #ef4444; --info: #60a5fa;
  --good-soft: rgba(34, 197, 94, .14); --warning-soft: rgba(250, 178, 25, .14); --serious-soft: rgba(236, 131, 90, .14);
  --critical-soft: rgba(239, 68, 68, .14); --info-soft: rgba(96, 165, 250, .14);
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #9085e9;
  --radius: 12px; --radius-sm: 8px; --nav-w: 232px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f6f8fb; --bg-soft: #eef2f7; --panel: #fff; --panel-2: #f3f6fa; --panel-3: #e7edf5;
  --line: #dbe3ee; --line-soft: rgba(219, 227, 238, .7);
  --ink: #111827; --ink-dim: #334155; --muted: #5b6577; --faint: #94a3b8;
  --accent: #0f766e; --accent-2: #0d9488; --accent-ink: #fff; --accent-soft: rgba(15, 118, 110, .1);
  --good: #15803d; --warning: #a16207; --serious: #c2410c; --critical: #b91c1c; --info: #1d4ed8;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.45 var(--sans); }
[hidden] { display: none !important; }
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; line-height: 1.25; font-weight: 650; }
h1 { font-size: 20px; } h2 { font-size: 15px; } h3 { font-size: 13px; }
button, input, select, textarea { font: inherit; color: inherit; }
.muted { color: var(--muted); } .faint { color: var(--faint); } .small { font-size: 12px; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.nowrap { white-space: nowrap; }

/* ---- buttons, inputs, chips --------------------------------------------- */
button { cursor: pointer; border: 1px solid var(--line); background: var(--panel-2); border-radius: var(--radius-sm); padding: 6px 12px; }
button:hover { border-color: var(--faint); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary { background: var(--accent); border-color: transparent; color: var(--accent-ink); font-weight: 650; }
button.warn { background: var(--warning); border-color: transparent; color: #1b1200; font-weight: 650; }
button.danger { background: var(--critical); border-color: transparent; color: #fff; font-weight: 650; }
button.ghost { background: transparent; }
button.icon { padding: 6px 9px; }
button.link { border: 0; background: none; padding: 0; color: var(--accent-2); }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input, select, textarea { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 10px; }
textarea { min-height: 70px; width: 100%; resize: vertical; }
label { display: grid; gap: 4px; color: var(--muted); font-size: 13px; }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.plain::before { display: none; }
.chip.good { color: var(--good); background: var(--good-soft); }
.chip.warning { color: var(--warning); background: var(--warning-soft); }
.chip.serious { color: var(--serious); background: var(--serious-soft); }
.chip.critical { color: var(--critical); background: var(--critical-soft); }
.chip.info { color: var(--info); background: var(--info-soft); }
.chip.neutral { color: var(--muted); background: var(--panel-3); }
.chip.run::before { animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .25; } }

/* ---- shell ------------------------------------------------------------- */
.shell { display: grid; grid-template-columns: var(--nav-w) 1fr; min-height: 100vh; }
.nav { position: sticky; top: 0; height: 100vh; overflow: auto; background: var(--bg-soft); border-right: 1px solid var(--line); padding: 16px 12px; display: flex; flex-direction: column; gap: 14px; }
.brand { display: flex; gap: 10px; align-items: center; padding: 2px 6px; }
.brand .mark { width: 34px; height: 34px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.brand .t { font-weight: 700; } .brand .s { color: var(--muted); font-size: 12px; }
.brand.big .mark { width: 42px; height: 42px; font-size: 15px; }
.nav-close { display: none; margin-left: auto; }
.nav-group h3 { color: var(--faint); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 700; margin: 4px 8px 6px; }
.nav-group a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-sm); color: var(--ink-dim); }
.nav-group a:hover { background: var(--panel); text-decoration: none; }
.nav-group a.on { background: var(--accent-soft); color: var(--ink); }
.nav-group a .ico { width: 18px; text-align: center; opacity: .85; }
.nav-group a .count { margin-left: auto; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--critical); color: #fff; }
.nav-group a .count.warning { background: var(--warning); color: #1b1200; }
.nav-group a .count.zero { display: none; }
.nav-foot { margin-top: auto; display: grid; gap: 8px; font-size: 12px; color: var(--muted); padding: 0 6px; }
.nav-foot .row { display: flex; align-items: center; gap: 8px; }
.foot-actions { display: flex; gap: 6px; }
.foot-actions button { flex: 1; font-size: 12px; padding: 5px 6px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); display: inline-block; }
.dot.up { background: var(--good); box-shadow: 0 0 0 3px var(--good-soft); }
.dot.down { background: var(--critical); box-shadow: 0 0 0 3px var(--critical-soft); }
.dot.slow { background: var(--warning); }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: 12px; padding: 14px 24px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.topbar .sub { color: var(--muted); font-size: 13px; }
.topbar .menu { display: none; }
.spacer { flex: 1; }
.envs { display: flex; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; }
.envs button { border: 0; background: transparent; padding: 5px 12px; font-size: 12px; font-weight: 700; letter-spacing: .04em; border-radius: 7px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.envs button .d { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.envs button.on { background: var(--panel-3); color: var(--ink); }
.envs button.on .d { background: var(--accent); }
.envs.disabled { opacity: .4; pointer-events: none; }
.view { padding: 20px 24px 60px; display: grid; gap: 16px; max-width: 1500px; width: 100%; }

/* ---- cards, tiles, tables ---------------------------------------------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; min-width: 0; }
.card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.card-head .spacer { flex: 1; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: grid; gap: 4px; border-left: 3px solid var(--line); }
.tile .k { color: var(--muted); font-size: 12px; font-weight: 600; }
.tile .v { font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.tile .v small { font-size: 14px; color: var(--muted); font-weight: 500; }
.tile .h { color: var(--faint); font-size: 12px; }
.tile.good { border-left-color: var(--good); } .tile.warning { border-left-color: var(--warning); }
.tile.serious { border-left-color: var(--serious); } .tile.critical { border-left-color: var(--critical); } .tile.na .v { color: var(--faint); }
.verdict { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); }
.verdict .big { font-size: 22px; }
.verdict.good { border-color: color-mix(in srgb, var(--good) 40%, var(--line)); background: var(--good-soft); }
.verdict.warning { border-color: color-mix(in srgb, var(--warning) 40%, var(--line)); background: var(--warning-soft); }
.verdict.critical { border-color: color-mix(in srgb, var(--critical) 40%, var(--line)); background: var(--critical-soft); }

.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; color: var(--faint); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tr.click { cursor: pointer; }
.table tr.click:hover td { background: var(--panel-2); }
.scroll-x { overflow-x: auto; }

.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { display: inline-flex; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 9px; background: var(--panel-2); border: 1px solid var(--line); font-size: 13px; }

.notice { border: 1px dashed var(--line); border-radius: var(--radius); padding: 14px 16px; color: var(--muted); background: var(--panel); }
.notice.warn { border-style: solid; border-color: color-mix(in srgb, var(--warning) 45%, var(--line)); color: var(--ink-dim); background: var(--warning-soft); }
.notice.error { border-style: solid; border-color: color-mix(in srgb, var(--critical) 45%, var(--line)); background: var(--critical-soft); color: var(--ink); }
.empty { color: var(--faint); padding: 18px; text-align: center; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; background: var(--panel-2); padding: 5px 11px; font-size: 12px; }
.seg button.on { background: var(--accent-soft); color: var(--ink); font-weight: 700; }

/* ---- releases board ------------------------------------------------------ */
.rel-cols, .rel-row { display: grid; grid-template-columns: 150px 1fr 128px 1fr 128px 1fr; gap: 10px; align-items: stretch; }
.rel-cols { color: var(--faint); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; padding: 0 4px; }
.rel-row { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.rel-app { font-weight: 700; display: grid; gap: 6px; align-content: start; }
.rel-app .svcs { font-weight: 400; color: var(--faint); font-size: 12px; }
.rel-env { background: var(--panel-2); border-radius: 10px; padding: 10px; display: grid; gap: 4px; align-content: start; min-height: 112px; }
.rel-env .ver { font-family: var(--mono); font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.rel-env .meta { color: var(--muted); font-size: 12px; }
.rel-env .badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.rel-env .acts { display: flex; gap: 12px; font-size: 12px; }
.rel-env.empty { place-items: center; color: var(--faint); font-size: 13px; }
.rel-arrow { display: grid; align-content: center; justify-items: center; gap: 6px; text-align: center; }
.rel-arrow .g { color: var(--faint); font-size: 18px; }
.rel-arrow button { width: 100%; font-size: 12px; padding: 6px 8px; }
.rel-arrow .why { font-size: 11px; color: var(--faint); }

/* ---- logs ---------------------------------------------------------------- */
.logs { font-family: var(--mono); font-size: 12px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); max-height: 66vh; overflow: auto; }
.logline { display: grid; grid-template-columns: 92px 110px 54px 1fr; gap: 10px; padding: 3px 10px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.logline:hover { background: var(--panel); }
.logline .lv { font-weight: 700; text-transform: uppercase; font-size: 11px; }
.logline .lv.error { color: var(--critical); } .logline .lv.warn { color: var(--warning); } .logline .lv.info { color: var(--info); } .logline .lv.debug { color: var(--faint); }
.logline .svc { color: var(--accent-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logline .msg { white-space: pre-wrap; word-break: break-word; }
.logline.open .msg { white-space: pre-wrap; }
.logline .attrs { grid-column: 2 / -1; color: var(--muted); white-space: pre-wrap; padding: 4px 0 6px; }
.logtext { font-family: var(--mono); font-size: 12px; white-space: pre-wrap; word-break: break-word; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; max-height: 70vh; overflow: auto; margin: 0; }

/* ---- charts -------------------------------------------------------------- */
.chart { width: 100%; height: 120px; display: block; }
.chart .grid-line { stroke: var(--line); stroke-width: 1; }
.chart .axis { fill: var(--faint); font-size: 10px; }
.chart .series { fill: none; stroke-width: 1.8; }
.chart .area { opacity: .12; }
.chart .limit { stroke: var(--critical); stroke-dasharray: 4 4; stroke-width: 1; }
.c1 { stroke: var(--s1); fill: var(--s1); } .c2 { stroke: var(--s2); fill: var(--s2); } .c3 { stroke: var(--s3); fill: var(--s3); }
.c4 { stroke: var(--s4); fill: var(--s4); } .c5 { stroke: var(--s5); fill: var(--s5); } .c6 { stroke: var(--s6); fill: var(--s6); }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 3px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.legend i.c1 { background: var(--s1); } .legend i.c2 { background: var(--s2); } .legend i.c3 { background: var(--s3); }
.bar { width: 100%; height: 10px; display: block; }
.bar .track { fill: var(--panel-3); } .bar .fill { fill: var(--accent); } .bar .fill.warning { fill: var(--warning); } .bar .fill.critical { fill: var(--critical); }
.bar .tick { stroke: var(--ink-dim); stroke-width: 1.5; }
.runs-dots { display: flex; gap: 3px; }
.runs-dots a { width: 10px; height: 18px; border-radius: 3px; background: var(--panel-3); display: inline-block; }
.runs-dots a.success { background: var(--good); } .runs-dots a.failure, .runs-dots a.timed_out { background: var(--critical); }
.runs-dots a.cancelled, .runs-dots a.skipped { background: var(--faint); } .runs-dots a.running { background: var(--info); }

/* ---- drawer, dialog, toast, login -------------------------------------- */
.scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 20; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(920px, 100vw); background: var(--panel); border-left: 1px solid var(--line); z-index: 21; display: flex; flex-direction: column; }
.drawer-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { flex: 1; }
.drawer-body { padding: 16px 18px; overflow: auto; display: grid; gap: 12px; align-content: start; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.tabs button { border: 0; border-radius: 0; background: none; padding: 8px 12px; color: var(--muted); border-bottom: 2px solid transparent; }
.tabs button.on { color: var(--ink); border-bottom-color: var(--accent); }
dialog { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--ink); width: min(560px, calc(100vw - 32px)); padding: 18px; }
dialog::backdrop { background: rgba(0, 0, 0, .55); }
#dialog-body { display: grid; gap: 10px; margin: 12px 0; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }
.callout { border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; }
.callout.info { background: var(--info-soft); } .callout.warn { background: var(--warning-soft); } .callout.danger { background: var(--critical-soft); }
.check { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.toast { position: fixed; right: 16px; bottom: 16px; max-width: 460px; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 10px; z-index: 30; box-shadow: 0 8px 30px rgba(0, 0, 0, .35); }
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-card { width: min(400px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: grid; gap: 14px; }
.login form { display: grid; gap: 12px; }
.error { color: var(--critical); min-height: 1.2em; margin: 0; }
details summary { cursor: pointer; color: var(--muted); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 13px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 1100px) { .g3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .nav { position: fixed; z-index: 22; width: var(--nav-w); transform: translateX(-100%); transition: transform .2s; }
  .nav.open { transform: none; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45); }
  .nav-close { display: inline-block; }
  .topbar { padding: 12px 14px; flex-wrap: wrap; }
  .topbar .menu { display: inline-block; }
  .view { padding: 14px; }
  .g2, .g3 { grid-template-columns: 1fr; }
  .rel-cols { display: none; }
  .rel-row { grid-template-columns: 1fr; }
  .rel-arrow { justify-items: start; grid-auto-flow: column; justify-content: start; align-items: center; }
  .rel-arrow .g { transform: rotate(90deg); }
  .rel-env::before { content: attr(data-env); font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; }
  .logline { grid-template-columns: 70px 1fr; }
  .logline .svc, .logline .lv { grid-row: 1; }
  .logline .msg { grid-column: 1 / -1; }
}