/*
 * Botlane customer dashboard, admin console and sign-in pages.
 * Builds on styles.css (neural_substrate tokens): hairline borders, dark-first, Inter + Geist Mono, purple accent.
 */

.ico { flex: none; display: block; }
.mono { font-family: var(--font-mono); }
.block { display: block; }
.nowrap { white-space: nowrap; }
.min0 { min-width: 0; }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.small { font-size: var(--fs-12); }
.link { font-size: var(--fs-13); color: var(--body); text-decoration: none; }
.link:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.row-8 { display: flex; align-items: center; gap: var(--sp-8); }
.row-12 { display: flex; gap: var(--sp-12); }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: var(--sp-16); }
.stack-16 { display: flex; flex-direction: column; gap: var(--sp-16); min-width: 0; }
.field { display: flex; flex-direction: column; gap: var(--sp-8); min-width: 0; }
.field label { font-size: var(--fs-13); font-weight: var(--w-medium); color: var(--body); }
.field .input { margin-top: 0; }
.field .hint { margin-top: -2px; }
select.input { appearance: none; padding-right: var(--sp-32); cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.input[readonly] { color: var(--body); }
.input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--c-amber); }
.check { display: flex; gap: var(--sp-8); align-items: flex-start; font-size: var(--fs-14); color: var(--body); cursor: pointer; }
.check input { margin-top: 4px; accent-color: var(--c-purple); }
fieldset.subtle { padding: var(--sp-16); border-radius: var(--r-6); box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: var(--sp-12); }
fieldset.subtle legend { padding: 0 var(--sp-4); margin: 0; }
.btn-block { width: 100%; }
.btn-danger { background: transparent; color: var(--amber-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-amber) 45%, var(--line)); }
.btn-danger:hover { background: color-mix(in srgb, var(--c-amber) 8%, transparent); transform: translateY(-1px); }
.icon-btn.sm { width: 32px; height: 32px; }
.form-error { padding: var(--sp-12) var(--sp-16); border-radius: var(--r-6); font-size: var(--fs-14); color: var(--fg);
  background: color-mix(in srgb, var(--c-amber) 8%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-amber) 50%, var(--line)), inset 3px 0 0 var(--c-amber); }
.flash { display: flex; align-items: center; gap: var(--sp-8); padding: var(--sp-12) var(--sp-16); border-radius: var(--r-6); font-size: var(--fs-14); color: var(--fg);
  background: color-mix(in srgb, var(--ok) 8%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 40%, var(--line)), inset 3px 0 0 var(--ok); margin-bottom: var(--sp-20); }
.flash .ico { color: var(--ok); }

/* ── Status pills ── */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px var(--sp-8); border-radius: var(--r-full); font-size: var(--fs-12); font-weight: var(--w-medium); white-space: nowrap; color: var(--body); box-shadow: inset 0 0 0 1px var(--line); vertical-align: 1px; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--skel2); }
.pill-processed::before, .pill-reviewed::before { background: var(--ok); }
.pill-needs_review { color: var(--amber-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-amber) 45%, var(--line)); }
.pill-needs_review::before { background: var(--c-amber); }
.pill-failed, .pill-revoked { color: var(--muted); }
.pill-failed::before { background: #e5484d; }

/* ── App shell ── */
body.app { --side: 248px; }
.shell { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: var(--sp-16); padding: var(--sp-16) var(--sp-12); background: var(--bg); box-shadow: inset -1px 0 0 var(--line); overflow-y: auto; }
.side-top { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-8); min-height: 36px; }
.side-close { display: none; font-size: 22px; line-height: 1; }
.workspace-chip { display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-8); border-radius: var(--r-6); box-shadow: inset 0 0 0 1px var(--line); background: var(--card); }
.ws-avatar { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-6); font-size: var(--fs-13); font-weight: var(--w-semibold); color: var(--btn-fg);
  background: linear-gradient(135deg, var(--c-purple), color-mix(in srgb, var(--c-purple) 50%, var(--c-blue))); }
