/* ==========================================================================
   Agatha Mecano — BC overlay
   Re-skins Agatha's existing classes (.topbar, .sidebar, .nav-item, .btn*,
   .table-*, .pipeline-*, .detail-*, .kpi-grid, .finder-*) with the Business
   Central visual language defined in css/mecano-bc.css.
   Load order in index.html:
     1. app.css        (Agatha base)
     2. mecano-bc.css  (BC tokens + new components)
     3. app-bc.css     ← this file (re-skins existing classes)
   No HTML changes required. JS / 155+ onclicks untouched.
   ========================================================================== */

/* ---------- App shell ---------- */
body { background: var(--bc-app-bg) !important; color: var(--bc-text); }
.main, main.main, #main, .content { background: var(--bc-app-bg) !important; }

/* ---------- Top bar ---------- */
.topbar {
  height: var(--bc-topbar-h, 44px) !important;
  min-height: var(--bc-topbar-h, 44px) !important;
  background: var(--bc-accent) !important;
  color: var(--bc-text-on-accent) !important;
  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: none !important;
  padding: 0 var(--bc-space-4) !important;
}
.topbar *,
.topbar .page-title,
.topbar button,
.topbar svg,
.topbar .user-name,
.topbar .user-bu { color: #fff !important; }
.topbar .hamburger-btn:hover,
.topbar button:hover { background: rgba(255,255,255,0.12) !important; }
.topbar .search-wrap,
.topbar .search-input {
  background: rgba(255,255,255,0.14) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  color: #fff !important;
  border-radius: var(--bc-radius-md) !important;
  font-size: var(--bc-fs-13) !important;
}
.topbar .search-input::placeholder { color: rgba(255,255,255,0.75) !important; }
.topbar .user-avatar {
  background: rgba(255,255,255,0.20) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
}

/* ---------- Sidebar ---------- */
.sidebar {
  width: var(--bc-sidebar-w, 220px) !important;
  background: var(--bc-neutral-100) !important;
  border-right: 1px solid var(--bc-border) !important;
  box-shadow: none !important;
}
.sidebar-logo {
  border-bottom: 1px solid var(--bc-border) !important;
  padding: var(--bc-space-3) var(--bc-space-4) !important;
  background: var(--bc-panel-bg) !important;
}
.sidebar-section { padding: var(--bc-space-2) var(--bc-space-2) !important; }
.sidebar-section-label {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--bc-text-muted) !important;
  padding: var(--bc-space-2) var(--bc-space-3) var(--bc-space-1) !important;
}
.nav-item {
  border-radius: var(--bc-radius-md) !important;
  padding: 6px 10px !important;
  margin: 1px 4px !important;
  font-size: var(--bc-fs-13) !important;
  color: var(--bc-text) !important;
  transition: background 0.08s ease, color 0.08s ease !important;
}
.nav-item:hover { background: var(--bc-neutral-200) !important; }
.nav-item.active {
  background: var(--bc-accent-soft) !important;
  color: var(--bc-accent-active) !important;
  box-shadow: inset 3px 0 0 var(--bc-accent) !important;
  font-weight: 500 !important;
}
.nav-item.active .nav-icon { color: var(--bc-accent-active) !important; }
.sidebar-footer {
  border-top: 1px solid var(--bc-border) !important;
  background: var(--bc-panel-bg) !important;
  padding: var(--bc-space-3) var(--bc-space-4) !important;
}
.sidebar-user { font-size: var(--bc-fs-12) !important; color: var(--bc-text-secondary) !important; }

/* ---------- Page header ---------- */
.page-header {
  background: var(--bc-panel-bg) !important;
  border-bottom: 1px solid var(--bc-border) !important;
  padding: var(--bc-space-3) var(--bc-space-5) !important;
  box-shadow: none !important;
}
.page-title {
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--bc-text) !important;
}

/* ---------- Tables ---------- */
.table-wrap {
  background: var(--bc-panel-bg) !important;
  border: 1px solid var(--bc-border) !important;
  border-radius: var(--bc-radius-md) !important;
  box-shadow: none !important;
}
.table-toolbar {
  background: var(--bc-panel-bg) !important;
  border-bottom: 1px solid var(--bc-border) !important;
  padding: var(--bc-space-2) var(--bc-space-3) !important;
  gap: var(--bc-space-2) !important;
}
.table-wrap table { font-size: var(--bc-fs-13) !important; }
.table-wrap thead th {
  background: var(--bc-neutral-100) !important;
  color: var(--bc-text-secondary) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid var(--bc-border) !important;
}
.table-wrap tbody td {
  padding: 6px 12px !important;
  border-bottom: 1px solid var(--bc-border) !important;
  color: var(--bc-text) !important;
}
.table-wrap tbody tr:hover { background: var(--bc-neutral-100) !important; }
.td-muted { color: var(--bc-text-muted) !important; }

/* ---------- Buttons ---------- */
.btn, .btn-sm, .btn-export, .btn-login {
  border-radius: var(--bc-radius-md) !important;
  font-size: var(--bc-fs-13) !important;
  box-shadow: none !important;
  border: 1px solid var(--bc-border) !important;
  background: var(--bc-panel-bg) !important;
  color: var(--bc-text) !important;
  padding: 6px 12px !important;
  transition: background 0.08s ease, border-color 0.08s ease !important;
}
.btn:hover, .btn-sm:hover, .btn-export:hover {
  background: var(--bc-neutral-100) !important;
  border-color: var(--bc-border-strong) !important;
}
.btn-primary, .btn-indigo {
  background: var(--bc-accent) !important;
  border-color: var(--bc-accent) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-indigo:hover {
  background: var(--bc-accent-hover) !important;
  border-color: var(--bc-accent-hover) !important;
}

/* ---------- Forms ---------- */
.form-input, .search-input, .filter-select, .finder-input {
  border: 1px solid var(--bc-border) !important;
  border-radius: var(--bc-radius-md) !important;
  padding: 7px 10px !important;
  font-size: var(--bc-fs-13) !important;
  background: var(--bc-panel-bg) !important;
  color: var(--bc-text) !important;
}
.form-input:focus, .search-input:focus,
.filter-select:focus, .finder-input:focus {
  outline: none !important;
  border-color: var(--bc-accent) !important;
  box-shadow: 0 0 0 2px var(--bc-accent-soft) !important;
}
.form-label, .login-label {
  font-size: var(--bc-fs-12) !important;
  font-weight: 500 !important;
  color: var(--bc-text-secondary) !important;
}

/* ---------- Pipeline board (kanban) ---------- */
.pipeline-board { gap: var(--bc-space-3) !important; }
.pipeline-col {
  background: var(--bc-neutral-100) !important;
  border: 1px solid var(--bc-border) !important;
  border-radius: var(--bc-radius-md) !important;
  box-shadow: none !important;
}
.pipeline-col-header {
  background: var(--bc-panel-bg) !important;
  border-bottom: 1px solid var(--bc-border) !important;
  padding: var(--bc-space-2) var(--bc-space-3) !important;
  font-size: var(--bc-fs-12) !important;
  font-weight: 600 !important;
  color: var(--bc-text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}
.pipeline-cnt {
  background: var(--bc-accent-soft) !important;
  color: var(--bc-accent-active) !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  padding: 1px 8px !important;
}

/* ---------- Detail panel ---------- */
.detail-panel {
  background: var(--bc-panel-bg) !important;
  border-left: 1px solid var(--bc-border) !important;
  box-shadow: var(--bc-shadow-pop) !important;
}
.detail-header {
  background: var(--bc-panel-bg) !important;
  border-bottom: 1px solid var(--bc-border) !important;
  padding: var(--bc-space-3) var(--bc-space-4) !important;
}
.detail-footer {
  background: var(--bc-panel-bg) !important;
  border-top: 1px solid var(--bc-border) !important;
  padding: var(--bc-space-3) var(--bc-space-4) !important;
}
.detail-name { font-size: var(--bc-fs-14) !important; font-weight: 600 !important; color: var(--bc-text) !important; }
.detail-subtitle { font-size: var(--bc-fs-12) !important; color: var(--bc-text-secondary) !important; }
.detail-avatar {
  background: var(--bc-accent-soft) !important;
  color: var(--bc-accent-active) !important;
  border: 1px solid var(--bc-border) !important;
  border-radius: var(--bc-radius-md) !important;
}

/* ---------- Modal ---------- */
.modal-overlay { background: rgba(0,0,0,0.32) !important; backdrop-filter: blur(2px); }
.modal-box {
  background: var(--bc-panel-bg) !important;
  border: 1px solid var(--bc-border) !important;
  border-radius: var(--bc-radius-lg) !important;
  box-shadow: var(--bc-shadow-pop) !important;
}
.modal-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--bc-text) !important;
}
.modal-footer {
  border-top: 1px solid var(--bc-border) !important;
  background: var(--bc-panel-bg) !important;
  padding: var(--bc-space-3) var(--bc-space-4) !important;
}

/* ---------- KPI grid ---------- */
.kpi-grid { gap: var(--bc-space-3) !important; }

/* ---------- Finder (autopilot-like) ---------- */
.finder-wrap {
  background: var(--bc-panel-bg) !important;
  border: 1px solid var(--bc-border) !important;
  border-radius: var(--bc-radius-md) !important;
  box-shadow: none !important;
  padding: var(--bc-space-4) !important;
}
.finder-greeting {
  font-size: var(--bc-fs-14) !important;
  color: var(--bc-text-secondary) !important;
}
.finder-chip, .wizard-chip {
  background: var(--bc-neutral-100) !important;
  border: 1px solid var(--bc-border) !important;
  border-radius: 999px !important;
  font-size: var(--bc-fs-12) !important;
  padding: 4px 10px !important;
  color: var(--bc-text) !important;
}
.finder-chip:hover { background: var(--bc-accent-soft) !important; border-color: var(--bc-accent) !important; color: var(--bc-accent-active) !important; }
.finder-send {
  background: var(--bc-accent) !important;
  border: 1px solid var(--bc-accent) !important;
  color: #fff !important;
  border-radius: var(--bc-radius-md) !important;
}
.finder-send:hover { background: var(--bc-accent-hover) !important; border-color: var(--bc-accent-hover) !important; }

/* ---------- Command palette ---------- */
.cmd-overlay { background: rgba(0,0,0,0.32) !important; }
.cmd-box {
  background: var(--bc-panel-bg) !important;
  border: 1px solid var(--bc-border) !important;
  border-radius: var(--bc-radius-lg) !important;
  box-shadow: var(--bc-shadow-pop) !important;
}
.cmd-input-wrap { border-bottom: 1px solid var(--bc-border) !important; }
.cmd-input {
  background: transparent !important;
  color: var(--bc-text) !important;
  font-size: var(--bc-fs-14) !important;
}
.cmd-kbd {
  background: var(--bc-neutral-100) !important;
  border: 1px solid var(--bc-border) !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  color: var(--bc-text-secondary) !important;
}

/* ---------- Pagination ---------- */
.pagination { gap: var(--bc-space-1) !important; }
.pg-btn {
  background: var(--bc-panel-bg) !important;
  border: 1px solid var(--bc-border) !important;
  border-radius: var(--bc-radius-sm) !important;
  color: var(--bc-text) !important;
  font-size: var(--bc-fs-12) !important;
  padding: 4px 10px !important;
}
.pg-btn:hover { background: var(--bc-neutral-100) !important; }
.pg-btn.active {
  background: var(--bc-accent) !important;
  border-color: var(--bc-accent) !important;
  color: #fff !important;
}
.pagination-info { color: var(--bc-text-muted) !important; font-size: var(--bc-fs-12) !important; }

/* ---------- Credits / bulk / toasts ---------- */
.credits-bar {
  background: var(--bc-panel-bg) !important;
  border: 1px solid var(--bc-border) !important;
  border-radius: var(--bc-radius-md) !important;
}
.credits-fill { background: var(--bc-accent) !important; }
.credits-warn-badge { background: var(--bc-warn-soft) !important; color: var(--bc-warn-text, #8a5a00) !important; border: 1px solid var(--bc-warn) !important; }
.bulk-bar {
  background: var(--bc-accent-soft) !important;
  border: 1px solid var(--bc-accent) !important;
  color: var(--bc-accent-active) !important;
  border-radius: var(--bc-radius-md) !important;
}

/* ---------- Login ---------- */
.login-overlay { background: var(--bc-app-bg) !important; }
.login-box {
  background: var(--bc-panel-bg) !important;
  border: 1px solid var(--bc-border) !important;
  border-radius: var(--bc-radius-lg) !important;
  box-shadow: var(--bc-shadow-pop) !important;
}
.login-input {
  border: 1px solid var(--bc-border) !important;
  border-radius: var(--bc-radius-md) !important;
  font-size: var(--bc-fs-13) !important;
}

/* ---------- Scrollbars (Fluent-style) ---------- */
.main ::-webkit-scrollbar,
.sidebar ::-webkit-scrollbar,
.table-wrap ::-webkit-scrollbar { width: 10px; height: 10px; }
.main ::-webkit-scrollbar-thumb,
.sidebar ::-webkit-scrollbar-thumb,
.table-wrap ::-webkit-scrollbar-thumb {
  background: var(--bc-neutral-300);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.main ::-webkit-scrollbar-thumb:hover,
.sidebar ::-webkit-scrollbar-thumb:hover,
.table-wrap ::-webkit-scrollbar-thumb:hover { background: var(--bc-neutral-400); background-clip: padding-box; border: 2px solid transparent; }