/* Alorny Vault. Flat solid colours only, no gradient anywhere.
   Control rows wrap, they never scroll sideways. Only the two data tables may
   scroll inside their own container, and their scrollbars stay visible. */

:root {
  --bg:        #07090b;
  --panel:     #0e1216;
  --panel-2:   #131920;
  --line:      #1e2833;
  --line-hi:   #2c3a49;
  --ink:       #e8edf2;
  --ink-dim:   #8e9cab;
  --ink-faint: #5d6b7a;
  --amber:     #f0a02a;
  --amber-ink: #1a1206;
  --teal:      #189d6d;
  --red:       #e0484d;
  --red-soft:  #2a1214;
  --amber-soft:#2a1f0c;
  --teal-soft: #0c2019;
  --mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", Consolas, monospace;
  --sans: "Segoe UI", system-ui, -apple-system, sans-serif;
  --r: 4px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  overflow-x: hidden;          /* the page itself never scrolls sideways */
}

a { color: var(--amber); }

/* ---------------------------------------------------------------- header */

header {
  display: flex;
  flex-wrap: wrap;             /* wraps, never scrolls */
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
header img { width: 26px; height: 26px; border-radius: var(--r); }
header h1 { font-size: 15px; margin: 0; letter-spacing: .04em; font-weight: 650; }
header .sub { color: var(--ink-faint); font-size: 12px; font-family: var(--mono); }
header .spacer { flex: 1 1 auto; min-width: 0; }

/* ------------------------------------------------------------------ tabs */

nav.tabs {
  display: flex;
  flex-wrap: wrap;             /* wraps onto a second line, never overflow-x */
  gap: 6px;
  padding: 10px 18px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
nav.tabs button {
  font-family: var(--mono);
  font-size: 12px;
  padding: 7px 13px;
  background: var(--panel);
  color: var(--ink-dim);
  border: 1px solid var(--line);
  border-radius: var(--r);
  cursor: pointer;
}
nav.tabs button:hover { color: var(--ink); border-color: var(--line-hi); }
nav.tabs button[aria-selected="true"] {
  background: var(--amber); color: var(--amber-ink);
  border-color: var(--amber); font-weight: 650;
}

main { padding: 18px; max-width: 100%; }
section[hidden] { display: none; }

/* ------------------------------------------------------------------ banner */

/* Severity reads from the full red border, the red heading and the per finding
   chip. It does not need a thick bar down one side as well. */
.banner {
  background: var(--red-soft);
  border: 1px solid var(--red);
  border-radius: var(--r);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.banner h2 { margin: 0 0 8px; font-size: 14px; color: var(--red); letter-spacing: .04em; }
.leak {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 7px 0; border-top: 1px solid var(--line);
  min-width: 0;
}
/* Key names run long, for example UNMANAGED:github:Fine grained personal access
   token, and file paths run longer. Every child has to be allowed to break or
   the row pushes past its container at narrow widths. */
.leak > * { min-width: 0; overflow-wrap: anywhere; }
.leak .where {
  font-family: var(--mono); font-size: 11px; color: var(--ink-dim);
}

/* ------------------------------------------------------------------ stats */

.stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.stat {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 10px 14px; min-width: 120px; flex: 0 1 auto;
}
.stat .n { font-family: var(--mono); font-size: 20px; font-weight: 650; }
.stat .l { font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; }
.stat.bad .n { color: var(--red); }
.stat.good .n { color: var(--teal); }
.stat.warn .n { color: var(--amber); }

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

.controls {
  display: flex; flex-wrap: wrap; gap: 8px;       /* wrap, never overflow-x */
  align-items: center; margin-bottom: 14px;
}
input[type="text"], input[type="password"], input[type="number"], select {
  font-family: var(--mono); font-size: 12px;
  background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 7px 9px; min-width: 0; max-width: 100%;
}
input:focus, select:focus { outline: 2px solid var(--amber); outline-offset: -1px; }
input::placeholder { color: var(--ink-faint); }

button {
  font-family: var(--mono); font-size: 12px;
  background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 7px 11px; cursor: pointer;
}
button:hover { border-color: var(--line-hi); }
button.primary { background: var(--amber); color: var(--amber-ink); border-color: var(--amber); font-weight: 650; }
button.danger  { background: var(--red-soft); color: var(--red); border-color: var(--red); }
button.armed   { background: var(--red); color: #fff; border-color: var(--red); font-weight: 650; }
button:disabled { opacity: .45; cursor: default; }

/* ------------------------------------------------------------------ table */

/* The ONE allowed horizontal scroll: real tabular data, inside its own
   container, with a scrollbar that stays visible and draggable. */
.tablewrap {
  border: 1px solid var(--line); border-radius: var(--r);
  overflow-x: auto; overflow-y: visible; background: var(--panel);
}
.tablewrap::-webkit-scrollbar { height: 12px; }
.tablewrap::-webkit-scrollbar-track { background: var(--panel-2); }
.tablewrap::-webkit-scrollbar-thumb { background: var(--line-hi); border-radius: var(--r); }

table { border-collapse: collapse; width: 100%; min-width: 900px; }
thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--panel-2); color: var(--ink-faint);
  font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
tbody td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:hover { background: var(--panel-2); }
td.key { font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }
td.num { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); white-space: nowrap; }
td.acts { white-space: nowrap; }
td.acts .row { display: flex; flex-wrap: wrap; gap: 4px; }
td.acts button { padding: 4px 8px; font-size: 11px; }

/* ------------------------------------------------------------------- chips */

.chip {
  display: inline-block; font-family: var(--mono); font-size: 10px;
  padding: 2px 7px; border-radius: 2px; border: 1px solid var(--line-hi);
  color: var(--ink-dim); white-space: nowrap; text-transform: uppercase;
  letter-spacing: .04em;
}
.chip.dead    { background: var(--red);      color: #fff;         border-color: var(--red); font-weight: 650; }
.chip.ok      { background: var(--teal-soft);color: var(--teal);  border-color: var(--teal); }
.chip.warn    { background: var(--amber-soft);color: var(--amber);border-color: var(--amber); }
.chip.none    { background: transparent;     color: var(--ink-faint); border-style: dashed; }

/* ------------------------------------------------------------------ inline */

/* Every destructive and every value entering action happens in the row it
   belongs to. There is no browser dialog anywhere in this app. */
tr.editor td { background: var(--panel-2); border-bottom: 2px solid var(--amber); }
.inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 4px 0; }
.inline label { font-size: 11px; color: var(--ink-faint); font-family: var(--mono); }
.inline input[type="password"], .inline input[type="text"] { flex: 1 1 240px; }
.hint { font-size: 11px; color: var(--ink-faint); font-family: var(--mono); overflow-wrap: anywhere; }

.reveal {
  font-family: var(--mono); font-size: 12px; background: var(--bg);
  border: 1px solid var(--amber); border-radius: var(--r);
  padding: 8px 10px; overflow-wrap: anywhere; color: var(--amber); flex: 1 1 100%;
}

/* ------------------------------------------------------------------ toasts */

#toasts {
  position: fixed; right: 14px; bottom: 14px; z-index: 50;
  display: flex; flex-direction: column; gap: 8px; max-width: min(380px, calc(100vw - 28px));
}
/* Status is carried by a small dot and the border colour, not a bar down the
   side. The dot is the same shape the profile and health chips use, so a toast
   reads as part of the same system rather than a decorated box. */
.toast {
  display: flex; align-items: flex-start; gap: 9px;
  background: var(--panel-2); border: 1px solid var(--amber);
  border-radius: var(--r);
  padding: 10px 12px; font-size: 12px; overflow-wrap: anywhere;
}
.toast::before {
  content: ""; flex: 0 0 auto;
  width: 7px; height: 7px; margin-top: 5px;
  border-radius: 50%; background: var(--amber);
}
.toast.bad  { border-color: var(--red); }
.toast.bad::before  { background: var(--red); }
.toast.good { border-color: var(--teal); }
.toast.good::before { background: var(--teal); }

/* ------------------------------------------------------------------ panels */

.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 14px; margin-bottom: 14px;
}
.panel h3 { margin: 0 0 10px; font-size: 12px; color: var(--ink-dim);
            text-transform: uppercase; letter-spacing: .07em; }
.panel p { margin: 0 0 8px; color: var(--ink-dim); font-size: 12px; line-height: 1.55; }
pre.snippet {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r);
  padding: 11px; font-family: var(--mono); font-size: 11px; color: var(--ink-dim);
  overflow-x: auto; margin: 0;
}
.domains { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); overflow-wrap: anywhere; }
.empty { padding: 26px; text-align: center; color: var(--ink-faint); font-family: var(--mono); font-size: 12px; }

@media (max-width: 480px) {
  main { padding: 12px; }
  header, nav.tabs { padding-left: 12px; padding-right: 12px; }
  .stat { flex: 1 1 calc(50% - 5px); min-width: 0; }
}