/* Branch — design system ported from psfw-api-router console.
   Layered on Bootstrap 5.3 via --bs-* variable overrides so existing
   Bootstrap-classed templates inherit the look without markup rewrites.
   Theme is driven by [data-bs-theme] (our existing toggle). Dark is default. */

:root,
[data-bs-theme="dark"] {
  --bg: #16181c;
  --bg-1: #1a1d22;
  --bg-2: #1f2127;
  --bg-3: #262a30;
  --bg-hover: #23262c;
  --bg-active: #2c3038;
  --border: rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.13);
  --fg: #e7e8ea;
  --fg-1: #b8bcc4;
  --fg-2: #8a8f99;
  --fg-3: #5e636d;
  /* Brand accent — OKLCH(0.55 0.16 245) ≈ #0077c7 (secondary · branch) */
  --accent: oklch(0.55 0.16 245);
  --accent-fg: #ffffff;
  --accent-soft: rgba(0,119,199,0.14);
  --accent-border: rgba(0,119,199,0.38);
  --success: #4ade80;
  --warn: #fbbf24;
  --danger: #f87171;
  --violet: #c084fc;
  --chart-a: #0077c7;
  --chart-b: #4ade80;
  --chart-c: #c084fc;
  --chart-d: #fbbf24;

  --font-sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 12px;
  --sidebar-w: 232px;

  /* Bootstrap bridge */
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--fg);
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: 14px;
  --bs-emphasis-color: var(--fg);
  --bs-secondary-color: var(--fg-2);
  --bs-tertiary-color: var(--fg-3);
  --bs-border-color: var(--border);
  --bs-border-color-translucent: var(--border);
  --bs-border-radius: var(--radius);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-link-color: var(--accent);
  --bs-link-hover-color: var(--accent);
  --bs-primary: var(--accent);
  --bs-primary-rgb: 0,119,199;
  --bs-secondary-bg: var(--bg-2);
  --bs-tertiary-bg: var(--bg);
  --bs-card-bg: var(--bg-1);
  --bs-card-border-color: var(--border);
  --bs-card-cap-bg: transparent;
  --bs-dropdown-bg: var(--bg-1);
  --bs-dropdown-border-color: var(--border-strong);
  --bs-dropdown-color: var(--fg-1);
  --bs-dropdown-link-color: var(--fg-1);
  --bs-dropdown-link-hover-color: var(--fg);
  --bs-dropdown-link-hover-bg: var(--bg-2);
  --bs-dropdown-link-active-bg: var(--accent-soft);
  --bs-dropdown-link-active-color: var(--fg);
  --bs-table-bg: transparent;
  --bs-table-color: var(--fg);
  --bs-table-border-color: var(--border);
  --bs-emphasis-color-rgb: 231,232,234;
}

[data-bs-theme="light"] {
  --bg: #fafaf7;
  --bg-1: #ffffff;
  --bg-2: #f4f3ee;
  --bg-3: #eceae3;
  --bg-hover: #f0efe8;
  --bg-active: #e8e6dd;
  --border: rgba(20,20,20,0.08);
  --border-strong: rgba(20,20,20,0.14);
  --fg: #1a1a1a;
  --fg-1: #3a3a3a;
  --fg-2: #6b6b6b;
  --fg-3: #9a9a9a;
  --accent-soft: rgba(0,119,199,0.10);
  --accent-border: rgba(0,119,199,0.42);
}

* { box-sizing: border-box; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  font-feature-settings: "ss01","cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[x-cloak] { display: none !important; }
.mono { font-family: var(--font-mono); font-feature-settings: "zero","ss02"; }
.numeric, .tabular { font-variant-numeric: tabular-nums; font-family: var(--font-mono); }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent); text-decoration: underline; }
.text-muted { color: var(--fg-2) !important; }

/* ---- Bootstrap component bridges ---- */

.card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  padding: 14px 18px;
}
.card-body { padding: 18px; }

