/*
 * Copyright (c) 2019-2026 LivePnL B.V.
 * All rights reserved.
 */

/*
 * Brand theme layer — retunes stock Bootstrap to the design tokens used on
 * the public site (livepnl.com / livepnl.css): brand teal, ink/paper
 * palette and system sans-serif type. Loaded after bootstrap.min.css so
 * these overrides win the cascade without touching Bootstrap's own file.
 */

:root {
  --brand: #00524a;
  --brand-700: #013f39;
  --brand-500: #037f76;
  --brand-100: #e6f2f0;
  --ink: #0d2320;
  --ink-40: #869a97;
  --ink-60: #55706c;
  --line: #e2ebe9;
  --paper-alt: #f5f8f7;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --bs-primary: var(--brand-500);
  --bs-primary-rgb: 3, 127, 118;
  /* dark navy from the livepnl.com site header — drives the navbar and the
     dark cover pages (login, 404, privacy, verification) */
  --bs-dark: #0f1b2a;
  --bs-dark-rgb: 15, 27, 42;
  --bs-link-color: var(--brand-500);
  --bs-link-color-rgb: 3, 127, 118;
  --bs-link-hover-color: var(--brand-700);
  --bs-link-hover-color-rgb: 1, 63, 57;
  --bs-body-font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --bs-font-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

a:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}

/* ---------- as-of timestamp: the marketing site's live badge ---------- */
#asof {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--brand-100);
  color: var(--brand-500);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 99px;
}
#asof::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-500);
  flex-shrink: 0;
  animation: asof-pulse 2s ease-in-out infinite;
}
@keyframes asof-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  #asof::before {
    animation: none;
  }
}

/* ---------- LivePnL attribution footer ---------- */
/* Dark navy band bookending the page like the marketing site's footer;
   markup injected by dashboard.js. Logo accent matches the marketing
   green used on dark surfaces. */
/* Pin the footer to the viewport bottom while a page is still empty or
   loading; on long pages it follows the content with a guaranteed gap. */
body:has(> .brand-footer) {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body:has(> .brand-footer) > .container-fluid {
  margin-bottom: 48px;
}
.brand-footer {
  background: var(--bs-dark);
  color: rgba(255, 255, 255, 0.75);
  margin-top: auto;
  padding: 40px 24px;
}
.brand-footer-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.brand-footer-logo {
  display: inline-block;
  color: #fff;
  --logo-accent: #19c37d;
}
.brand-footer-logo svg {
  height: 34px;
  width: auto;
  display: block;
}
.brand-footer-tagline {
  margin: 12px 0 0;
  max-width: 60ch;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.55);
}
.brand-footer-legal {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.82rem;
}

/* ---------- tables: the marketing site's stat-rail language ---------- */
/* Column headers read as the public site's stat labels (small mono caps),
   figures align with tabular numerals, hover is a soft paper wash. */
.table {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  --bs-table-hover-bg: var(--paper-alt);
  --bs-table-hover-color: var(--ink);
}
.table > :not(caption) > * > * {
  padding: 0.35rem 0.6rem;
}
/* Real theads and the generated in-body header rows (headerRowToHTML) alike */
.table thead th,
.table .table-header-row th {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-40);
  border-bottom: 1px solid var(--line);
  vertical-align: bottom;
}

/* ---------- chart cards ---------- */
/* Wrapper injected by chartRender(); mirrors the marketing site's chart-card */
.chart-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 16px 16px 8px;
  margin: 8px 0 12px;
}

/* Bootstrap's default primary blue, unaffected by the :root retint above.
   For elements whose color carries value semantics alongside danger/warning/
   success (e.g. the top NPS tier in npsToHTML) rather than brand identity. */
.bg-primary-default {
  background-color: #0d6efd !important;
}

/* ---------- navbar: match the livepnl.com site header (dark navy) ---------- */
/* The live marketing site's header is dark navy, not the light paper header
   from the livepnl-public repo styles. Sampled approximation — if the exact
   brand navy differs, correct it here (and in --bs-dark-rgb / the cover-page
   theme-color metas) in one sweep. White customer logos stay visible on it. */
#topNavBar .nav-link,
#topNavBar .navbar-text {
  font-size: 0.94rem;
  font-weight: 500;
}

/* Dropdown menus: Bootstrap compiles its own active-link blue into
   .dropdown-menu, so the :root primary retint never reaches it */
.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--brand-500);
  --bs-dropdown-link-active-color: #fff;
}

/* Buttons sitting on the dark navy navbar need a light treatment */
.navbar-dark .btn-outline-secondary {
  --bs-btn-color: rgba(255, 255, 255, 0.85);
  --bs-btn-border-color: rgba(255, 255, 255, 0.35);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.12);
  --bs-btn-hover-border-color: rgba(255, 255, 255, 0.5);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgba(255, 255, 255, 0.12);
  --bs-btn-active-border-color: rgba(255, 255, 255, 0.5);
}

/* ---------- buttons ---------- */
.btn-primary {
  --bs-btn-bg: var(--brand-500);
  --bs-btn-border-color: var(--brand-500);
  --bs-btn-hover-bg: var(--brand-700);
  --bs-btn-hover-border-color: var(--brand-700);
  --bs-btn-active-bg: var(--brand-700);
  --bs-btn-active-border-color: var(--brand-700);
  --bs-btn-disabled-bg: var(--brand-500);
  --bs-btn-disabled-border-color: var(--brand-500);
  --bs-btn-focus-shadow-rgb: 3, 127, 118;
}

.btn-outline-primary {
  --bs-btn-color: var(--brand-500);
  --bs-btn-border-color: var(--brand-500);
  --bs-btn-hover-bg: var(--brand-500);
  --bs-btn-hover-border-color: var(--brand-500);
  --bs-btn-active-bg: var(--brand-500);
  --bs-btn-active-border-color: var(--brand-500);
  --bs-btn-disabled-color: var(--brand-500);
  --bs-btn-disabled-border-color: var(--brand-500);
  --bs-btn-focus-shadow-rgb: 3, 127, 118;
}

/* Neutral toolbar buttons (toggles, dropdowns) on light backgrounds */
.btn-outline-secondary {
  --bs-btn-color: var(--ink-60);
  --bs-btn-border-color: var(--line);
  --bs-btn-hover-color: var(--brand-700);
  --bs-btn-hover-bg: var(--brand-100);
  --bs-btn-hover-border-color: var(--brand-500);
  --bs-btn-active-color: var(--brand-700);
  --bs-btn-active-bg: var(--brand-100);
  --bs-btn-active-border-color: var(--brand-500);
  --bs-btn-focus-shadow-rgb: 3, 127, 118;
}