:root{
  --brand:#0f172a;        /* slate-900 */
  --brand-2:#1e293b;      /* slate-800 */
  --accent:#13b5ea;       /* xero blue  */
  --accent-2:#0ea5e9;
  --accent-ink:#065a86;
  --bg:#eef2f7;
  --ink:#1e293b;
  --muted:#64748b;
  --line:#e2e8f0;
}
*{ -webkit-font-smoothing:antialiased; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ---------- nav ---------- */
.app-nav{
  background:linear-gradient(100deg,var(--brand),var(--brand-2));
  padding:.7rem 0; box-shadow:0 2px 12px rgba(15,23,42,.18);
}
.app-nav .navbar-brand{ color:#fff; font-weight:600; font-size:1.15rem; }
.brand-sub{ color:#8fd8f4; font-weight:500; }
.brand-mark{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;font-size:1rem;box-shadow:0 2px 8px rgba(19,181,234,.5);
}
.brand-mark-lg{ width:64px;height:64px;border-radius:16px;font-size:1.9rem;margin:0 auto .8rem; }
.nav-user{ color:#cbd5e1;font-size:.92rem; }
.app-nav .btn-outline-light{ --bs-btn-border-color:#ffffff55; }

/* ---------- buttons ---------- */
.btn-accent{
  --bs-btn-bg:var(--accent);--bs-btn-border-color:var(--accent);
  --bs-btn-hover-bg:var(--accent-2);--bs-btn-hover-border-color:var(--accent-2);
  --bs-btn-active-bg:var(--accent-ink);--bs-btn-color:#fff;--bs-btn-hover-color:#fff;
  --bs-btn-disabled-bg:var(--accent);--bs-btn-disabled-border-color:var(--accent);
  font-weight:600;
}

/* ---------- cards ---------- */
.card{ border:1px solid var(--line); border-radius:14px; box-shadow:0 1px 3px rgba(15,23,42,.05); }
.conn-card .card-body{ padding:1.1rem 1.25rem; }
.conn-ok{ border-left:4px solid #22c55e; }
.conn-card.border-warning{ border-left:4px solid #f59e0b; }
.search-card .card-body{ padding:1.4rem 1.5rem; }

/* ---------- org chips + select ---------- */
.org-chips{ display:flex;flex-wrap:wrap;gap:.4rem; }
.org-chip{
  background:#e0f2fe;color:#0369a1;border:1px solid #bae6fd;
  padding:.2rem .6rem;border-radius:999px;font-size:.82rem;font-weight:500;
}
.org-select{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:.35rem .9rem;max-height:190px;overflow:auto;
  background:#f8fafc;border:1px solid var(--line);border-radius:10px;padding:.75rem 1rem;
}

/* ---------- results ---------- */
.result-table thead th{
  background:#f1f5f9;color:var(--muted);font-size:.74rem;letter-spacing:.04em;
  text-transform:uppercase;border-bottom:1px solid var(--line);white-space:nowrap;
}
.result-table td{ font-size:.92rem;border-color:#f1f5f9; }
.result-table tbody tr:hover{ background:#f8fbff; }
.inv-num{ font-variant-numeric:tabular-nums;font-weight:600; }
.snippet{ color:var(--muted);font-size:.8rem;display:block;max-width:320px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.amount{ font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap; }

/* match + status badges */
.badge-match{ font-weight:600;font-size:.72rem;padding:.3em .6em;border-radius:6px; }
.m-supplier{ background:#dbeafe;color:#1d4ed8; }
.m-item{ background:#ede9fe;color:#6d28d9; }
.m-reference{ background:#f1f5f9;color:#475569; }
.m-all{ background:#f1f5f9;color:#475569; }
.badge-status{ font-size:.72rem;font-weight:600;text-transform:capitalize; }
.s-authorised,.s-paid{ background:#dcfce7!important;color:#15803d!important; }
.s-draft,.s-submitted{ background:#fef9c3!important;color:#a16207!important; }
.s-voided,.s-deleted{ background:#fee2e2!important;color:#b91c1c!important; }

.xero-link{ color:var(--accent-ink);text-decoration:none;font-weight:600;white-space:nowrap; }
.xero-link:hover{ text-decoration:underline; }

/* ---------- states ---------- */
.state-box{ text-align:center;padding:2.5rem 1rem;color:var(--muted); }
.state-box .bi{ font-size:2.4rem;display:block;margin-bottom:.5rem;opacity:.5; }
.spinner-wrap{ display:flex;align-items:center;gap:.6rem;justify-content:center;
  padding:2rem;color:var(--muted); }

/* ---------- footer ---------- */
.app-footer{ color:var(--muted);font-size:.82rem; }

/* ================= auth pages ================= */
.auth-body{
  min-height:100vh;display:grid;place-items:center;
  background:radial-gradient(1200px 600px at 50% -10%,#1e293b,#0f172a);
  padding:1.5rem;
}
.auth-card{
  width:100%;max-width:400px;background:#fff;border-radius:18px;
  padding:2.2rem 2rem;box-shadow:0 24px 60px rgba(2,6,23,.45);
}
.auth-brand{ text-align:center;margin-bottom:1.4rem; }
.auth-brand h1{ font-size:1.4rem;font-weight:700;margin:0; }
.code-input{ letter-spacing:.5em;font-size:1.6rem;font-weight:600;padding-left:.5em; }
.enroll-qr{ display:flex;justify-content:center;margin:0 0 1rem; }
.enroll-qr img{ border-radius:10px; }
.enroll-secret{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:1rem;letter-spacing:.08em;background:#f1f5f9;border-radius:8px;
  padding:.5rem;color:#334155; }
.auth-foot{ text-align:center;color:var(--muted);font-size:.85rem;margin:1.2rem 0 0; }
.auth-foot a{ color:var(--accent-ink); }