/*
 * BDI shared components.
 *
 * Written to override the original stylesheets rather than replace them, so
 * working markup keeps working. Everything reads from tokens.css.
 *
 * Loaded last.
 */

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-primary);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Typography ---------- */

h1, .page-title { font-size: var(--text-page); font-weight: var(--weight-semi); letter-spacing: -0.011em; line-height: var(--leading-tight); color: var(--text-primary); margin: 0; }
h2 { font-size: var(--text-section); font-weight: var(--weight-semi); letter-spacing: -0.005em; color: var(--text-primary); }
h3 { font-size: var(--text-card); font-weight: var(--weight-semi); color: var(--text-primary); }

/* Metadata recedes. Hierarchy comes from weight and colour before boxes. */
.doc-sub, .tw-sub, .tw-meta, small { color: var(--text-secondary); font-size: var(--text-meta); }

/* Precision where precision matters. */
.num, .kpi-value, td.num, .tw-score, .money {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ---------- Buttons ---------- */

.primary-btn, .secondary-btn, .link-btn, .danger-btn {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent;
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease);
  cursor: pointer;
  line-height: 1.4;
}

.primary-btn {
  background: var(--cta-primary-bg);
  color: var(--cta-primary-text);
  border-color: var(--cta-primary-bg);
  box-shadow: none;
}
.primary-btn:hover { background: var(--cta-primary-hover); border-color: var(--cta-primary-hover); }

.secondary-btn {
  background: var(--cta-secondary-bg);
  color: var(--cta-secondary-text);
  border-color: var(--border-strong);
}
.secondary-btn:hover { background: var(--bg-hover); border-color: var(--vault-navy); }

.link-btn {
  background: transparent;
  color: var(--cta-ghost-text);
  border-color: transparent;
  padding: var(--space-1) var(--space-2);
}
.link-btn:hover { color: var(--text-primary); background: var(--bg-hover); }

.danger-btn { background: transparent; color: var(--cta-destructive); border-color: var(--cta-destructive); }
.danger-btn:hover { background: var(--status-risk-bg); }

/* ---------- Inputs ---------- */

.input, input[type='text'], input[type='search'], input[type='number'], input[type='password'], select, textarea {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.input:focus, input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(11, 19, 43, 0.08);
}

.form-field > span, label { font-size: var(--text-label); font-weight: var(--weight-medium); color: var(--text-secondary); }

/* ---------- Cards ---------- */

.card, .bdi-insight-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}

/* ---------- Tables ---------- */

table.reg { width: 100%; border-collapse: collapse; font-size: var(--text-table); }

table.reg thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-surface);
  text-align: left;
  font-size: var(--text-meta);
  font-weight: var(--weight-semi);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-strong);
}

table.reg td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}

table.reg tbody tr { transition: background var(--duration) var(--ease); }
table.reg tbody tr:hover { background: var(--bg-hover); }

/* ---------- Status ---------- */

.tw-status, .status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-meta);
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  background: var(--status-draft-bg);
  color: var(--status-draft-text);
  white-space: nowrap;
}
.tw-status-new { background: var(--status-pending-bg); color: var(--status-pending-text); }
.tw-status-reviewing, .tw-status-preparing { background: var(--status-urgent-bg); color: var(--status-urgent-text); }
.tw-status-submitted { background: var(--status-active-bg); color: var(--status-active-text); }
.tw-status-kept-for-intelligence { background: var(--status-draft-bg); color: var(--status-draft-text); }

/* ---------- Navigation ---------- */

.nav-item {
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  border-radius: var(--radius);
  border-left: 3px solid transparent;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.nav-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.nav-item.active {
  background: var(--bg-selected);
  color: var(--text-primary);
  font-weight: var(--weight-semi);
  border-left-color: var(--corevex-accent);
}

/* ---------- Filter chips ---------- */

.tw-chip {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius);
  font-size: var(--text-meta);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-default);
}
.tw-chip:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-strong); }
.tw-chip.is-on {
  background: var(--vault-navy);
  border-color: var(--vault-navy);
  color: var(--text-inverse);
}

/* ---------- Deadlines: colour only where it changes a decision ---------- */

.tw-deadline-label { font-size: var(--text-meta); font-weight: var(--weight-medium); color: var(--text-secondary); }
.tw-deadline-date  { font-family: var(--font-mono); font-size: var(--text-meta); color: var(--text-secondary); }
.tw-deadline-days  { font-size: var(--text-meta); font-weight: var(--weight-semi); color: var(--text-secondary); }
.tw-soon .tw-deadline-days, .tw-soon .tw-deadline-label { color: var(--status-urgent-text); }
.tw-gone .tw-deadline-days, .tw-gone .tw-deadline-date, .tw-gone .tw-deadline-label { color: var(--text-muted); }
.tw-ok .tw-deadline-days { color: var(--text-secondary); }

.tw-count strong { font-family: var(--font-mono); font-weight: var(--weight-semi); }
.tw-count-urgent strong { color: var(--status-urgent-text); }

/* ---------- Empty states ---------- */

.tw-empty {
  padding: var(--space-12) var(--space-4);
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--text-body);
}

/* ---------- The one place silver is allowed to behave like metal ---------- */

.bsel-card-head { position: relative; }
.bsel-card-head::after {
  content: '';
  position: absolute;
  left: var(--space-6); right: var(--space-6); bottom: 0;
  height: 1px;
  background: var(--silver-rule);
}
/* ---------- Icons ---------- */

/*
 * One family, one size, currentColor. The icon inherits the text colour of
 * whatever it sits in, so active and hover states need no icon-specific rules.
 */
.nav-icon {
  width: var(--icon);
  height: var(--icon);
  flex: 0 0 auto;
  vertical-align: -2px;
  margin-right: var(--space-2);
  opacity: 0.75;
  transition: opacity var(--duration) var(--ease);
}
.nav-item:hover .nav-icon,
.nav-item.active .nav-icon { opacity: 1; }

.nav-item { display: flex; align-items: center; }

/* ---------- Brand lockup ---------- */

/*
 * The logo is an approved asset and carries the identity on its own. The
 * interface beside it stays quiet: no duplicate wordmark competing with it.
 */
/* ---------- KPI ---------- */

/*
 * Executive figures read as data, not as decoration: monospace for alignment,
 * navy for the number, slate for the label. No card per metric.
 */
.metric-card .metric-value,
.kpi-value {
  font-family: var(--font-mono);
  font-size: var(--text-kpi);
  font-weight: var(--weight-semi);
  letter-spacing: -0.02em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.metric-card .metric-label,
.kpi-label {
  font-size: var(--text-meta);
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
/* ---------- Header lockup ---------- */

/*
 * The logo is the wordmark. It already says CoreVex, BDI, Business Development
 * Intelligence and OSS Africa, so repeating any of that beside it is noise.
 * The mark gets the whole block and nothing competes with it.
 */
.bdi-wordmark {
  display: flex;
  align-items: center;
  min-width: 0;
  padding-right: var(--space-4);
}



/* No stray text in the lockup. */
.bdi-wordmark span,
.bdi-nav-brand__title { display: none; }

@media (max-width: 900px) {
  
}

.auth-logo, .auth-panel__brand img[src*='bdi-logo'] { max-height: 64px; max-width: 320px; width: auto; height: auto; }
/* ---------- Brand placement ---------- */

/*
 * The lockup is wide - roughly 2.6 to 1 - so it belongs where width is
 * available. The sidebar card gives it that; a header bar does not, and
 * shrinking it there made the strapline unreadable.
 */
.bdi-nav-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
}

.bdi-nav-brand__logo {
  width: 100%;
  max-width: 200px;
  height: auto;
  display: block;
}

/*
 * The header shows only the icon: the logo's left-hand mark. Cropping to it
 * with object-position keeps one asset rather than maintaining a second file.
 */


@media (max-width: 900px) {
  .bdi-nav-brand__logo { max-width: 170px; }
}
/* Header icon: the mark only, cropped from the single approved asset. */
/*
 * The header carries no mark. The sidebar lockup already establishes the
 * brand, and a cropped fragment of a wide logo reads as a mistake rather than
 * as an icon. The header's job is the page title.
 */
.bdi-wordmark { display: none; }
.bdi-wordmark__mark { display: none; }