/*
 * The Ops console's one stylesheet (no bundler, plain CSS). Colours
 * for a fleet/leaderboard-scoped element come from CSS custom
 * properties `js/theme.js`'s applyThemeToElement() sets per element
 * (--color-background, --color-accent, ...), themselves resolved
 * through the same central-default <- fleet <- leaderboard chain
 * cloud/ops/src/theme/merge.ts defines; page-level chrome (the fleet
 * list, panel borders) uses the central default's own values as
 * static fallbacks so the page is never unstyled before a theme
 * resolves.
 */

:root {
  --color-background: #232F3E;
  --color-surface: #2B394B;
  --color-text: #F2F3F3;
  --color-text-muted: #B6BEC9;
  --color-accent: #FF9900;
  --color-accent-text: #232F3E;
  --row-bg: #1B2430;
  --row-bg-alt: #20293A;
  --row-bg-top3: #3A2C12;
  --row-text: #F2F3F3;
  --font-stack: 'Amazon Ember', 'Helvetica Neue', Roboto, Arial, sans-serif;
  --font-stack-mono: 'Amazon Ember Mono', 'Courier New', monospace;
  --corner-radius: 8px;
}

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-stack);
}

.panel {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-accent);
  border-radius: var(--corner-radius);
  padding: 1rem;
  margin: 1rem;
}

.fleet-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  padding: 1rem;
}

.fleet-panel-title {
  color: var(--color-accent);
  margin: 0 0 0.5rem;
}

.fleet-panel-meta dt {
  color: var(--color-text-muted);
  font-size: 0.85em;
}

.fleet-panel-open,
.leaderboard-editor-save,
.admin-area-save,
.public-link-copy,
.fleet-detail-back {
  background: var(--color-accent);
  color: var(--color-accent-text);
  border: none;
  border-radius: var(--corner-radius);
  padding: 0.4rem 0.8rem;
  cursor: pointer;
}

.leaderboard-editor {
  margin-bottom: 1rem;
}

.field {
  display: block;
  margin: 0.5rem 0;
  color: var(--color-text-muted);
}

.field input[type="text"],
.field select {
  display: block;
  width: 100%;
  max-width: 28rem;
  margin-top: 0.25rem;
  font-family: var(--font-stack-mono);
}

.field-logo-preview {
  display: block;
  max-height: 48px;
  margin: 0.25rem 0;
}

.field-public-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.public-link-value {
  flex: 1;
  font-family: var(--font-stack-mono);
}

.admin-area {
  border-color: var(--color-text-muted);
}

.sign-in-not-configured {
  color: var(--color-text-muted);
  padding: 1rem;
  font-family: var(--font-stack);
}