.ws-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ws-text strong { font-size: var(--fs-13); font-weight: var(--w-medium); color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-text small { font-size: var(--fs-12); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-nav { flex: 1; display: flex; flex-direction: column; }
.side-label { font-size: var(--fs-11); font-weight: var(--w-medium); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); padding: var(--sp-16) var(--sp-8) var(--sp-8); }
.side-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.side-nav a { position: relative; display: flex; align-items: center; gap: var(--sp-12); min-height: 34px; padding: 0 var(--sp-8); border-radius: var(--r-6); font-size: var(--fs-14); color: var(--body); text-decoration: none; }
.side-nav a .ico { color: var(--muted); }
.side-nav a:hover { background: var(--soft); color: var(--fg); }
.side-nav a[aria-current="page"] { background: var(--soft); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); }
.side-nav a[aria-current="page"] .ico { color: var(--c-purple); }
.side-nav a[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--c-purple); }
.side-nav .count { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: var(--r-full); font-size: var(--fs-11); font-weight: var(--w-semibold); line-height: 18px; text-align: center; color: #08090a; background: var(--c-amber); }
.side-user { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); padding: var(--sp-12) var(--sp-8) 0; box-shadow: inset 0 1px 0 var(--line); }
.scrim { display: none; }

.main-col { display: flex; flex-direction: column; min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: var(--sp-12); height: 56px; padding: 0 var(--sp-32);
  background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: saturate(1.4) blur(12px); box-shadow: inset 0 -1px 0 var(--line); }
.menu-btn, .topbar-logo { display: none; }
.crumbs { display: flex; align-items: center; gap: var(--sp-8); min-width: 0; font-size: var(--fs-14); color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--fg); }
.crumbs > span:last-child { color: var(--fg); font-weight: var(--w-medium); }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-4); }
.content { flex: 1; width: 100%; max-width: 1280px; padding: var(--sp-32); }
.content:focus { outline: none; }
.app-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-8) var(--sp-24); padding: var(--sp-20) var(--sp-32) var(--sp-24); font-size: var(--fs-12); color: var(--muted); box-shadow: inset 0 1px 0 var(--line); }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-16); margin-bottom: var(--sp-24); flex-wrap: wrap; }
.page-head h1 { font-size: var(--fs-24); font-weight: var(--w-medium); letter-spacing: var(--ls-display); line-height: 1.2; }
.page-head .hint { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.page-head form { margin: 0; }

.section { padding: var(--sp-20); display: flex; flex-direction: column; gap: var(--sp-12); }
.section h2, .section-head h2, .newkey h2 { font-size: var(--fs-15); font-weight: var(--w-semibold); letter-spacing: var(--ls-heading); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); }
.section-head.pad { padding: var(--sp-16) var(--sp-20); box-shadow: inset 0 -1px 0 var(--line); }

/* ── Stats ── */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-16); margin-bottom: var(--sp-24); }
.stat { display: flex; flex-direction: column; gap: var(--sp-8); padding: var(--sp-20); text-decoration: none; color: inherit; }
.stat-label { font-size: var(--fs-13); color: var(--muted); }
.stat-value { font-size: var(--fs-32); font-weight: var(--w-medium); letter-spacing: var(--ls-display); line-height: 1; font-variant-numeric: tabular-nums; color: var(--fg); }
.stat-value small { font-size: var(--fs-16); color: var(--muted); font-weight: var(--w-regular); }
.stat-link { transition: box-shadow 0.15s ease, transform 0.15s ease; }
.stat-link:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--muted); }
.stat-warn .stat-value { color: var(--amber-ink); }
.stat-warn { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-amber) 40%, var(--line)), inset 0 2px 0 var(--c-amber); }

.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--sp-24); align-items: start; }
.settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-grid { grid-template-columns: minmax(0, 1fr) 380px; }

/* ── Activity ── */
.activity { list-style: none; margin: 0 calc(-1 * var(--sp-20)) calc(-1 * var(--sp-20)); padding: 0; }
.activity li { display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-12) var(--sp-20); box-shadow: inset 0 1px 0 var(--line); }
.act-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.act-needs_review { background: var(--c-amber); }
.act-failed { background: #e5484d; }
.act-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.act-title, .doc-link { color: var(--fg); text-decoration: none; font-weight: var(--w-medium); font-size: var(--fs-14); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-link { display: inline-block; max-width: 100%; vertical-align: bottom; }
.act-title:hover, .doc-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.act-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.small-empty { padding: var(--sp-24); }
.small-empty img { width: min(240px, 100%); }
pre.small-code { font-size: var(--fs-12); max-height: none; }

/* ── Quota meter ── */
.quota { display: flex; flex-direction: column; gap: var(--sp-8); }
.quota-head { display: flex; justify-content: space-between; font-size: var(--fs-13); color: var(--body); }
.meter { height: 6px; border-radius: var(--r-full); background: var(--skel); overflow: hidden; }
.meter.sm { height: 4px; width: 96px; }
.meter i { display: block; height: 100%; border-radius: inherit; background: var(--c-purple); }
[data-state="warn"] .meter i { background: var(--c-amber); }
[data-state="over"] .meter i { background: #e5484d; }
.quota[data-state="over"] .hint { color: var(--amber-ink); }
.mini-quota { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-13); color: var(--fg); }

/* ── Data tables ── */
table.data th[scope="row"] { font-size: var(--fs-14); font-weight: var(--w-medium); color: var(--fg); white-space: normal; max-width: 360px; }
table.data td, table.data th { vertical-align: middle; }
table.data thead th { background: color-mix(in srgb, var(--soft) 55%, var(--card)); }
table.data tbody tr:hover > * { background: color-mix(in srgb, var(--soft) 60%, transparent); }
table.data tbody tr:last-child > * { box-shadow: none; }
table.data td:first-child, table.data th:first-child { padding-left: var(--sp-20); }
table.data td:last-child, table.data th:last-child { padding-right: var(--sp-20); }
tr.muted th, tr.muted td { opacity: 0.6; }
.row-actions { text-align: right; white-space: nowrap; }
.row-actions form { display: inline-block; margin: 0 0 0 var(--sp-4); }
.pager { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-12); padding: var(--sp-12) var(--sp-20); box-shadow: inset 0 1px 0 var(--line); }

.filters { display: flex; align-items: flex-end; gap: var(--sp-12); padding: var(--sp-16); margin-bottom: var(--sp-16); flex-wrap: wrap; }
.filters .field { min-width: 160px; }
.filters .grow { min-width: 220px; }
.filter-actions { display: flex; align-items: center; gap: var(--sp-12); min-height: 40px; }
.filter-actions .btn { min-height: 40px; }

/* ── Process / document pages ── */
.workspace.wide { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); padding-bottom: 0; }
.workspace.single { grid-template-columns: minmax(0, 1fr); padding-bottom: 0; }
.workspace.single .window { min-height: 0; }

/* ── Review queue ── */
.review-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-12); }
.review-item { display: flex; gap: var(--sp-16); align-items: flex-start; justify-content: space-between; padding: var(--sp-16) var(--sp-20);
  box-shadow: var(--win-shadow), inset 3px 0 0 var(--c-amber); }
.ri-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.reasons { margin: var(--sp-8) 0 0; padding-left: var(--sp-20); font-size: var(--fs-13); color: var(--body); }
.reasons li + li { margin-top: 2px; }
.ri-actions { display: flex; gap: var(--sp-8); flex: none; }
.ri-actions form { margin: 0; }

/* ── New key / one-time link ── */
.newkey { padding: var(--sp-20); margin-bottom: var(--sp-24); display: flex; flex-direction: column; gap: var(--sp-12);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-purple) 50%, var(--line)), inset 3px 0 0 var(--c-purple); background: color-mix(in srgb, var(--c-purple) 6%, var(--card)); }
.newkey h2 { display: flex; align-items: center; gap: var(--sp-8); }
.newkey h2 .ico { color: var(--c-purple); }
.newkey p { font-size: var(--fs-14); color: var(--body); }
.keybox-row { display: flex; gap: var(--sp-8); }
.keybox-row .input { margin: 0; flex: 1; min-width: 0; font-size: var(--fs-13); }
.keybox-row .btn { min-height: 40px; }
.kv-list { list-style: none; margin: 0; padding: 0; font-size: var(--fs-13); }
.kv-list li { display: flex; justify-content: space-between; gap: var(--sp-12); padding: var(--sp-8) 0; box-shadow: inset 0 -1px 0 var(--line); color: var(--body); }
.inline-form { display: flex; align-items: flex-end; gap: var(--sp-12); padding: var(--sp-16) var(--sp-20); box-shadow: inset 0 1px 0 var(--line); flex-wrap: wrap; }
.inline-form .btn { min-height: 40px; }

