/* UniteSync app stylesheet — design tokens, component classes,
   dark-mode overrides. Lives in /static/ and is loaded after
   Tailwind CDN in every base template. */

:root {
  /* Primary */
  --primary:        #7c3aed;
  --primary-hover:  #5a44d8;
  --primary-active: #4c38c4;
  --primary-rgb:    124, 58, 237;

  /* Warm accent (rare — alerts, highlights) */
  --accent:        #F59E0B;
  --accent-hover:  #D97706;

  /* Surfaces */
  --bg-page:    #F8FAFC;
  --bg-surface: #FFFFFF;
  --bg-hover:   #F1F5F9;

  /* Borders */
  --border:   #E2E8F0;
  --border-2: #CBD5E1;

  /* Text */
  --text:          #0F172A;
  --text-muted:    #64748B;
  --text-tertiary: #94A3B8;
  --text-disabled: #CBD5E1;

  /* Layout */
  --sidebar-w: 220px;
}

html.dark {
  --primary:        #5b21b6;
  --primary-hover:  #6d28d9;
  --primary-active: #4c1d95;

  --bg-page:    #0F172A;
  --bg-surface: #1E293B;
  --bg-hover:   #334155;

  --border:   #334155;
  --border-2: #475569;

  --text:          #F8FAFC;
  --text-muted:    #CBD5E1;
  --text-tertiary: #94A3B8;
  --text-disabled: #475569;
}

/* FOUC mask: hides the body until tw-ready.js removes .pre-ready. */
body.pre-ready { visibility: hidden; }

/* Base body styling that survives the Tailwind reset. */
body {
  background: var(--bg-page);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.logo-dark { display: none; }
html.dark .logo-light { display: none; }
html.dark .logo-dark  { display: block; }

/* ─── Component classes ──────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
  cursor: pointer;
  user-select: none;
}
.btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.btn-primary {
  background: var(--primary);
  color: #fff;
  border: 1px solid var(--primary);
}
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-primary:active { background: var(--primary-active); border-color: var(--primary-active); }

.btn-secondary {
  background: var(--bg-surface);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--bg-hover); }

.btn-danger {
  background: var(--bg-surface);
  color: #be123c;
  border: 1px solid #fecdd3;
}
.btn-danger:hover { background: #fff1f2; }
html.dark .btn-danger { color: #fda4af; border-color: #4c1d24; background: var(--bg-surface); }
html.dark .btn-danger:hover { background: #4c1d24; }

.field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.input, input.input, select.input, textarea.input {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.input:focus, input.input:focus, select.input:focus, textarea.input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-surface);
}

/* Legacy shims — old templates use .brand-card / .brand-chip. */
.brand-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.brand-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
  font: 600 11px/1 'Inter', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ─── Badges (status pills) ───────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.badge-paid       { background: #d1fae5; color: #065f46; }
.badge-complete   { background: #d1fae5; color: #065f46; }
.badge-pending    { background: #fef3c7; color: #92400e; }
.badge-submitted  { background: #e0e7ff; color: #3730a3; }
.badge-issued     { background: #f1f5f9; color: #475569; }
.badge-draft      { background: #f1f5f9; color: #475569; }
.badge-void       { background: #ffe4e6; color: #9f1239; }
.badge-failed     { background: #ffe4e6; color: #9f1239; }

/* ─── Dark-mode soft-background overrides for status palettes ──── */

html.dark .bg-emerald-50  { background-color: rgba(16, 185, 129, 0.12); }
html.dark .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.20); }
html.dark .text-emerald-700, html.dark .text-emerald-800 { color: #6ee7b7; }
html.dark .border-emerald-200 { border-color: rgba(16, 185, 129, 0.30); }

html.dark .bg-amber-50  { background-color: rgba(245, 158, 11, 0.12); }
html.dark .bg-amber-100 { background-color: rgba(245, 158, 11, 0.20); }
html.dark .text-amber-700, html.dark .text-amber-800 { color: #fcd34d; }
html.dark .border-amber-200, html.dark .border-amber-300 { border-color: rgba(245, 158, 11, 0.30); }

html.dark .bg-rose-50  { background-color: rgba(244, 63, 94, 0.12); }
html.dark .bg-rose-100 { background-color: rgba(244, 63, 94, 0.20); }
html.dark .text-rose-700, html.dark .text-rose-800, html.dark .text-rose-900 { color: #fda4af; }
html.dark .border-rose-200, html.dark .border-rose-300 { border-color: rgba(244, 63, 94, 0.30); }

html.dark .bg-indigo-50  { background-color: rgba(99, 102, 241, 0.12); }
html.dark .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.20); }
html.dark .text-indigo-700, html.dark .text-indigo-800 { color: #a5b4fc; }
html.dark .border-indigo-200 { border-color: rgba(99, 102, 241, 0.30); }

html.dark .bg-slate-50  { background-color: var(--bg-hover); }
html.dark .bg-slate-100 { background-color: var(--bg-hover); }
html.dark .bg-white     { background-color: var(--bg-surface); }
html.dark .border-slate-200 { border-color: var(--border); }
html.dark .border-gray-200  { border-color: var(--border); }
html.dark .border-gray-100  { border-color: var(--border); }
html.dark .text-gray-900    { color: var(--text); }
html.dark .text-gray-700    { color: var(--text); }
html.dark .text-gray-600    { color: var(--text-muted); }
html.dark .text-gray-500    { color: var(--text-muted); }
html.dark .text-gray-400    { color: var(--text-tertiary); }
html.dark .text-slate-900   { color: var(--text); }
html.dark .text-slate-700   { color: var(--text); }
html.dark .text-slate-500   { color: var(--text-muted); }
html.dark .text-slate-400   { color: var(--text-tertiary); }
html.dark .hover\:bg-gray-100:hover { background-color: var(--bg-hover); }
html.dark .hover\:bg-gray-50:hover  { background-color: var(--bg-hover); }
html.dark .hover\:bg-slate-50:hover { background-color: var(--bg-hover); }
html.dark .hover\:bg-slate-100:hover { background-color: var(--bg-hover); }