/* ───────────────────────────────────────────────────────────────────────────
   eSign shared design system — the single source of truth for the admin UI.

   Loaded on every page right after fonts.css and BEFORE the page's own CSS, so a
   page can still override a token or component locally (e.g. login keeps a larger
   --radius-xl). Adding it changed no pixels: every value below is lifted verbatim
   from the per-page blocks it replaces.

   ┌─ HOW TO USE ──────────────────────────────────────────────────────────────┐
   │ <link rel="stylesheet" href="/static/shared/fonts.css">                     │
   │ <link rel="stylesheet" href="/static/shared/design-system.css">             │
   │ <link rel="stylesheet" href="/static/<page>/<page>.css">  (page-specific)   │
   │ <link rel="stylesheet" href="/static/shared/menu.css">                      │
   └─────────────────────────────────────────────────────────────────────────────┘

   Token naming carries a couple of aliases (--mute/--muted, --panel/--surface)
   because the old per-page blocks disagreed; both resolve to the same value so
   existing rules keep working. --err and --danger are two historically distinct
   reds (admin tables vs. forms) kept separate for now; converge in a later pass.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Surfaces & text ─────────────────────────────────────────────────────── */
  --bg: #F5F4F0;
  --panel: #fff;
  --surface: #fff;          /* alias of --panel (used by login) */
  --ink: #1A1A18;
  --ink-2: #52514C;
  --muted: #8C8A83;
  --mute: #8C8A83;          /* alias of --muted (used by requests/settings) */
  --line: #E8E6DF;
  --line-muted: #EFEDE7;

  /* ── Brand ───────────────────────────────────────────────────────────────── */
  --brand: #1A7A4E;
  --brand-hover: #14613D;
  --brand-tint: rgba(26, 122, 78, .10);

  /* ── Status ──────────────────────────────────────────────────────────────── */
  --ok: #1A7A4E;
  --warn: #8A5E0C;
  --warn-bg: rgba(176, 122, 20, .12);
  --warn-line: rgba(176, 122, 20, .3);
  --danger: #C0473F;        /* forms, designer, sign, login */
  --danger-bg: rgba(192, 71, 63, .12);
  --err: #A33A33;           /* legacy admin-table red — converge with --danger later */

  /* ── Code blocks ─────────────────────────────────────────────────────────── */
  --code-bg: #17150F;
  --code-ink: #E8E6DF;

  /* ── Radii ───────────────────────────────────────────────────────────────── */
  --radius-sm: 5px;
  --radius-md: 9px;
  --radius-lg: 11px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(20, 18, 14, .04);
  --shadow-md: 0 1px 2px rgba(20, 18, 14, .04), 0 16px 38px rgba(20, 18, 14, .06);
  --shadow-lg: 0 1px 2px rgba(20, 18, 14, .04), 0 14px 34px rgba(20, 18, 14, .07);

  /* ── Type ────────────────────────────────────────────────────────────────── */
  --font-ui: "Assistant", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ── Reset + body base ─────────────────────────────────────────────────────────
   font-size is intentionally NOT set here — pages legitimately differ (admin 14px,
   api-docs 15px, login 16px) and set their own. */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
}

/* ── Keyboard focus ring (a11y) ─────────────────────────────────────────────────
   :where() keeps specificity at zero, so any component that already styles :focus
   (e.g. the inputs with a box-shadow ring) keeps its own treatment; this only adds a
   visible ring to controls that had none (buttons, links, menu items). Mouse clicks
   are unaffected — :focus-visible only triggers for keyboard/AT navigation. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── Top bar ──────────────────────────────────────────────────────────────────
   The light, soft admin header shared by requests/settings (and overridden by the
   sticky variant on api-docs). */
