/* ============================================================
   Backend Console v2 — neutral token layer
   Deployment-brandable: only --ui-accent-* change per brand.
   Light + dark via [data-theme]. Density is fixed "roomy".
   ============================================================ */

:root {
  /* Fonts (kept from v1) */
  --font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, system-ui, sans-serif;
  --font-ui: 'Inter', -apple-system, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Accent — brandable per deployment */
  --ui-accent: #3B5BCC;
  --ui-accent-hover: #2D49B0;
  --ui-accent-soft: #EDF1FD;
  --ui-accent-ink: #28409E;
  --ui-on-accent: #FFFFFF;

  /* Surfaces */
  --ui-paper: #F6F6F4;        /* app body */
  --ui-surface: #FFFFFF;      /* cards, panels */
  --ui-surface-2: #FAFAF8;    /* sunken sections, table header */
  --ui-surface-3: #F0F0EC;    /* pressed / hover wells */
  --ui-overlay: rgba(23, 24, 28, 0.42);

  /* Lines */
  --ui-line: #E8E8E4;
  --ui-line-strong: #D8D8D2;

  /* Ink scale */
  --ui-ink: #191B20;
  --ui-ink-2: #3F434C;
  --ui-ink-3: #6B707C;
  --ui-ink-4: #989DA8;
  --ui-ink-5: #C2C5CC;

  /* Status */
  --ui-ok: #117A4D;
  --ui-ok-soft: #E3F4EB;
  --ui-warn: #9A6700;
  --ui-warn-soft: #FBF0DA;
  --ui-err: #B4382C;
  --ui-err-soft: #FBE9E6;
  --ui-info: #2563EB;
  --ui-info-soft: #E8EFFD;

  /* Geometry — roomy band */
  --ui-control-h: 40px;
  --ui-control-h-sm: 32px;
  --ui-row-h: 52px;
  --ui-radius: 10px;
  --ui-radius-lg: 14px;
  --ui-radius-xl: 18px;

  /* Shadows */
  --ui-shadow-sm: 0 1px 2px rgba(20, 22, 28, 0.05);
  --ui-shadow: 0 1px 3px rgba(20, 22, 28, 0.06), 0 4px 14px rgba(20, 22, 28, 0.05);
  --ui-shadow-lg: 0 4px 12px rgba(20, 22, 28, 0.08), 0 16px 40px rgba(20, 22, 28, 0.12);

  /* Sidebar (light default; dark variant via data-sidebar-tone) */
  --ui-nav-bg: #FBFBF9;
  --ui-nav-line: #ECECE7;
  --ui-nav-ink: #444852;
  --ui-nav-ink-dim: #8A8E99;
  --ui-nav-active-bg: #EDF1FD;
  --ui-nav-active-ink: var(--ui-accent-ink);
  --ui-nav-hover-bg: #F0F0EC;
}

[data-theme="dark"] {
  --ui-accent: #7B93F2;
  --ui-accent-hover: #93A7F5;
  --ui-accent-soft: #232A45;
  --ui-accent-ink: #AEBDF8;
  --ui-on-accent: #0E1018;

  --ui-paper: #121317;
  --ui-surface: #1A1C22;
  --ui-surface-2: #1F222A;
  --ui-surface-3: #262A33;
  --ui-overlay: rgba(0, 0, 0, 0.55);

  --ui-line: #2A2D36;
  --ui-line-strong: #383C47;

  --ui-ink: #EDEEF2;
  --ui-ink-2: #C3C6CF;
  --ui-ink-3: #8E939F;
  --ui-ink-4: #646A77;
  --ui-ink-5: #454A55;

  --ui-ok: #4CC38A;
  --ui-ok-soft: #15291F;
  --ui-warn: #E5B454;
  --ui-warn-soft: #2C2415;
  --ui-err: #EF8B7E;
  --ui-err-soft: #321B18;
  --ui-info: #6CA8F8;
  --ui-info-soft: #18243A;

  --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ui-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 4px 14px rgba(0, 0, 0, 0.35);
  --ui-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5), 0 16px 48px rgba(0, 0, 0, 0.55);

  --ui-nav-bg: #16181D;
  --ui-nav-line: #23262D;
  --ui-nav-ink: #B9BDC7;
  --ui-nav-ink-dim: #6A6F7B;
  --ui-nav-active-bg: #232A45;
  --ui-nav-active-ink: #AEBDF8;
  --ui-nav-hover-bg: #1F222A;
}