/* Form controls → bg-1 surface with accent focus ring */
.form-control, .form-select {
  background-color: var(--bg-1);
  border: 1px solid var(--border);
  color: var(--fg);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.form-control:hover, .form-select:hover { border-color: var(--border-strong); }
.form-control:focus, .form-select:focus {
  background-color: var(--bg-1);
  border-color: var(--accent);
  color: var(--fg);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-control::placeholder { color: var(--fg-3); }
.form-label { font-size: 12px; font-weight: 500; color: var(--fg-1); margin-bottom: 5px; }
.form-text { color: var(--fg-2); font-size: 12px; }
.form-check-input { background-color: var(--bg-1); border-color: var(--border-strong); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }

/* Buttons: keep Bootstrap variants, just tune shape/weight + primary uses accent */
.btn { font-weight: 500; font-size: 13px; border-radius: var(--radius-sm); }
.btn-primary {
  --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent); --bs-btn-hover-border-color: var(--accent);
  --bs-btn-active-bg: var(--accent); --bs-btn-active-border-color: var(--accent);
  --bs-btn-color: var(--accent-fg); --bs-btn-hover-color: var(--accent-fg);
  filter: none;
}
.btn-primary:hover { filter: brightness(0.93); }
.btn-outline-primary {
  --bs-btn-color: var(--accent); --bs-btn-border-color: var(--accent-border);
  --bs-btn-hover-bg: var(--accent-soft); --bs-btn-hover-border-color: var(--accent);
  --bs-btn-hover-color: var(--accent); --bs-btn-active-bg: var(--accent);
  --bs-btn-active-border-color: var(--accent); --bs-btn-active-color: var(--accent-fg);
}
.btn-outline-secondary {
  --bs-btn-color: var(--fg-1); --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-bg: var(--bg-2); --bs-btn-hover-border-color: var(--border-strong);
  --bs-btn-hover-color: var(--fg); --bs-btn-active-bg: var(--bg-3); --bs-btn-active-color: var(--fg);
}
.btn-success {
  --bs-btn-bg: var(--success); --bs-btn-border-color: var(--success); --bs-btn-color: #08130c;
  --bs-btn-hover-bg: var(--success); --bs-btn-hover-border-color: var(--success); --bs-btn-hover-color: #08130c;
}
.btn-outline-danger {
  --bs-btn-color: var(--danger); --bs-btn-border-color: rgba(248,113,113,0.4);
  --bs-btn-hover-bg: rgba(248,113,113,0.12); --bs-btn-hover-color: var(--danger);
  --bs-btn-hover-border-color: var(--danger);
}
.btn-light { --bs-btn-bg: var(--bg-2); --bs-btn-border-color: var(--border-strong); --bs-btn-color: var(--fg); }

/* Tables */
.table { color: var(--fg); border-color: var(--border); margin-bottom: 0; }
.table > :not(caption) > * > * { background: transparent; color: var(--fg); border-bottom-color: var(--border); padding: 12px; }
.table-soft th, .table thead th {
  font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--fg-3); border-bottom: 1px solid var(--border); background: transparent; padding: 8px 12px;
}
.table tbody tr:hover > * { background: var(--bg-1); }
.table tbody tr:last-child > * { border-bottom: 0; }

/* Dropdowns */
.dropdown-menu { box-shadow: 0 12px 32px rgba(0,0,0,0.45); border-radius: var(--radius); }
.dropdown-header { color: var(--fg-3); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; }

/* Alerts (Django messages) — soft tinted */
.alert { border-radius: var(--radius); border: 1px solid var(--border); }
.alert-info { background: var(--accent-soft); border-color: var(--accent-border); color: var(--fg); }
.alert-success { background: rgba(74,222,128,0.10); border-color: rgba(74,222,128,0.25); color: var(--fg); }
.alert-warning { background: rgba(251,191,36,0.10); border-color: rgba(251,191,36,0.30); color: var(--fg); }
.alert-danger, .alert-error { background: rgba(248,113,113,0.10); border-color: rgba(248,113,113,0.30); color: var(--fg); }
.alert-secondary { background: var(--bg-2); color: var(--fg-1); }

code { color: var(--violet); background: var(--bg-2); padding: 1px 5px; border-radius: 4px; font-family: var(--font-mono); font-size: 12px; }
pre { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; color: var(--fg-1); }
hr, .dropdown-divider { border-color: var(--border); }