.bar {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel); color: var(--ink);
  padding: 12px 18px; border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(20, 18, 14, .04);
}
.bar-mark {
  width: 30px; height: 30px; border-radius: 9px; background: var(--brand);
  display: flex; align-items: center; justify-content: center; flex: none;
  box-shadow: 0 4px 12px rgba(26, 122, 78, .22);
}
.bar-mark svg { width: 18px; height: 18px; display: block; }
.bar-word { font-weight: 800; letter-spacing: -.01em; font-size: 1.05rem; }
.bar-sep { color: #D8D5CC; }
.bar strong { font-weight: 600; }
.spacer { flex: 1; }

.barbtn {
  background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block;
}
.barbtn:hover { border-color: var(--brand); background: rgba(26, 122, 78, .06); color: var(--brand); }

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.btn {
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 10px; padding: 9px 16px; font: inherit; font-weight: 600; cursor: pointer;
}
.btn:hover { border-color: var(--brand); background: rgba(26, 122, 78, .06); color: var(--brand); }
.btn.danger { border-color: rgba(192, 71, 63, .4); color: var(--err); }
.btn.danger:hover { border-color: var(--err); background: rgba(192, 71, 63, .08); color: var(--err); }
.btn[disabled] { opacity: .45; cursor: default; }
.btn[disabled]:hover { border-color: var(--line); background: #fff; color: var(--ink); }

/* ── Status badges ────────────────────────────────────────────────────────────
   Class names match what requests.js emits (status + webhook status). */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge.pending   { background: rgba(176, 122, 20, .12); color: var(--warn); }
.badge.signed    { background: rgba(26, 122, 78, .10);  color: var(--ok); }
.badge.expired   { background: rgba(192, 71, 63, .12);  color: var(--err); }
.badge.delivered { background: rgba(26, 122, 78, .10);  color: var(--ok); }
.badge.failed    { background: rgba(192, 71, 63, .12);  color: var(--err); }
.badge.wpending  { background: rgba(176, 122, 20, .12); color: var(--warn); }
.badge.none      { background: #F0EEE8; color: var(--mute); }

/* ── Utilities ────────────────────────────────────────────────────────────────── */
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Confirm dialog ─────────────────────────────────────────────────────────────
   Styled replacement for window.confirm(), driven by /static/shared/dialog.js.
   Matches the app's warm card language instead of browser chrome. */
.dlg-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(20, 18, 14, .45); opacity: 0; transition: opacity .15s ease;
}
.dlg-overlay.show { opacity: 1; }
.dlg {
  width: 100%; max-width: 420px; padding: 22px 22px 18px;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-xl);
  box-shadow: 0 18px 50px rgba(20, 18, 14, .28);
  transform: translateY(8px) scale(.98); transition: transform .15s ease;
}
.dlg-overlay.show .dlg { transform: none; }
.dlg h3 { margin: 0 0 8px; font-size: 1.1rem; font-weight: 700; }
.dlg p { margin: 0 0 18px; color: var(--ink-2); font-size: .95rem; line-height: 1.55; white-space: pre-line; }
.dlg-actions { display: flex; gap: 10px; justify-content: flex-start; }
.dlg-actions .btn { min-width: 96px; text-align: center; }
.dlg .btn.confirm { background: var(--brand); border-color: var(--brand); color: #fff; }
.dlg .btn.confirm:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: #fff; }
.dlg.danger .btn.confirm { background: var(--danger); border-color: var(--danger); color: #fff; }
.dlg.danger .btn.confirm:hover { background: var(--err); border-color: var(--err); color: #fff; }

/* ── Inline spinner (for buttons mid-action) ──────────────────────────────────── */
.spinner {
  display: inline-block; width: 14px; height: 14px; vertical-align: -2px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  animation: ds-spin .7s linear infinite;
}
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* ── Loading skeleton shimmer ─────────────────────────────────────────────────── */
.skel {
  display: inline-block; height: 12px; border-radius: 6px; min-width: 60px;
  background: linear-gradient(90deg, #ECEAE3 25%, #F5F4F0 50%, #ECEAE3 75%);
  background-size: 200% 100%; animation: ds-shimmer 1.4s ease-in-out infinite;
}
@keyframes ds-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .spinner, .skel { animation: none; }
}

/* ── Empty state ──────────────────────────────────────────────────────────────── */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 44px 20px; color: var(--mute); text-align: center;
}
.empty-state svg { width: 40px; height: 40px; opacity: .6; }
.empty-state .es-title { color: var(--ink-2); font-weight: 600; }

/* ── Inline notice / banner (info, truncation, warnings) ──────────────────────── */
.notice {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: var(--radius-md); font-size: 13px;
  background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn);
}

/* ── Breakpoint convention ──────────────────────────────────────────────────────
   CSS can't use a custom property inside a media query, so this is documentation,
   not a token: the admin-shell pages (requests / settings / api-docs) collapse at
   max-width: 640px. The login auth-card uses a tighter 480px since it's a narrow
   centred card, not a full-width layout. Keep new pages on 640px. */