/* shadcn-inspired theme: zinc dark palette as HSL design tokens, --radius,
   subtle borders, ring focus. Plain CSS (no Tailwind), mapped onto the portal's
   existing class names. */
:root {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --card: 240 10% 5.5%;
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --primary: 0 0% 98%;
  --primary-foreground: 240 5.9% 10%;
  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;
  --accent: 240 3.7% 15.9%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 72% 51%;
  --success: 142 71% 45%;
  --ring: 240 4.9% 83.9%;
  --radius: 0.5rem;

  /* Logo-derived brand accents: royal blue, gold, crimson. */
  --brand-blue: #2945c7;
  --brand-gold: #eac54f;
  --brand-red: #c73b30;
  --brand-gradient: linear-gradient(90deg, var(--brand-blue), var(--brand-gold), var(--brand-red));
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  color-scheme: dark;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* shadcn signature focus ring. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
  border-radius: calc(var(--radius) - 2px);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  border-width: 0 0 2px;
  border-style: solid;
  border-image: var(--brand-gradient) 1;
  background: hsl(var(--background));
}

.topbar .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: hsl(var(--foreground));
  text-decoration: none;
}
.topbar .brand-logo { height: 1.7rem; width: auto; display: block; }

.topbar nav { display: flex; gap: 1.25rem; align-items: center; }
.topbar nav a, .topbar nav button.link { color: hsl(var(--muted-foreground)); text-decoration: none; font-weight: 500; }
.topbar nav a:hover, .topbar nav button.link:hover { color: hsl(var(--foreground)); }
.topbar form.inline { display: inline-flex; gap: 0.6rem; align-items: center; margin: 0; }

main { width: 100%; margin: 0; padding: 2rem 2.5rem; }

.hero { text-align: center; padding: 4rem 0; }
.hero .logo { width: 150px; height: auto; display: block; margin: 0 auto 1.5rem; }
.hero h1 { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.5rem; }

.muted { color: hsl(var(--muted-foreground)); }

/* Buttons — default is the shadcn "outline" variant; .primary is solid. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: transparent;
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  font: inherit;
  font-weight: 500;
  transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
}
.btn:hover { background: hsl(var(--accent)); }
.btn.primary { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.btn.primary:hover { background: hsl(var(--primary)); opacity: 0.9; }
.btn.danger { background: hsl(var(--destructive)); border-color: hsl(var(--destructive)); color: hsl(var(--primary-foreground)); }
.btn.danger:hover { background: hsl(var(--destructive)); opacity: 0.9; }

button.link {
  background: none;
  border: none;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  padding: 0;
}
button.link:hover { color: hsl(var(--foreground)); }
button.link.danger { color: hsl(var(--destructive)); }
button.link.danger:hover { color: hsl(var(--destructive)); opacity: 0.85; }

section { margin-bottom: 2.5rem; }
section h1 { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; border-width: 0 0 2px; border-style: solid; border-image: var(--brand-gradient) 1; padding-bottom: 0.6rem; }

.row { display: flex; gap: 0.5rem; align-items: center; margin: 1rem 0; }

input[type="text"], input[type="search"], input[type="number"], input[type="password"], select {
  background: transparent;
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius);
  padding: 0.45rem 0.75rem;
  font: inherit;
}
input::placeholder { color: hsl(var(--muted-foreground)); }

pre.token, code {
  background: hsl(var(--muted));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
}

/* Short identifiers (IP, key id) stay on one line. */
code { padding: 0.1rem 0.4rem; white-space: nowrap; border-radius: calc(var(--radius) - 3px); }

/* Secrets are long: wrap them and let them break anywhere. */
pre.token, .token-cell {
  white-space: pre-wrap;
  word-break: break-all;
}
.token-cell { display: inline-block; max-width: 28rem; }

