/* ==========================================================================
   SJF tenant theme — SJF Bank design system ("Rund & venlig")
   Ported from the standalone SJF Flask kit (sjf.css). Overrides the
   temasites.css design tokens; loaded ONLY on the sjf subdomain via the
   tenant_theme context processor. Every rule is scoped to
   body[data-tenant="sjf"] so other tenants are untouched.
   Palette: petrol #003644 · green #05584F · mint #83C5A8 · coral #F3625B
   · sand #F7F3F0. Type: Outfit (display) + Figtree (body).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap');

body[data-tenant="sjf"] {
  /* Brand roles: petrol takes the navy slot, coral takes the red/accent slot */
  --navy: #003644;
  --navy-deep: #00222c;
  --navy-soft: #05584F;
  --navy-line: #0a4a5a;
  --red: #F3625B;
  --red-soft: #DE4F48;

  /* Ink */
  --ink: #003644;
  --ink-2: #24505c;
  --muted: #6B7C82;
  --muted-2: #8fa0a5;
  --faint: #8fa0a5;

  /* Lines & surfaces — warm sand family */
  --line: #E5DED7;
  --line-soft: #F2EDE7;
  --paper: #ffffff;
  --wash: #F7F3F0;
  --wash-navy: #E3F1E9;      /* mint-light tinted fill */
  --wash-red: #FDEAE4;       /* coral-light tinted fill */
  --bm: #C9C0B6;
  --teal: #83C5A8;

  --bg: #F7F3F0;
  --workspace-bg: #F7F3F0;
  --card: #ffffff;
  --card-2: #F2EDE7;
  --border: #E5DED7;
  --border-strong: #C9C0B6;

  --accent: #F3625B;
  --accent-2: #DE4F48;
  --accent-soft: #FDEAE4;

  /* Semantic — finance up/down */
  --positive: #05584F;
  --positive-soft: #E3F1E9;
  --negative: #C2453E;
  --negative-soft: #FDEAE4;
  --warn: #B07A1E;

  /* Top bar — dark petrol (ported from .sjf-topbar) */
  --topbar-bg: #003644;
  --topbar-ink: #ffffff;
  --topbar-border: #0a4a5a;

  /* Type — Outfit (display) + Figtree (body) */
  --serif: 'Outfit', Arial, sans-serif;
  --sans: 'Figtree', Arial, sans-serif;

  /* Geometry — round & friendly: 20px cards, 14px fields, pill buttons */
  --r-card: 20px;
  --r-btn: 14px;
  --shadow-card: 0 2px 10px rgba(0, 54, 68, 0.05);
  --shadow-pop: 0 8px 24px rgba(0, 54, 68, 0.12);

  /* Chart hooks read by meridian-plotly.js at render time */
  --chart-font: 'Figtree', system-ui, sans-serif;
  --chart-grid: rgba(0, 54, 68, 0.08);
  --chart-plot-bg: rgba(0, 54, 68, 0.02);
}

/* ----- Top bar: dark petrol with coral active-underline nav ------------- */
body[data-tenant="sjf"] .ts-topbar {
  backdrop-filter: none;
  border-bottom: none;
  box-shadow: none;
}
body[data-tenant="sjf"] .ts-topbar .ts-brand { color: #fff; }
body[data-tenant="sjf"] .ts-brand-rule { background: rgba(255, 255, 255, 0.25); }
body[data-tenant="sjf"] .ts-brand-sub { color: rgba(255, 255, 255, 0.75); }
body[data-tenant="sjf"] .ts-navlink {
  color: rgba(255, 255, 255, 0.75);
  border-radius: 0;
  border-bottom: 3px solid transparent;
  padding-top: 11px;                 /* keep text optically centered */
}
body[data-tenant="sjf"] .ts-navlink:hover { background: none; color: #fff; }
body[data-tenant="sjf"] .ts-navlink.on {
  background: none; color: #fff;
  border-bottom-color: var(--red);
}
body[data-tenant="sjf"] .ts-navdrop .ts-navlink[aria-expanded="true"] {
  background: none; color: #fff;
}
body[data-tenant="sjf"] .ts-iconbtn { color: rgba(255, 255, 255, 0.75); }
body[data-tenant="sjf"] .ts-iconbtn:hover {
  background: rgba(255, 255, 255, 0.12); color: #fff;
}
body[data-tenant="sjf"] .ts-avatar { background: #83C5A8; color: #003644; }
body[data-tenant="sjf"] .ts-fund-select {
  border-color: rgba(255, 255, 255, 0.3);
  border-radius: var(--r-pill);
}

/* ----- Buttons: pills; coral is the primary CTA -------------------------- */
body[data-tenant="sjf"] .ts-btn,
body[data-tenant="sjf"] .btn.ts-btn { border-radius: var(--r-pill); }
body[data-tenant="sjf"] .ts-btn.primary,
body[data-tenant="sjf"] .btn.ts-btn.primary {
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(243, 98, 91, 0.4);
}
body[data-tenant="sjf"] .ts-btn.primary:hover {
  background: var(--accent-2); border-color: var(--accent-2);
}

/* ----- Small polish ------------------------------------------------------ */
body[data-tenant="sjf"] .ts-dropmenu,
body[data-tenant="sjf"] .dropdown-menu { border-radius: 14px; }
body[data-tenant="sjf"] .ts-tag { border-radius: var(--r-pill); }
body[data-tenant="sjf"] h1, body[data-tenant="sjf"] h2,
body[data-tenant="sjf"] h3, body[data-tenant="sjf"] h4 {
  letter-spacing: 0; font-weight: 700;
}
body[data-tenant="sjf"] .ts-pageheader .ts-ptitle { letter-spacing: 0; }

/* ----- Login (standalone template, same body attribute) ------------------ */
body[data-tenant="sjf"] .ts-login .ts-lleft {
  background: linear-gradient(155deg, #05584F 0%, #003644 78%);
}
body[data-tenant="sjf"] .ts-login .ts-lkicker { color: #83C5A8; }
body[data-tenant="sjf"] .ts-login .ts-lbio { color: #E3F1E9; }
body[data-tenant="sjf"] .ts-login .ts-lfine { color: rgba(131, 197, 168, 0.7); }
body[data-tenant="sjf"] .ts-login .ts-lbtn { border-radius: var(--r-pill); }