/* DarkPanel design system — the single source of truth for the app's look.
 *
 * Everything below was previously duplicated inline across base.html,
 * dashboard.html and each admin editor. It now lives here, driven by CSS
 * custom properties, so a palette or component change is one edit, not five.
 * Widget internals live in widget-render.css (scoped under .widget-body). */

:root {
  /* Surfaces */
  --bg: #0f1117;              /* page background */
  --panel: #1a1b23;           /* cards, topbar, panels */
  --panel-2: #14151c;         /* recessed canvas (dashboard designer) */
  --input-bg: #0f1117;
  --border: #2a2b35;
  --surface-hover: #23242e;   /* hover fill, secondary buttons */
  --surface-hover-2: #2d2e3a;

  /* Text — muted/faint bumped for WCAG AA on small text */
  --text: #e1e1e6;
  --muted: #a8a9b4;           /* secondary text (was #a1a1aa) */
  --faint: #8b8d99;           /* hints / captions (was #71717a, failed AA) */

  /* Brand & accents */
  --brand: #6366f1;
  --brand-hover: #4f46e5;
  --link: #818cf8;
  --accent-bg: #312e81;       /* active nav / badges */
  --accent-text: #c7d2fe;

  /* Semantic */
  --success: #34d399;
  --success-bg: #064e3b;
  --success-border: #059669;
  --danger: #dc2626;
  --danger-hover: #b91c1c;
  --danger-soft: #f87171;
  --danger-softer: #fca5a5;
  --error-bg: #450a0a;
  --warn: #fbbf24;

  /* Shape */
  --radius: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Courier New', Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* Coherent dark scrollbars (Firefox + WebKit). */
html { scrollbar-width: thin; scrollbar-color: #3a3b45 transparent; }
body::-webkit-scrollbar { width: 8px; height: 8px; }
body::-webkit-scrollbar-track { background: transparent; }
body::-webkit-scrollbar-thumb { background: #3a3b45; border-radius: 4px; }
body::-webkit-scrollbar-thumb:hover { background: #4a4c5a; }

/* ---- Layout ------------------------------------------------------------ */
.container { max-width: 480px; margin: 0 auto; padding: 60px 20px; }
.container-wide { max-width: 1100px; margin: 0 auto; padding: 40px 20px; }

h1 { font-size: 1.8rem; margin-bottom: 8px; }
h2 { font-size: 1.2rem; margin-bottom: 20px; color: var(--muted); font-weight: 400; }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-bottom: 20px;
}

/* ---- Forms ------------------------------------------------------------- */
label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 6px; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--brand); }
textarea { line-height: 1.5; }
code { font-family: var(--mono); font-size: 0.85em; color: var(--accent-text); }

/* ---- Buttons ----------------------------------------------------------- */
button, .btn, .btn-secondary, .btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  line-height: 1.2;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
button, .btn { background: var(--brand); color: #fff; }
button:hover, .btn:hover { background: var(--brand-hover); text-decoration: none; }

.btn-secondary { background: var(--surface-hover); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: var(--surface-hover-2); text-decoration: none; }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger-hover); text-decoration: none; }

.btn-sm { padding: 6px 12px; font-size: 0.85rem; }

/* Disabled + loading (submit guard in app.js) */
button:disabled, .btn:disabled, .btn.is-loading { opacity: 0.7; cursor: default; }
.btn.is-loading::before,
button.is-loading::before {
  content: ""; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.45); border-top-color: #fff;
  animation: dp-spin 0.7s linear infinite;
}
@keyframes dp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn.is-loading::before, button.is-loading::before { animation-duration: 2s; }
}

/* ---- Links ------------------------------------------------------------- */
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Visible keyboard focus (mouse clicks stay clean). */
a:focus-visible, button:focus-visible, .btn:focus-visible, .btn-secondary:focus-visible,
.btn-danger:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--link); outline-offset: 2px; border-radius: 4px;
}

/* ---- Flash messages ---------------------------------------------------- */
.flash { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 14px; font-size: 0.9rem; }
.flash.success { background: var(--success-bg); border: 1px solid var(--success-border); }
.flash.error { background: var(--error-bg); border: 1px solid var(--danger); }
.flash-wrap { max-width: 1100px; margin: 20px auto 0; padding: 0 24px; }

/* ---- Tables ------------------------------------------------------------ */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
/* Wrap a wide table in .table-wrap so it scrolls instead of overflowing on mobile. */
.table-wrap { width: 100%; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #3a3b45 transparent; }
.table-wrap::-webkit-scrollbar { height: 8px; }
.table-wrap::-webkit-scrollbar-thumb { background: #3a3b45; border-radius: 4px; }

/* ---- Helpers ----------------------------------------------------------- */
.text-muted { color: var(--faint); font-size: 0.85rem; }

/* Pill chips (email allowlist entries, tokens). */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--input-bg); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 3px 6px 3px 10px; font-size: 0.8rem;
}
.chip-remove {
  background: none; border: none; color: var(--danger-softer);
  cursor: pointer; padding: 0; font-size: 0.9rem; line-height: 1;
}
.chip-remove:hover { color: var(--danger-soft); background: none; }

/* Small status badge (e.g. "admin"). */
.badge {
  background: var(--accent-bg); border: 1px solid var(--brand);
  border-radius: var(--radius-pill); padding: 2px 8px; font-size: 0.7rem; color: var(--accent-text);
}

/* ---- Topbar + admin nav ----------------------------------------------- */
.topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 24px; border-bottom: 1px solid var(--border); background: var(--panel);
}
.topbar .brand { font-weight: 700; font-size: 1.05rem; white-space: nowrap; }
.topbar a { font-size: 0.9rem; }

.admin-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.admin-nav a { padding: 6px 10px; border-radius: 6px; font-size: 0.9rem; white-space: nowrap; }
.admin-nav a:hover { text-decoration: none; background: var(--surface-hover); }
.admin-nav a[aria-current="page"] { background: var(--accent-bg); color: var(--accent-text); }
.admin-nav .sep { width: 1px; align-self: stretch; background: var(--border); margin: 5px 6px; }

@media (max-width: 820px) {
  .topbar { flex-direction: column; align-items: flex-start; }
  .admin-nav { width: 100%; overflow-x: auto; padding-bottom: 4px; }
}

/* ---- Hanko web component theming -------------------------------------- */
hanko-auth, hanko-login {
  --color: var(--text);
  --color-shade-1: var(--muted);
  --brand-color: var(--brand);
  --brand-color-shade-1: var(--brand-hover);
  --background-color: var(--panel);
  --input-background-color: var(--input-bg);
  --input-border-color: var(--border);
  --border-radius: var(--radius);
  --font-family: var(--font);
}