table { width: 100%; border-collapse: collapse; margin-top: 0.75rem; }
th, td { text-align: left; padding: 0.6rem 0.7rem; border-bottom: 1px solid hsl(var(--border)); vertical-align: middle; }
th { color: hsl(var(--muted-foreground)); font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
tbody tr.key-row:hover > td { background: hsl(var(--muted) / 0.4); }

.error { color: hsl(var(--destructive)); margin-top: 0.75rem; }
.hexlist { list-style: none; padding: 0; margin: 0.5rem 0; display: grid; gap: 0.4rem; }
.hexlist li { margin: 0; }

/* Badges (shadcn-style: rounded-md, small, semibold). Status variants are soft. */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.55rem;
  border-radius: calc(var(--radius) - 2px);
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid transparent;
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  white-space: nowrap;
}
.pill.active, .pill.online { background: hsl(var(--success) / 0.15); color: hsl(var(--success)); }
.pill.revoked { background: hsl(var(--destructive) / 0.15); color: hsl(0 72% 68%); }
.pill.off { background: transparent; border-color: hsl(var(--border)); color: hsl(var(--muted-foreground)); }
tr.revoked td { opacity: 0.55; }

/* Collapsible per-key worker table (full-width row below each key). */
tr.worker-detail > td { padding: 0 0.7rem 0.85rem; border-bottom: 1px solid hsl(var(--border)); }
details.workers > summary {
  cursor: pointer;
  list-style: none;
  display: inline-block;
  color: hsl(var(--muted-foreground));
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.3rem 0;
}
details.workers > summary::-webkit-details-marker { display: none; }
details.workers > summary::before { content: "▸ "; }
details.workers[open] > summary::before { content: "▾ "; }
details.workers > summary:hover { color: hsl(var(--foreground)); }

table.workers-table { width: auto; margin: 0.5rem 0 0.25rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); overflow: hidden; }
table.workers-table th, table.workers-table td { padding: 0.45rem 0.95rem; border-bottom: 1px solid hsl(var(--border)); font-size: 0.8rem; white-space: nowrap; }
table.workers-table tbody tr:last-child td { border-bottom: none; }
table.workers-table tbody tr:hover > td { background: hsl(var(--muted) / 0.4); }
table.workers-table code { background: none; border: none; padding: 0; }

td.nowrap, th.nowrap { white-space: nowrap; }

/* Fleet rollup: stat cards above the agent table. */
.stat-cards { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1rem 0 0.25rem; }
.stat-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 0.6rem 0.9rem;
  min-width: 7.5rem;
}
.stat-card .stat-label { color: hsl(var(--muted-foreground)); font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
.stat-card .stat-value { color: hsl(var(--foreground)); font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; margin-top: 0.25rem; }
.stat-card .stat-value.alert { color: hsl(var(--destructive)); }
.stat-card .stat-sub { color: hsl(var(--muted-foreground)); font-size: 0.72rem; margin-top: 0.1rem; }
.stat-card .stat-sub.warming { color: var(--brand-gold); }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-width: 0 0 2px; border-style: solid; border-image: var(--brand-gradient) 1; }
.section-head h1 { border: none; flex: 1; }
input[type="search"].filter { min-width: 14rem; }

.secret { display: inline-flex; align-items: center; gap: 0.5rem; }
.secret .token { margin: 0; }

button.copy.link { color: hsl(var(--foreground)); }
button.copy.copied, button.copy.link.copied { color: hsl(var(--success)); }

/* Form layout: vertical stack of controls. */
.stack { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; margin: 1rem 0; }
.stack .inline { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }

/* Form-style config editor: labeled fields in a responsive grid. */
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.9rem 1.4rem; width: 100%; }
.field-grid label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.8rem; color: hsl(var(--muted-foreground)); }
.field-grid input, .field-grid select { width: 100%; }

/* Per-agent target checklist. */
.checklist { width: 100%; border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 0.6rem 0.8rem; display: grid; gap: 0.3rem; max-height: 22rem; overflow-y: auto; }
.checklist-actions { display: flex; gap: 0.8rem; padding-bottom: 0.4rem; margin-bottom: 0.2rem; border-bottom: 1px solid hsl(var(--border)); }
.checkrow { display: flex; gap: 0.7rem; align-items: center; padding: 0.25rem 0; font-size: 0.9rem; }
.checkrow input[type="checkbox"] { width: 1rem; height: 1rem; }

/* Toasts: transient notifications, bottom-right, slide + fade in/out. */
.toasts { position: fixed; bottom: 1.25rem; right: 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; z-index: 50; }
.toast {
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  border-left: 3px solid hsl(var(--success));
  border-radius: var(--radius);
  padding: 0.7rem 1rem;
  font-size: 0.85rem;
  max-width: 22rem;
  box-shadow: 0 6px 24px hsl(240 10% 2% / 0.5);
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.show { opacity: 1; transform: translateY(0); }