/* Shared navigation styles for status.html, testdata.html and database.html */

:root {
  --bg:      #f6f8fa;
  --surface: #ffffff;
  --border:  var(--border-default, #D5D7D9);
  --text:    #1f2328;
  --dim:     #656d76;
  --green:   #1a7f37;
  --red:     #cf222e;
  --yellow:  #9a6700;
  --blue:    #0969da;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  min-height: 100vh;
}

/* ── Sticky top wrapper (header + tabs) ──────────────────── */
.adm-top {
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Standard app titlebar — replicate dashboard.css EXACTLY (byte-for-byte values) so the
   header is identical to logs/news/settings, which get these rules from dashboard.css
   (not loaded on the admin-nav pages). The ebf-logo + "Onboarder" lockup + the 64px navbar come from
   ebf-header.css. Do NOT deviate (no fixed height / custom line-height / different
   tokens) — any deviation makes this bar inconsistent with the other pages. All pages
   share the same base line-height (browser default), so the padding-based height matches.
   Used by database.html and the non-popup status.html / testdata.html. Cancel is a plain
   link to customers.html. */
.navbar-light {
  background: #ffffff;
  border-bottom: 1px solid var(--border-subtle, #E3E4E5);
}
/* Bootstrap 5: .navbar > .container is display:flex, so the .row shrinks to content and
   its negative margins leave the right side short — logo/Cancel would sit together on the
   left. Force the row full-width so col-md-6 children spread and Cancel lands far right. */
.row-relative { position: relative; width: 100%; }
.navbar .row { width: calc(100% + var(--bs-gutter-x, 1.5rem)); }
.navbar-light .col-md-6.migrator-logo { flex: 1 1 auto; width: auto; }
.navbar-light .col-md-6.cancel-button { flex: 0 0 auto; width: auto; }
.cancel-button {
  /* no top nudge — the navbar row is already vertically centred */
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.cancel-button a {
  border: 1px solid var(--border-default, #d5d9de);
  background: var(--bg-page, #ffffff);
  color: var(--ebf-blue-600, #0f5aa8);
  border-radius: 8px;
  padding: 8px 18px;
  margin-right: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-body);
  font-size: 13.5px;
  /* Match the logs/licensereport button height: those pages load dashboard.css whose
     reset sets body{line-height:1}, so the button inherits 1. The admin-nav base
     keeps Bootstrap's body{line-height:1.5}, which made the button ~4px taller — pin it. */
  line-height: 1;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.14s ease-out, border-color 0.14s ease-out, color 0.14s ease-out;
}
.cancel-button a:hover {
  background: var(--bg-subtle, #f5f6f8);
  border-color: var(--ebf-blue-400, #4a90d9);
  color: var(--ebf-blue-600, #0f5aa8);
}
.dark .cancel-button a,
:root[data-theme="dark"] .cancel-button a { color: var(--ebf-blue-300, #7db3e8); }

/* Non-popup status/testdata: tabs below the standard titlebar, same 32px gutter as
   the navbar container (ebf-header .navbar .container) and white like the navbar. */
html:not(.status-popup) .adm-tabs { padding-left: 32px; padding-right: 32px; background: #ffffff; }
html:not(.status-popup)[data-theme="dark"] .adm-tabs { background: var(--bg-page); }

/* ── Header ─────────────────────────────────────────────── */
.adm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;               /* match the app navbar (63px bar + 1px border) */
  padding: 10px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  gap: 16px;
}

.adm-logo  { width: 22px; height: 22px; }
.adm-brand { font-weight: 600; font-size: 15px; white-space: nowrap; }

/* ── FQDN (status page only) ─────────────────────────────── */
.adm-fqdn {
  font-family: monospace; font-size: 13px; color: var(--blue);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; text-align: center;
}

/* ── Timestamp ───────────────────────────────────────────── */
.adm-ts {
  font-size: 11px; color: var(--dim); font-family: monospace;
  cursor: pointer; white-space: nowrap;
}
.adm-ts:hover { color: var(--text); }

/* ── Donut countdown ─────────────────────────────────────── */
.adm-donut { width: 28px; height: 28px; flex-shrink: 0; }

/* ── Tab nav ─────────────────────────────────────────────── */
.adm-tabs {
  display: flex;
  padding: 0 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.adm-tab {
  display: inline-block;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--dim);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.adm-tab:hover        { color: var(--text); text-decoration: none; }
.adm-tab-active       { color: var(--text); border-bottom-color: var(--blue); font-weight: 600; }

/* ── Cards ───────────────────────────────────────────────── */
.st-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 10px 10px 10px;
}
.st-card-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--dim);
  position: sticky; top: 0;
  background: var(--surface);
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid var(--border);
  margin: 0 -10px 4px -10px;
  padding: 10px 10px 8px 10px;
  z-index: 1;
}
.st-empty { color: var(--dim); font-size: 13px; }

/* ── Key–value rows ──────────────────────────────────────── */
.st-rows  { display: flex; flex-direction: column; gap: 6px; padding: 10px; }
.st-row   { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.st-label { color: var(--dim); font-size: 13px; white-space: nowrap; flex-shrink: 0; }
.st-info  { color: var(--dim); font-size: 12px; }
.mono     { font-family: monospace; font-size: 13px; }

/* ── Value colours ───────────────────────────────────────── */
.ok       { color: var(--green);  font-weight: 600; }
.err      { color: var(--red);    font-weight: 600; }
.cnt      { font-family: monospace; }
.cnt-warn { color: var(--yellow); font-family: monospace; font-weight: 600; }
.cnt-ok   { color: var(--green);  font-family: monospace; }

/* ── Badges ──────────────────────────────────────────────── */
.badge-st {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 600; padding: 2px 7px;
  border-radius: 20px; letter-spacing: .04em; white-space: nowrap;
}
.badge-ok  { background: var(--ebf-green-100, #D5F5EB); color: var(--green); border: 1px solid var(--ebf-green-200, #ABEBD7); }
.badge-err { background: var(--ebf-red-100, #FEE5E3); color: var(--red);   border: 1px solid var(--ebf-red-200, #FDCBC8); }
.badge-dim { background: #f6f8fa; color: var(--dim);   border: 1px solid var(--border); }

/* ── Pulse animation ─────────────────────────────────────── */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }