/* MuseRouter Admin — minimal professional theme.
   System fonts only, no external assets, no gradients.
   Neutral grays + one accent (#2563eb, same as the public site). */
:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --border: #e2e5ea;
  --border-strong: #d3d8de;
  --text: #111827;
  --text-2: #5b6472;
  --text-3: #9aa1ab;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --ok: #15803d;
  --ok-bg: #ecfdf5;
  --err: #dc2626;
  --err-bg: #fef2f2;
  --note-bg: #f8f9fa;
  --radius: 8px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
/* Admin shell: desktop-style left sidebar + content, mirroring the
   desktop app sidebar and Settings panel nav (220px, pill nav,
   accent-tint active state, Account button pinned to the bottom). */
.admin-shell { display: flex; align-items: stretch; gap: 28px; }
/* Logged-in app shell: the page itself never scrolls. The sidebar scrolls
   on its own when its nav is long, and the main column scrolls on its own.
   (The old 100vh sticky sidebar plus wrap padding always overflowed the
   page by the padding, so the whole page scrolled.) Scoped to the logged-in
   view via an .authed-view class toggled by showAuthed/showLogin, so
   logged-out pages are untouched and no :has support is needed. */
.wrap.authed-view { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
.wrap.authed-view .admin-shell { flex: 1; min-height: 0; }
.admin-sidebar {
  width: 200px; flex: 0 0 200px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 10px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
}
.admin-brand {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
  padding: 2px 10px 8px;
}
.admin-mark {
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: 8px; background: var(--accent); color: #fff;
  display: grid; place-items: center; font-size: 14px; font-weight: 700;
}
/* Minimal nav rows, not capsules: the old 999px pill radius, 14px/600
   type and full-width padding made the active item look like a big
   button (the screenshot's Plans capsule). A quiet 32px row with an
   8px radius, 13.5px/500 type and a faint active tint is the same
   navigation, without the bulk. The nav is the sidebar's only
   scrolling region; brand + footer stay fixed. */
nav.admin-nav { display: grid; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; }
nav.admin-nav button {
  border-color: transparent; background: transparent;
  border-radius: 8px; padding: 6px 10px;
  font-size: 13.5px; font-weight: 500; line-height: 1.4; text-align: left; color: var(--text-2);
}
nav.admin-nav button:hover:not(:disabled) { background: var(--bg); color: var(--text); }
nav.admin-nav button.active { background: rgba(37, 99, 235, 0.08); color: var(--accent); font-weight: 600; }
nav.admin-nav button:disabled { color: var(--text-3); }
.admin-sidebar-bottom {
  margin-top: auto; padding-top: 10px; flex-shrink: 0;
  border-top: 1px solid var(--border);
  display: grid; gap: 8px;
}
/* The bottom Account button is a nav row too, not a bordered button. */
#account-btn {
  border-color: transparent; background: transparent;
  border-radius: 8px; padding: 6px 10px;
  font-size: 13.5px; font-weight: 500; text-align: left; color: var(--text-2);
}
#account-btn:hover:not(:disabled) { background: var(--bg); color: var(--text); }
.admin-who { font-size: 13px; color: var(--text-2); word-break: break-all; }
.admin-main { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; }
.admin-main-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 14px;
  position: relative;
}
.admin-main-head .pill { margin-left: auto; }
.admin-main-head h2 { margin: 0; }
/* Health pill */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
}
.pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.pill.ok { color: var(--text-2); }
.pill.ok::before { background: #16a34a; }
.pill.err { color: var(--err); }
.pill.err::before { background: #dc2626; }
/* Page container */
.wrap { max-width: none; margin: 0 auto; padding: 20px 32px 32px; }
#setup.card, #login.card { max-width: 460px; margin-left: auto; margin-right: auto; }
h2 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 12px; }
h3 { font-size: 15px; font-weight: 700; margin: 18px 0 10px; }
p { margin: 0 0 12px; color: var(--text-2); }
p.muted, .muted { color: var(--text-2); font-size: 13.5px; }
/* Status message line */
#msg { font-size: 14px; min-height: 0; }
#msg:empty { display: none; }
#msg.err { color: var(--err); }
#msg.ok { color: var(--ok); }
/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 0 0 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.card > h2:first-child { margin-top: 0; }
/* Forms */
label { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); margin: 10px 0 4px; }
input, select, textarea {
  width: 100%;
  max-width: 520px;
  padding: 8px 10px;
  font: inherit;
  font-size: 14.5px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}
input[type="checkbox"] { width: auto; margin-right: 8px; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
input:disabled { background: var(--bg); color: var(--text-3); }
::placeholder { color: var(--text-3); }
/* Buttons */
button {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
button:hover:not(:disabled) { background: var(--bg); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  padding: 10px 18px;
}
button.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }

/* Dynamic lists: one quiet row per item */
#plans-list > div, #promos-list > div, #tenants-list > div,
#members-list > div, #templates-list > div, #tenant-invites-list > div,
#customers-list > div, #licences-list > div, #audit-list > div,
#promo-redemptions > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-2);
}
#plans-list > div strong, #promos-list > div strong,
#tenants-list > div strong, #templates-list > div strong,
#customers-list > div strong, #licences-list > div strong,
#audit-list > div strong { color: var(--text); }
#plans-list button, #promos-list button, #tenants-list button,
#members-list button, #templates-list button, #releases-list button {
  padding: 5px 10px;
  font-size: 13px;
}
#releases-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-2);
}
#releases-list li button { margin-left: 8px; }
/* Notes (replaces the old yellow boxes; text unchanged) */
.warn {
  background: var(--note-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  color: var(--text-2);
  font-size: 14px;
}
.warn strong { color: var(--text); }
/* Secondary auth sections (collapsed by default) */
details.sub {
  border-top: 1px solid var(--border);
  margin-top: 24px;
  padding-top: 12px;
}
details.sub summary {
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  color: var(--text);
}
details.sub summary:hover { color: var(--accent); }
/* Inline code (secrets, ids, JSON) */
code {
  word-break: break-all;
  background: #f3f4f6;
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 13px;
  color: var(--text);
}
.err { color: var(--err); }
.ok { color: var(--ok); }
/* Compact two-column forms (Plans, Promo codes): halves form height so a
   full screen fits a laptop viewport without scrolling. */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; margin-top: 4px; }
/* Inline input + button row (Tenants create/invite) */
.inline-row { display: flex; gap: 12px; align-items: center; }
.inline-row input { flex: 1; min-width: 0; }
.inline-row button { flex-shrink: 0; }
.form-grid .field label { margin: 0 0 4px; }
.form-grid .field.span { grid-column: 1 / -1; }
.form-grid .field.span button { margin-right: 8px; }
/* Panel help: long intro texts live behind a ? button (floating card on
   click) instead of occupying screen space. Warnings (Freemius note,
   invite-once note) stay visible on purpose. */
.help { flex: 0 0 auto; }
.help summary { list-style: none; cursor: pointer; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); font-weight: 700; font-size: 15px; display: grid; place-items: center; }
.help summary::-webkit-details-marker { display: none; }
.help summary:hover { color: var(--accent); border-color: var(--accent); }
.help summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.help-body { position: absolute; left: 0; top: calc(100% + 8px); width: min(560px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; box-shadow: 0 12px 32px rgba(16, 24, 40, 0.14); z-index: 5; }
.help-body p { margin: 0; }
/* Account popup (desktop Settings-panel style): admin info + dual-confirm sign out */
.account-popup { position: fixed; inset: 0; background: rgba(17, 24, 39, 0.35); display: grid; place-items: center; padding: 20px; z-index: 50; }
.account-popup[hidden] { display: none; }
.account-card { width: min(420px, 92vw); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 24px; display: grid; gap: 14px; }
.account-card h3 { margin: 0; font-size: 17px; }
.account-card button.danger { background: #dc2626; border-color: #dc2626; color: #fff; }
#account-signout-confirm { display: grid; gap: 10px; }
#account-signout-confirm[hidden] { display: none; }
#account-signout-confirm p { margin: 0; }
@media (max-width: 800px) {
  .form-grid { grid-template-columns: 1fr; }
  .admin-shell { flex-direction: column; gap: 16px; }
  .admin-sidebar { width: auto; flex-basis: auto; position: static; height: auto; border-right: none; border-bottom: 1px solid var(--border); padding: 14px 0; }
  nav.admin-nav { display: flex; flex-wrap: wrap; }
  nav.admin-nav button { white-space: nowrap; }
  .admin-sidebar-bottom { margin-top: 4px; }
  .admin-main-head { flex-wrap: wrap; }
  .wrap.authed-view { height: auto; display: block; }
  .admin-main { overflow: visible; }
}
@media (max-width: 640px) {
  .wrap { padding: 20px 16px 40px; }
  .card { padding: 20px 16px; }
  input, select, textarea { max-width: 100%; }
}