/* ---- App shell (ported layout: topbar cell + sticky sidebar + centered page) ---- */
.brand-mark {
  width: 24px; height: 24px; border-radius: 6px;
  background: linear-gradient(135deg, var(--accent), #8b5cf6);
  display: inline-grid; place-items: center; color: #fff;
  font-family: var(--font-mono); font-weight: 700; font-size: 13px; flex-shrink: 0;
}

.topbar {
  position: sticky; top: 0; z-index: 1030;
  height: 52px; display: flex; align-items: stretch;
  background: var(--bg); border-bottom: 1px solid var(--border);
}
.topbar-brand {
  width: var(--sidebar-w); flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px; border-right: 1px solid var(--border);
  font-weight: 600; letter-spacing: -0.01em; color: var(--fg); text-decoration: none;
}
.topbar-brand:hover { color: var(--fg); text-decoration: none; }
.topbar-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 0 16px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.topbar-search { position: relative; flex: 1; max-width: 460px; }
.topbar-search > .bi-search { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--fg-3); font-size: 13px; pointer-events: none; }
.topbar-search input { height: 32px; padding-left: 32px; padding-right: 44px; }

.user-avatar {
  width: 28px; height: 28px; border-radius: 999px; flex-shrink: 0;
  background: linear-gradient(135deg, #c084fc, var(--accent));
  display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 600;
}

.shell { display: flex; align-items: flex-start; }
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  position: sticky; top: 52px; height: calc(100vh - 52px); overflow-y: auto;
  border-right: 1px solid var(--border); background: var(--bg);
}
.main { flex: 1; min-width: 0; }
.page { max-width: 1100px; margin: 0 auto; padding: 32px 40px 72px; }

/* Page header (title + subtitle + actions, bottom border) */
.page-header {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--border);
}
.page-title { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 4px; line-height: 1.15; }
.page-subtitle { color: var(--fg-2); font-size: 13.5px; margin: 0; }
.page-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

/* Sidebar nav */
.sidebar-section { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); font-weight: 500; }
aside .nav-link {
  color: var(--fg-1); font-size: 13px; min-height: 34px; border-radius: var(--radius-sm); margin: 1px 8px;
  display: flex; align-items: center; gap: 10px; padding: 6px 10px;
}
aside .nav-link:hover { background: var(--bg-1); color: var(--fg); }
aside .nav-link.nav-active {
  background: var(--accent-soft); color: var(--fg);
  border-left: 2px solid var(--accent); padding-left: 8px;
}
aside .nav-link.nav-active i { color: var(--accent); }
aside .nav-link i { width: 16px; text-align: center; opacity: 0.85; }

#theme-toggle { color: var(--fg-2); border-color: var(--border) !important; }
#theme-toggle:hover { color: var(--fg); background: var(--bg-2); }

@media (max-width: 768px) {
  .sidebar { display: none; }
  .topbar-brand { width: auto; border-right: 0; }
  .page { padding: 20px 16px 48px; }
  .topbar-search { max-width: none; }
}

/* ---- Stat cards (KPI) ---- */
.stat-card {
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; height: 100%;
}
.stat-card .stat-icon { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.stat-card .stat-value, .stat-value { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat-card .stat-label, .stat-label { font-size: 11px; color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; }
.display-5, .display-6 { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* ---- Status badges (soft semantic) ---- */
.badge-status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; font-size: 11px; font-weight: 500; border-radius: 999px;
  border: 1px solid transparent; line-height: 1.6;
}
.badge-status.submitted { color: var(--warn); background: rgba(251,191,36,0.12); border-color: rgba(251,191,36,0.28); }
.badge-status.in_review { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-border); }
.badge-status.invoices_attached { color: var(--violet); background: rgba(192,132,252,0.12); border-color: rgba(192,132,252,0.28); }
.badge-status.priced { color: var(--violet); background: rgba(192,132,252,0.12); border-color: rgba(192,132,252,0.28); }
.badge-status.issued { color: var(--warn); background: rgba(251,191,36,0.12); border-color: rgba(251,191,36,0.28); }
.badge-status.paid, .badge-status.posted, .badge-status.completed { color: var(--success); background: rgba(74,222,128,0.12); border-color: rgba(74,222,128,0.28); }
.badge-status.cancelled, .badge-status.error, .badge-status.failed { color: var(--danger); background: rgba(248,113,113,0.12); border-color: rgba(248,113,113,0.28); }
.badge-status.new { color: var(--fg-1); background: var(--bg-2); border-color: var(--border); }
.badge-status.parsed, .badge-status.pending { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-border); }

/* ---- Global search dropdown ---- */
.search-dropdown {
  position: absolute; top: 110%; left: 0; right: 0;
  background: var(--bg-1); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  z-index: 1050; display: none; max-height: 420px; overflow-y: auto; padding: 4px 0;
}
.search-dropdown.show { display: block; }
.search-group-title { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-3); padding: 8px 14px 2px; font-weight: 600; }
.search-item { display: block; padding: 7px 14px; color: var(--fg); text-decoration: none; font-size: 13px; }
.search-item:hover { background: var(--bg-2); text-decoration: none; }

/* ---- Activity feed dots ---- */
.activity-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.bg-purple { background-color: var(--violet) !important; }

/* ---- View-as banner ---- */
.view-as-banner {
  background: linear-gradient(135deg, var(--accent), #8b5cf6);
  color: #fff; position: sticky; top: 0; z-index: 1040; font-size: 14px;
}
.view-as-banner a, .view-as-banner strong { color: #fff; }

/* breakdown table (PDF-ish summary on request detail) */
.breakdown { background: var(--bg-2); padding: 12px; border-radius: var(--radius-sm); }
.breakdown .total { font-weight: 600; border-top: 1px solid var(--border); padding-top: 6px; margin-top: 6px; }

/* ---- Search kbd hint ---- */
.search-kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-3);
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 4px;
  padding: 1px 6px; pointer-events: none;
}

/* ---- Drag & drop upload ---- */
.dropzone {
  display: block; width: 100%; cursor: pointer;
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius);
  background: var(--bg); padding: 36px 20px; text-align: center;
  transition: border-color .15s, background .15s;
}
.dropzone:hover { border-color: var(--accent-border); background: var(--bg-1); }
.dropzone-over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone-inner { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dropzone-icon { font-size: 34px; color: var(--fg-3); }
.dropzone-title { font-weight: 600; font-size: 14px; word-break: break-all; }
.dropzone-sub { font-size: 12px; color: var(--fg-2); }

/* ---- Kanban board ---- */
.kanban {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(248px, 1fr);
  gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start;
}
.kanban-col {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); display: flex; flex-direction: column; min-height: 120px;
}
.kanban-col-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--fg-2); position: sticky; top: 0; background: var(--bg);
}
.kanban-count {
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-3);
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 999px; padding: 0 7px;
}
.kanban-col-body { display: flex; flex-direction: column; gap: 8px; padding: 8px; }
.kanban-empty { color: var(--fg-3); font-size: 12px; text-align: center; padding: 12px 0; }
.kanban-card {
  display: block; background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px; text-decoration: none; color: var(--fg);
  transition: border-color .12s, transform .06s;
}
.kanban-card:hover { border-color: var(--border-strong); text-decoration: none; }
.kanban-card:active { transform: scale(0.99); }
.kanban-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.kanban-card-id { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }
.kanban-card-title { font-size: 13px; font-weight: 500; margin-bottom: 8px; line-height: 1.35; }
.kanban-card-meta { font-size: 12px; color: var(--fg-2); margin-bottom: 8px; }
.kanban-card-foot { display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.kanban-card-foot .numeric { font-weight: 600; }

/* ---- Segmented control (kanban/table toggle) ---- */
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px; background: var(--bg-1); }
.seg button { height: 28px; padding: 0 12px; border: 0; background: transparent; color: var(--fg-2); font-size: 12px; font-weight: 500; border-radius: 4px; }
.seg button.active { background: var(--bg-3); color: var(--fg); }

/* ---- Auth (login/register) ---- */
.auth-wrap {
  min-height: calc(100vh - 130px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; padding: 24px 16px;
}
.auth-card {
  width: 100%; max-width: 400px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 28px 26px;
}
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.auth-brand-name { font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
.auth-brand-sub { font-size: 12px; color: var(--fg-2); }
.auth-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 4px; }
.auth-subtitle { font-size: 13px; color: var(--fg-2); margin: 0 0 20px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-field { display: flex; flex-direction: column; }
.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--fg-3); font-size: 12px; margin: 16px 0; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.auth-foot { font-size: 12px; text-align: center; max-width: 380px; }

/* scrollbars */
.main::-webkit-scrollbar, aside::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 999px; border: 3px solid var(--bg); }