/* Cargo Bay UI foundation. Keep visual decisions here rather than in templates. */
:root {
  --bg: #00060f;
  --surface: #242834;
  --surface-2: #1b2230;
  --surface-3: #111a2a;
  --line: #3b455a;
  --line-strong: #7185a5;
  --accent: #009ddc;
  --accent-strong: #007eaf;
  --accent-soft: rgba(0, 157, 220, .14);
  --warn: #ffd104;
  --danger: #ee3a43;
  --success: #35d37a;
  --text: #ffffff;
  --muted: #c7c7c7;
  --subtle: #8ea2c6;
  --font-sans: Montserrat, "Proxima Nova", "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --radius: 8px;
  --radius-panel: 10px;
  --control-height: 36px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --focus-ring: 0 0 0 3px rgba(0, 157, 220, .28);
}

/* Shared typography and content primitives */
body { font-family: var(--font-sans); color: var(--text); }
h1, h2, h3, h4 { color: var(--text); }
h1, h2, h3, h4, p { min-width: 0; }
h1, h2, h3, h4 { text-wrap: balance; }
p, .muted { color: var(--muted); }
.muted { margin: .25rem 0 0; }
.page-heading { margin: 0; }
.section-title { margin: 0; }
.section-heading { margin-top: 0; }
.section-subtitle { margin: .25rem 0 0; color: var(--muted); }
.inset-spacing { margin-top: var(--space-3); }
.eyebrow { color: var(--subtle); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.meta { color: var(--muted); }
code, pre, .hash { font-family: var(--font-mono); }
code { overflow-wrap: anywhere; }
.hash { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; white-space: normal; }

/* Shared controls. Variants only change semantic color. */
button, .button, .sso-button {
  min-height: var(--control-height);
  padding: 8px 12px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--text);
  font: 700 .8rem/1.2 var(--font-sans);
  white-space: nowrap;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
button:hover, button:focus-visible, .button:hover, .button:focus-visible, .sso-button:hover, .sso-button:focus-visible {
  background: var(--accent-strong);
  border-color: var(--accent);
  color: var(--text);
  box-shadow: var(--focus-ring);
}
button.secondary, .button.secondary, .usage-trigger, .table-action {
  background: transparent;
  border-color: var(--line);
  color: #9edff9;
}
button.secondary:hover, button.secondary:focus-visible, .button.secondary:hover, .button.secondary:focus-visible,
.usage-trigger:hover, .usage-trigger:focus-visible, .table-action:hover, .table-action:focus-visible {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text);
}
button.danger-action, .danger-action { background: transparent; border-color: rgba(238, 58, 67, .55); color: #ffb7bb; }
button.danger-action:hover, button.danger-action:focus-visible, .danger-action:hover, .danger-action:focus-visible { background: rgba(238, 58, 67, .2); border-color: var(--danger); color: var(--text); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.table-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.table-actions form { margin: 0; }
.table-action { min-width: max-content; }
/* Row-level delete controls. The form is only there to carry the CSRF token and the target, so
   it must not contribute the block margin a standalone form gets. */
table td > form { margin: 0; display: inline-flex; }
table td > form .table-action { padding: 5px 8px; min-height: 28px; }

/* Shared surfaces, forms, and feedback */
.panel { min-width: 0; }
.inset-panel { margin-top: var(--space-4); background: var(--surface-2); }
.success-panel { border-color: var(--success); background: rgba(53, 211, 122, .08); }
.stack-form { max-width: 620px; margin-top: var(--space-4); }
.surface-form { background: var(--surface-2); }
.compact-top { margin-top: var(--space-3); }
.token-value { display: block; overflow-wrap: anywhere; user-select: all; }
.muted-break { color: var(--muted); overflow-wrap: anywhere; }
.subtle-count { color: var(--muted); }
.stack-form input, .stack-form select, .stack-form textarea { width: 100%; }
.field-help { color: var(--muted); font-size: .76rem; }
.field-help.block { display: block; }
.form-actions { display: flex; gap: var(--space-3); justify-content: flex-end; margin-top: var(--space-3); }
.flash { border-radius: var(--radius); }
.flash.error { background: rgba(238, 58, 67, .15); border-color: var(--danger); color: #ffd3d5; }
.flash.success { background: rgba(53, 211, 122, .15); border-color: var(--success); color: #a5f3bf; }

/* Shared responsive behavior */
main, .content, .panel, .title, .toolbar-actions { min-width: 0; }
table { max-width: 100%; }
@media (max-width: 767px) {
  .page-heading { font-size: 1.55rem; }
  .form-actions { flex-direction: column-reverse; }
  .form-actions button, .form-actions .button { width: 100%; }
  .stack-form { max-width: none; }
  .toolbar-actions button, .toolbar-actions form, .toolbar-actions .usage-trigger { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}