/* Site Monitor customer portal — the same dark ground and the same brand as the
   appliance UI it opens, deliberately: a customer who signs in here and clicks
   through to their dashboard should not notice a seam.

   --brand is CHROME ONLY — the wordmark and the active-tab rule. It is never a
   data colour and never a status colour, for the reason given in the
   appliance's own stylesheet: the terracotta is close enough to the "out"
   series orange that a branded element inside a chart would read as data.
   Status uses the reserved status colours. */

:root {
  color-scheme: dark;
  --page:      #181818;
  --surface:   #1a1a19;
  --surface-2: #232321;
  --text:      #f2f2f2;
  --text-2:    #c3c2b7;
  --muted:     #898781;
  --grid:      #2c2c2a;
  --border:    rgba(255, 255, 255, 0.10);

  --brand:     #c06a44;
  --brand-ink: #f2f2f2;

  --good:      #0ca30c;
  --warning:   #fab219;
  --critical:  #d03b3b;
  --accent:    #3987e5;
  --radius:    10px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--page); color: var(--text);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

main { padding: 16px 18px 40px; max-width: 1100px; }
h1 { font-size: 20px; margin: 4px 0 10px; }

/* ---------- top navigation ---------- */

.topnav {
  display: flex; align-items: center; gap: 2px;
  padding: 0 10px; background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow-x: auto; white-space: nowrap;
}
.topnav a { color: var(--text-2); padding: 13px 14px; font-weight: 500;
  border-bottom: 2px solid transparent; }
.topnav a:hover { color: var(--text); text-decoration: none; }
.topnav a.active { color: var(--text); border-bottom-color: var(--accent); }
.topnav .brand { display: flex; align-items: baseline; gap: 5px; padding-right: 16px;
  border-bottom: none; }
.topnav .whoami { margin-left: auto; display: flex; align-items: center; gap: 8px;
  padding-left: 12px; }

/* The wordmark: "Site" light, "Monitor" in the brand terracotta, the
   attribution small and muted. Identical treatment to the appliance UI. */
.bm { color: var(--brand-ink); font-weight: 600; letter-spacing: .01em; }
.bt { color: var(--brand); font-weight: 600; letter-spacing: .01em; }
.bp { color: var(--muted); font-size: 11px; }

.wordmark { margin-bottom: 18px; font-size: 20px; }
.wordmark .bp { display: block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }

/* ---------- controls ---------- */

.btn {
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 14px; font: inherit; cursor: pointer; min-height: 40px;
}
.btn:hover { border-color: var(--muted); }
.btn.sm { padding: 6px 10px; min-height: 32px; font-size: 13px; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink);
  font-weight: 600; }
.inlineform { display: inline; }

label { display: block; margin: 12px 0 4px; color: var(--text-2); font-size: 13px; }
input[type=email], input[type=password], input[type=text] {
  width: 100%; padding: 11px 12px; background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; font: inherit;
}
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.signin { max-width: 380px; margin: 8vh auto 0; padding: 0 18px; }
.signin .btn { width: 100%; margin-top: 18px; }

/* ---------- tables ---------- */

table.grid { border-collapse: collapse; width: 100%; font-size: 14px; }
table.grid th, table.grid td {
  text-align: left; padding: 9px 10px;
  border-bottom: 1px solid var(--grid); vertical-align: top;
}
table.grid th { color: var(--muted); font-weight: 500; font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em; }

.dim { color: var(--muted); font-size: 12px; }
.ok { color: var(--good); }
.warn { color: var(--warning); }
.bad { color: var(--critical); }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle; }
.dot.up { background: var(--good); }
.dot.down { background: var(--muted); }

.chip { background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 10px; font-size: 12px; color: var(--text-2); }

.note { color: var(--text-2); font-size: 13px; max-width: 70ch; }

.flash { background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--good); border-radius: 6px;
  padding: 9px 12px; margin: 10px 0; font-size: 14px; }
.flash.error { border-left-color: var(--critical); }