/* Self-Service admin portal.
   Deliberately small: a shell that is correct about layout, theme and
   environment, so the first real module drops into something already right
   rather than into a page that has to be rebuilt around it. */

:root {
  --ss-bg:        #f6f7f9;
  --ss-surface:   #ffffff;
  --ss-border:    #e3e6ea;
  --ss-text:      #1b1f24;
  --ss-muted:     #667085;
  --ss-accent:    #1f6feb;
  --ss-accent-soft: rgba(31,111,235,.10);
  --ss-warn:      #b54708;
  --ss-warn-soft: rgba(247,144,9,.14);
  --ss-radius:    10px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ss-bg:      #14171a;
    --ss-surface: #1c2024;
    --ss-border:  #2c3238;
    --ss-text:    #e6e9ec;
    --ss-muted:   #98a2b3;
    --ss-accent:  #5b9bff;
    --ss-accent-soft: rgba(91,155,255,.14);
    --ss-warn:      #f79009;
    --ss-warn-soft: rgba(247,144,9,.16);
  }
}
:root[data-theme="dark"] {
  --ss-bg:      #14171a;
  --ss-surface: #1c2024;
  --ss-border:  #2c3238;
  --ss-text:    #e6e9ec;
  --ss-muted:   #98a2b3;
  --ss-accent:  #5b9bff;
  --ss-accent-soft: rgba(91,155,255,.14);
  --ss-warn:      #f79009;
  --ss-warn-soft: rgba(247,144,9,.16);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ss-bg);
  color: var(--ss-text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* An environment you cannot miss. Three sites serve the same artifact, and
   "which one am I looking at" is the question that causes the expensive
   mistakes - a config change made on prod believing it was dev. */
.ss-envbar {
  padding: 6px 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--ss-warn-soft);
  color: var(--ss-warn);
  border-bottom: 1px solid var(--ss-border);
}
.ss-envbar[data-env="prod"] { display: none; }

.ss-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 20px;
  background: var(--ss-surface);
  border-bottom: 1px solid var(--ss-border);
}
.ss-brand { display: flex; align-items: center; gap: 10px; font-weight: 650; }
.ss-mark {
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--ss-accent); color: #fff;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
.ss-top-meta { font-size: 12px; color: var(--ss-muted); font-variant-numeric: tabular-nums; }

.ss-main { max-width: 1080px; margin: 0 auto; padding: 28px 20px 64px; }

.ss-card {
  background: var(--ss-surface);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius);
  padding: 22px 24px;
  margin-bottom: 18px;
}
.ss-card h2 { margin: 0 0 6px; font-size: 15px; }
.ss-card p  { margin: 0; color: var(--ss-muted); font-size: 14px; }

.ss-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.ss-kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0;
         border-bottom: 1px solid var(--ss-border); font-size: 14px; }
.ss-kv:last-child { border-bottom: 0; }
.ss-kv dt { color: var(--ss-muted); margin: 0; }
.ss-kv dd { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: 13px; word-break: break-all; text-align: right; }

.ss-pill { display: inline-block; padding: 2px 9px; border-radius: 999px;
           font-size: 12px; font-weight: 600;
           background: var(--ss-accent-soft); color: var(--ss-accent); }