/* ── Usage bars ── */
.bars { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-12); align-items: end; height: 200px; padding: var(--sp-8) 0 var(--sp-4); }
.bar-col { display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); height: 100%; }
.bar-track { position: relative; flex: 1; width: 100%; max-width: 56px; border-radius: var(--r-4); background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); }
.bar-track i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: var(--r-4); background: color-mix(in srgb, var(--c-purple) 45%, var(--soft)); }
.bar-col.current .bar-track i { background: var(--c-purple); }
.quota-line { position: absolute; left: -4px; right: -4px; height: 0; border-top: 1px dashed var(--muted); }
.bar-val { font-size: var(--fs-12); color: var(--body); }
.bar-label { font-size: var(--fs-12); color: var(--muted); }

/* ── Sign-in pages ── */
body.auth { display: flex; min-height: 100vh; }
.auth-main { flex: 1; display: grid; place-items: center; align-content: center; gap: var(--sp-24); padding: var(--sp-48) var(--sp-20); position: relative; overflow: hidden; }
.auth-art { position: absolute; inset: auto -80px -60px auto; width: 520px; opacity: 0.55; pointer-events: none; }
.auth-art img { width: 100%; height: auto; }
.auth-card { position: relative; width: min(400px, 100%); padding: var(--sp-32); display: flex; flex-direction: column; gap: var(--sp-24); }
.auth-card h1 { font-size: var(--fs-24); font-weight: var(--w-medium); letter-spacing: var(--ls-display); }
.auth-card .hint { margin-top: var(--sp-4); }
.auth-card .eyebrow { color: var(--c-purple); }
.auth-foot { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp-12); font-size: var(--fs-12); color: var(--muted); text-align: center; }
.auth-tools { position: absolute; top: var(--sp-20); right: var(--sp-20); z-index: 1; }
.side-theme { padding: var(--sp-12) var(--sp-12) 0; }
.app-footer .theme-segment { margin-left: auto; }

/* ── Landing ── */
.landing-hero { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--sp-48); align-items: center; }
.landing-hero .row-8 { margin-top: var(--sp-32); }
.hero-art, .hero-art img { width: 100%; height: auto; }
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-16); padding-bottom: var(--sp-32); }
.features .eyebrow { color: var(--c-purple); }
.landing-note { padding-bottom: var(--sp-64); }

/* ── Responsive ── */
@media (max-width: 1180px) {
  .grid-2, .admin-grid { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; z-index: 30; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: inset -1px 0 0 var(--line), 0 0 40px rgba(0,0,0,0.4); }
  body.nav-open .sidebar { transform: none; }
  body.nav-open { overflow: hidden; }
  .scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, 0.5); }
  .side-close, .menu-btn { display: inline-grid; }
  .topbar-logo { display: inline-flex; }
  .topbar { padding: 0 var(--sp-16); }
  .content { padding: var(--sp-24) var(--sp-16); }
  .app-footer { padding: var(--sp-20) var(--sp-16); }
  .workspace.wide { grid-template-columns: minmax(0, 1fr); }
  .settings-grid { grid-template-columns: minmax(0, 1fr); }
  .landing-hero { grid-template-columns: 1fr; }
  .hero-art { max-width: 320px; }
  .features { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .crumbs { display: none; }
  .page-head h1 { font-size: var(--fs-20); }
  .page-head > .btn, .page-head > a.btn { width: 100%; }
  .stats { gap: var(--sp-12); }
  .stat { padding: var(--sp-16); }
  .stat-value { font-size: var(--fs-24); }
  .act-meta .hint { display: none; }
  .review-item { flex-direction: column; }
  .keybox-row { flex-direction: column; }
  .row-12 { flex-direction: column; }
  .bars { height: 160px; gap: var(--sp-8); }
  .auth-card { padding: var(--sp-24); }
  .auth-art { display: none; }
  .filters .field, .filters .grow { min-width: 0; flex: 1 1 100%; }
  table.data td:first-child, table.data th:first-child { padding-left: var(--sp-16); }
  table.data td:last-child, table.data th:last-child { padding-right: var(--sp-16); }
  .nav .btn-sm { padding: 0 var(--sp-12); }
}