/* Dark theme. Neutral ink for all text; the four status colours appear only on icons and pill
   tints, and always next to a word, so nothing depends on colour alone. */
:root {
  color-scheme: dark;
  --plane: #0d0d0d;   /* page */
  --surface: #1a1a19; /* table */
  --raised: #232321;  /* headings, buttons */
  --band: #141413;    /* customer group rows */
  --ink: #f0efec;
  --ink-2: #c3c2b7;
  --muted: #898781;
  --grid: #2c2c2a;
  --axis: #383835;
  --ring: rgba(255, 255, 255, 0.10);
  --good: #0ca30c;
  --warning: #fab219;
  --critical: #d03b3b;
  --link: #7ab3f5;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; } /* elements below set their own display */
html, body { background: var(--plane); }
body { margin: 0; font: 12.5px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
button { font: inherit; color: var(--ink); background: var(--raised); border: 1px solid var(--axis); border-radius: 4px; padding: 2px 8px; cursor: pointer; }
button:hover { border-color: var(--muted); }

header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 8px 16px; background: var(--surface); border-bottom: 1px solid var(--grid); }
h1 { margin: 0; font-size: 15px; font-weight: 600; }
.meta { margin-top: 2px; color: var(--muted); font-size: 11.5px; }
.user { display: flex; gap: 10px; align-items: center; color: var(--ink-2); font-size: 12px; }
main { padding: 8px 16px 24px; }
/* "New changes deployed" bar: full width, fixed to the top of the window while it is shown. The
   page and the table's pinned heading move down by its height so nothing hides under it. */
.update { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; justify-content: center; align-items: center; gap: 12px; height: 40px; padding: 0 16px; background: #123a66; border-bottom: 1px solid var(--link); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); color: var(--ink); }
body.has-update { padding-top: 40px; }
body.has-update .status thead th { top: 40px; }
button.primary { border-color: var(--link); background: rgba(122, 179, 245, 0.16); font-weight: 600; }
.error { margin-bottom: 8px; padding: 6px 10px; border: 1px solid var(--critical); border-radius: 4px; background: rgba(208, 59, 59, 0.15); }

.toolbar { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin-bottom: 6px; color: var(--ink-2); }
.toolbar .counts { flex: 1 1 auto; }
.counts { display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline; }
.count-title { color: var(--muted); }
.sorting { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 11.5px; }

/* The table always fits the window: fixed column widths per view (below), text wraps instead of
   scrolling sideways, and the page scrolls normally with the heading row pinned to the top. */
table.status { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--ring); border-radius: 6px; }
.status td { overflow-wrap: anywhere; }
.status th, .status td { padding: 4px 8px; border-bottom: 1px solid var(--grid); text-align: left; vertical-align: top; }
.status thead th { position: sticky; top: 0; z-index: 1; padding: 0; background: var(--raised); border-bottom: 1px solid var(--axis); }
.status button.sort { display: block; width: 100%; padding: 5px 8px; border: 0; border-radius: 0; background: transparent; color: var(--ink-2); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
.status button.sort:hover { color: var(--ink); background: rgba(255, 255, 255, 0.04); }
.status th[aria-sort="ascending"] button.sort, .status th[aria-sort="descending"] button.sort { color: var(--ink); }
.status th[aria-sort="ascending"] button.sort::after { content: " ▲"; }
.status th[aria-sort="descending"] button.sort::after { content: " ▼"; }
.status tr.group th { padding: 3px 8px; background: var(--band); color: var(--ink-2); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.status tbody tr:not(.group):hover td { background: #1f1f1e; }
.status tbody tr:last-child td { border-bottom: 0; }

.line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; margin-top: 2px; }
.line:first-child { margin-top: 0; }
.ename { font-weight: 600; }
.sub { color: var(--muted); font-size: 11px; }
.tier { padding: 0 4px; border: 1px solid var(--axis); border-radius: 3px; color: var(--ink-2); font-size: 10px; line-height: 14px; letter-spacing: .03em; text-transform: uppercase; }
.tier.prod { border-color: var(--ink-2); color: var(--ink); font-weight: 700; }
.muted, .sha, .note, .sub { color: var(--muted); }
.note { font-size: 11px; }
td.na { color: var(--muted); }

.pill { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; border-radius: 3px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--ring); color: var(--ink); font-size: 11px; font-weight: 600; line-height: 17px; }
.pill.ok { background: rgba(12, 163, 12, 0.14); box-shadow: inset 0 0 0 1px rgba(12, 163, 12, 0.45); }
.pill.warn { background: rgba(250, 178, 25, 0.12); box-shadow: inset 0 0 0 1px rgba(250, 178, 25, 0.45); }
.pill.bad { background: rgba(208, 59, 59, 0.16); box-shadow: inset 0 0 0 1px rgba(208, 59, 59, 0.60); }
.pill.off, .pill.none { color: var(--ink-2); }
.ico { font-weight: 700; }
.ico.ok, .pill.ok .ico { color: var(--good); }
.ico.warn, .pill.warn .ico { color: var(--warning); }
.ico.bad, .pill.bad .ico { color: var(--critical); }
.ico.off, .pill.off .ico, .pill.none .ico { color: var(--muted); }
.mark { color: var(--ink-2); font-size: 11px; }
.counts .mark { font-size: 12px; }

.host, .ver, .dref { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; }
.dref { color: var(--ink-2); }
.deploy { font-size: 11.5px; }
.dapp { flex: 0 0 58px; color: var(--ink-2); font-weight: 600; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 8px; color: var(--muted); font-size: 11px; }

.views { display: inline-flex; margin-right: 6px; }
.views button { border-radius: 0; margin-left: -1px; color: var(--ink-2); font-size: 11.5px; }
.views button:first-child { border-radius: 4px 0 0 4px; margin-left: 0; }
.views button:last-child { border-radius: 0 4px 4px 0; }
.views button[aria-pressed="true"] { position: relative; border-color: var(--link); background: rgba(122, 179, 245, 0.16); color: var(--ink); }
.clabel { flex: 0 0 auto; min-width: 54px; color: var(--ink-2); font-size: 11px; white-space: nowrap; }
.cline .mark { font-variant-numeric: tabular-nums; }
.cmain { font-weight: 600; font-variant-numeric: tabular-nums; }
td.cost .sub { font-variant-numeric: tabular-nums; }

/* Filter box */
#filter { width: 250px; padding: 3px 8px; border: 1px solid var(--axis); border-radius: 4px; background: var(--surface); color: var(--ink); font: inherit; }
#filter::placeholder { color: var(--muted); }
#filter:focus { outline: 2px solid var(--link); outline-offset: 0; border-color: var(--link); }
td.empty { padding: 16px 8px; color: var(--ink-2); text-align: center; }
.status .glabel { display: inline; }

/* Column widths (% of the table) for each column set */
.v-all .c-env { width: 7.5%; }   .v-all .c-lims { width: 10.5%; } .v-all .c-interpret { width: 10.5%; }
.v-all .c-analyze { width: 8%; } .v-all .c-deploys { width: 14%; } .v-all .c-compute { width: 9%; }
.v-all .c-ami { width: 9%; }     .v-all .c-monitors { width: 8%; } .v-all .c-errors { width: 5%; }
.v-all .c-security { width: 12.5%; } .v-all .c-cost { width: 6%; }
.v-apps .c-env { width: 12%; }   .v-apps .c-lims { width: 20%; }  .v-apps .c-interpret { width: 20%; }
.v-apps .c-analyze { width: 17%; } .v-apps .c-deploys { width: 31%; }
.v-infra .c-env { width: 12%; }  .v-infra .c-compute { width: 16%; } .v-infra .c-ami { width: 16%; }
.v-infra .c-monitors { width: 15%; } .v-infra .c-errors { width: 9%; } .v-infra .c-security { width: 20%; }
.v-infra .c-cost { width: 12%; }
.line.clip { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }