/* Shared look for the login page and every admin page. Light, warm palette and
   system font stack borrowed from the public landing page (landing.css) so the
   app reads as the same product the visitor just signed up for. No web fonts or
   CDNs (GDPR: a font host would see every visitor's IP).

   The admin UI used to pin a dark palette (#18). It is now light-only, with
   color-scheme: light, and every per-page sheet takes its colours from the
   tokens below — never a hardcoded dark — so a light/dark mix can't come back.
   The TV dashboard (dashboard.css, stue.css, pairing.css) does NOT load this
   file and keeps its own dark look. */
:root {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;

  /* Landing palette */
  --ink: #1d2230;
  --ink-2: #4a5164;
  --ink-3: #6b7285;
  --paper: #fbf7f1;
  --paper-2: #f3ede3;
  --card: #ffffff;
  --line: #e7dfd2;
  --line-strong: #d6cbb9;
  --accent-ink: #b5521a;
  --green: #3f8f5b;

  /* Semantic tokens the per-page sheets use */
  --bg: var(--paper);
  --panel: var(--card);
  --panel-bg: var(--card);
  --panel-border: var(--line);
  --field-bg: var(--card);
  --input-bg: var(--field-bg);
  --row-bg: var(--paper);          /* list rows inside a panel */
  --hover: rgba(29, 34, 48, 0.05);
  --hover-2: rgba(29, 34, 48, 0.09);
  --text: var(--ink);
  --muted: var(--ink-3);
  --accent: #e0702c;               /* fills; use --accent-ink for text */
  --accent-fg: #fff;
  --accent-soft: rgba(224, 112, 44, 0.12);
  --focus-ring: 0 0 0 3px rgba(224, 112, 44, 0.18);
  --danger: #c2412d;
  --danger-ink: #9c2f1f;
  --danger-bg: rgba(200, 60, 40, 0.1);
  --danger-line: rgba(200, 60, 40, 0.35);
  --ok: #2c6b43;
  --ok-bg: rgba(63, 143, 91, 0.12);
  --ok-line: rgba(63, 143, 91, 0.4);
  --warn: #8a5300;
  --warn-bg: #fff4e6;
  --warn-line: #f3d6b4;
  --done-bg: #eef5ef;
  --done-fg: var(--ink-3);
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(29, 34, 48, 0.06);
  --shadow-card: 0 1px 2px rgba(29, 34, 48, 0.05), 0 6px 18px rgba(29, 34, 48, 0.05);
  --shadow-pop: 0 1px 2px rgba(29, 34, 48, 0.06), 0 18px 44px rgba(29, 34, 48, 0.16);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-ink); }
h1, h2, h3 { letter-spacing: -0.02em; }

/* --- Nav (the landing page's: sticky, translucent paper, blurred) --------- */
.admin-nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(251, 247, 241, 0.86);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid rgba(231, 223, 210, 0.9);
  padding: 0.6rem 1.5rem;
  min-height: 62px;
  position: sticky;
  top: 0;
  z-index: 10;
  overflow-x: auto;
  scrollbar-width: none;
}
.admin-nav::-webkit-scrollbar { display: none; }
.admin-nav .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  margin-right: 1rem;
  padding: 0;
  white-space: nowrap;
  flex: none;
}
.admin-nav .brand:hover { background: none; }
.admin-nav .brand img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  box-shadow: 0 2px 8px rgba(224, 112, 44, 0.25);
}
.admin-nav a:not(.brand) {
  color: var(--ink-2);
  text-decoration: none;
  padding: 0.42rem 0.9rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 550;
  white-space: nowrap;
  flex: none;
  transition: background 0.15s, color 0.15s;
}
.admin-nav a:not(.brand):hover { background: var(--hover); color: var(--ink); }
.admin-nav a.active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 650; }
.admin-nav a.active:hover { background: var(--accent-soft); color: var(--accent-ink); }
/* Dashboard + Log ud sit at the far right, like the landing nav's CTAs. */
.admin-nav .dashboard-link,
.admin-nav .logout-link { font-size: 0.88rem; color: var(--ink-3); }
.admin-nav .dashboard-link { margin-left: auto; }
.admin-nav .logout-link:not(.dashboard-link ~ .logout-link) { margin-left: auto; }
.admin-nav .logout-link:hover { color: var(--danger-ink); background: var(--danger-bg); }
@media (max-width: 600px) {
  .admin-nav { padding: 0.5rem 1rem; gap: 0.15rem; }
  .admin-nav .brand { margin-right: 0.4rem; }
  .admin-nav .brand span { display: none; }
  .admin-nav a:not(.brand) { padding: 0.4rem 0.7rem; }
}

.admin-main { padding: 1.5rem; }
.admin-main h1 { margin: 0 0 1rem 0; font-size: 1.6rem; font-weight: 800; }
@media (max-width: 600px) { .admin-main { padding: 1.25rem 1rem; } }

/* --- Buttons (pills; primary = orange) ------------------------------------ */
.btn {
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--ink);
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.btn:hover { border-color: var(--ink-3); background: var(--card); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-primary {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(224, 112, 44, 0.25);
}
.btn-primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn-danger { color: var(--danger); }
.btn-danger:hover { border-color: var(--danger-line); background: var(--danger-bg); }
.btn-icon { padding: 0.2rem 0.5rem; font-size: 1rem; line-height: 1; }

/* --- Inputs --------------------------------------------------------------- */
.input, select, textarea {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line);
  background: var(--field-bg);
  color: var(--text);
  font: inherit;
}
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="url"], input[type="date"], input[type="time"], input[type="search"] {
  color: var(--text);
}
.input:focus, select:focus, textarea:focus,
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="number"]:focus, input[type="url"]:focus, input[type="date"]:focus,
input[type="time"]:focus, input[type="search"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
input::placeholder, textarea::placeholder { color: #9aa0ae; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
textarea { min-height: 4rem; resize: vertical; }
label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.25rem; }
.field { margin-bottom: 0.75rem; }

/* --- Modal ---------------------------------------------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(29, 34, 48, 0.38);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.5rem;
  width: min(480px, 94vw);
  max-height: 90vh;
  overflow: auto;
  box-shadow: var(--shadow-pop);
}
.modal h2 { margin: 0 0 0.75rem 0; font-size: 1.2rem; }
.modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }
.modal-actions .spacer { flex: 1; }
/* Native <dialog> editors share the modal look. */
dialog::backdrop { background: rgba(29, 34, 48, 0.38); }

/* --- Toast ---------------------------------------------------------------- */
.toast {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 550;
  box-shadow: var(--shadow-pop);
  z-index: 200;
}
.toast.is-error { background: var(--danger); color: #fff; }

.placeholder {
  background: var(--panel-bg);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
  color: var(--muted);
}

/* Trial banner (plan 49) */
.trial-banner { margin: 12px auto; max-width: 1200px; padding: 10px 16px; border-radius: 12px; font-size: .92rem; line-height: 1.4; }
.trial-active { background: var(--warn-bg); color: #7a4313; border: 1px solid var(--warn-line); }
.trial-ended { background: #fdecea; color: #8a2a1c; border: 1px solid #f2c4bd; }