/* Dark sidebar tone option (applies in light theme) */
[data-sidebar-tone="dark"]:not([data-theme="dark"]) {
  --ui-nav-bg: #181A20;
  --ui-nav-line: #262932;
  --ui-nav-ink: #B9BDC7;
  --ui-nav-ink-dim: #6A6F7B;
  --ui-nav-active-bg: #2A3354;
  --ui-nav-active-ink: #C2CDF8;
  --ui-nav-hover-bg: #22252D;
}

/* ============ base ============ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ui-ink);
  background: var(--ui-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#root { height: 100%; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; }
code, .mono { font-family: var(--font-mono); }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
a { color: var(--ui-accent); text-decoration: none; }
::placeholder { color: var(--ui-ink-4); }

*:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--ui-line-strong); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ============ shared primitives ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--ui-control-h);
  padding: 0 16px;
  border-radius: var(--ui-radius);
  border: 1px solid transparent;
  font-family: var(--font-ui);
  font-size: 13.5px; font-weight: 600;
  transition: background 0.13s ease, border-color 0.13s ease, color 0.13s ease, box-shadow 0.13s ease;
  white-space: nowrap;
  user-select: none;
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-primary { background: var(--ui-accent); color: var(--ui-on-accent); }
.btn-primary:hover:not(:disabled) { background: var(--ui-accent-hover); }
.btn-secondary {
  background: var(--ui-surface); color: var(--ui-ink-2);
  border-color: var(--ui-line-strong);
  box-shadow: var(--ui-shadow-sm);
}
.btn-secondary:hover:not(:disabled) { background: var(--ui-surface-2); color: var(--ui-ink); }
.btn-ghost { background: transparent; color: var(--ui-ink-3); }
.btn-ghost:hover:not(:disabled) { background: var(--ui-surface-3); color: var(--ui-ink); }
.btn-danger { background: var(--ui-err); color: #fff; }
.btn-sm { height: var(--ui-control-h-sm); padding: 0 12px; font-size: 12.5px; border-radius: 8px; }

.field-label {
  display: block;
  font-size: 12.5px; font-weight: 600; color: var(--ui-ink-2);
  margin-bottom: 6px;
}
.input, .select {
  width: 100%;
  height: var(--ui-control-h);
  padding: 0 12px;
  border-radius: var(--ui-radius);
  border: 1px solid var(--ui-line-strong);
  background: var(--ui-surface);
  color: var(--ui-ink);
  font-size: 14px;
  transition: border-color 0.13s ease, box-shadow 0.13s ease;
}
.input:focus, .select:focus {
  outline: none;
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px var(--ui-accent-soft);
}
.input.input-err { border-color: var(--ui-err); }
.input.input-err:focus { box-shadow: 0 0 0 3px var(--ui-err-soft); }

.card {
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-sm);
}
.card-hover { transition: box-shadow 0.16s ease, transform 0.16s ease, border-color 0.16s ease; }
.card-hover:hover { box-shadow: var(--ui-shadow); transform: translateY(-2px); border-color: var(--ui-line-strong); }

.icon-chip {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ui-accent-soft); color: var(--ui-accent-ink);
}

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 10px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap; flex: none; max-width: 100%;
}
.badge .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex: none; }
.badge-ok { background: var(--ui-ok-soft); color: var(--ui-ok); }
.badge-warn { background: var(--ui-warn-soft); color: var(--ui-warn); }
.badge-err { background: var(--ui-err-soft); color: var(--ui-err); }
.badge-info { background: var(--ui-info-soft); color: var(--ui-info); }
.badge-neutral { background: var(--ui-surface-3); color: var(--ui-ink-3); }
.badge-accent { background: var(--ui-accent-soft); color: var(--ui-accent-ink); }

.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  border: 1px solid var(--ui-line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--ui-surface);
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 600; color: var(--ui-ink-3);
}

/* avatar */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  font-weight: 700;
  flex: none;
  user-select: none;
}

/* toast */
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* generic entrance for view transitions — transform only, so screenshots
   and exports that restart animations never capture invisible content */
@keyframes view-in {
  from { transform: translateY(8px); }
  to { transform: translateY(0); }
}
/* generic entrance for view transitions — transform only, and NO fill-mode:
   a retained transform would turn the container into a containing block for
   position:fixed children (drawers/modals), mispositioning them */
.view-in { animation: view-in 0.22s ease; }

@media (prefers-reduced-motion: reduce) {
  .view-in { animation: none; }
}