/* ============================================================
   VIRTUAL BUSINESS HUB — Design System tokens
   "Fintech meets sovereign trade authority"
   Deep navy + refined gold, IBM Plex (Latin / Arabic / Mono)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=IBM+Plex+Serif:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* --- Brand / ink --- */
  --ink:        #0A1E38;   /* deep navy — sidebar, headings */
  --ink-800:    #0F2A4D;
  --ink-700:    #163B66;
  --ink-600:    #1E4E82;
  --ink-500:    #2D63A0;
  --ink-tint:   #EAF0F7;   /* pale navy wash */

  /* --- Gold accent (premium / sovereign) --- */
  --gold:       #B8902F;   /* AA-safe on white for large text / fills */
  --gold-600:   #9A7826;
  --gold-bright:#D6AE54;   /* on dark surfaces */
  --gold-tint:  #F7F0DC;

  /* --- Functional / score states --- */
  --emerald:    #157F52;   /* high potential / success */
  --emerald-tint:#E4F2EA;
  --amber:      #B5781A;   /* medium / warning */
  --amber-tint: #FAF0DC;
  --red:        #B23B30;   /* low / error */
  --red-tint:   #F8E7E4;
  --blue-info:  #1E4E82;

  /* --- Neutrals (warm paper) --- */
  --bg:         #F3F1EB;   /* app background */
  --bg-2:       #ECE9E0;
  --surface:    #FFFFFF;
  --surface-2:  #FBFAF6;
  --line:       #E2DDD0;   /* warm hairline */
  --line-2:     #EEEAE0;
  --line-strong:#CFC8B7;

  /* --- Text --- */
  --text:       #142033;   /* near-ink body */
  --text-2:     #4A5568;   /* secondary slate */
  --text-3:     #7A8494;   /* muted */
  --text-on-ink:#EAF0F7;
  --text-on-ink-2:#9DB2CC;

  /* --- Type --- */
  --font-sans: 'IBM Plex Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-serif:'IBM Plex Serif', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font-ar:   'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif;

  /* --- Radius --- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* --- Spacing scale (4px base) --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px;

  /* --- Shadows --- */
  --sh-sm: 0 1px 2px rgba(10,30,56,.06), 0 1px 3px rgba(10,30,56,.05);
  --sh-md: 0 2px 6px rgba(10,30,56,.06), 0 8px 24px rgba(10,30,56,.07);
  --sh-lg: 0 8px 24px rgba(10,30,56,.10), 0 24px 60px rgba(10,30,56,.12);
  --sh-ink: 0 14px 40px rgba(10,30,56,.28);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-size:15px;
  line-height:1.5;
}
[dir="rtl"]{ font-family:var(--font-ar); }

h1,h2,h3,h4{ margin:0; color:var(--ink); font-weight:600; line-height:1.15; letter-spacing:-0.01em; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--gold-tint); }

/* --- Type helpers --- */
.serif{ font-family:var(--font-serif); }
.mono{ font-family:var(--font-mono); font-feature-settings:"tnum" 1; }
.eyebrow{
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-3);
}
.num{ font-family:var(--font-mono); font-feature-settings:"tnum" 1; letter-spacing:-0.01em; }

/* --- Scrollbar --- */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:#cfc8b7; border-radius:10px; border:2px solid var(--bg); }
*::-webkit-scrollbar-track{ background:transparent; }

/* ============================================================
   PRIMITIVE COMPONENT CLASSES
   ============================================================ */

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-sans); font-size:14px; font-weight:600;
  padding:10px 18px; border-radius:var(--r-md); border:1px solid transparent;
  transition:transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap; line-height:1;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--ink); color:#fff; }
.btn-primary:hover{ background:var(--ink-700); box-shadow:var(--sh-md); }
.btn-gold{ background:var(--gold); color:var(--ink); }
.btn-gold:hover{ background:var(--gold-600); color:#fff; box-shadow:var(--sh-md); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn-ghost:hover{ background:var(--surface); border-color:var(--ink-600); }
.btn-quiet{ background:var(--ink-tint); color:var(--ink-700); }
.btn-quiet:hover{ background:#dde7f2; }
.btn-sm{ padding:7px 13px; font-size:13px; }
.btn-lg{ padding:14px 26px; font-size:15px; }
.btn-block{ width:100%; }

/* Cards */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-sm);
}
.card-pad{ padding:var(--s6); }

/* Badges */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600; padding:4px 10px; border-radius:var(--r-pill);
  border:1px solid transparent; line-height:1.3;
}
.badge .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge-emerald{ background:var(--emerald-tint); color:var(--emerald); }
.badge-amber{ background:var(--amber-tint); color:var(--amber); }
.badge-red{ background:var(--red-tint); color:var(--red); }
.badge-navy{ background:var(--ink-tint); color:var(--ink-600); }
.badge-gold{ background:var(--gold-tint); color:var(--gold-600); }
.badge-outline{ background:var(--surface); color:var(--text-2); border-color:var(--line-strong); }

/* Verified badge */
.verified{
  display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600;
  color:var(--ink-600); background:var(--ink-tint); padding:4px 9px 4px 7px; border-radius:var(--r-pill);
}
.verified svg{ width:13px; height:13px; }

/* Inputs */
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:13px; font-weight:600; color:var(--text); }
.field .hint{ font-size:12px; color:var(--text-3); }
.input, .select, .textarea{
  font-family:var(--font-sans); font-size:14px; color:var(--text);
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-md);
  padding:11px 13px; width:100%; transition:border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, .textarea:focus{
  outline:none; border-color:var(--ink-500); box-shadow:0 0 0 3px rgba(45,99,160,.15);
}
.input::placeholder{ color:var(--text-3); }

/* Stat / KPI card */
.kpi{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px 20px; }
.kpi .kpi-label{ font-size:12.5px; color:var(--text-2); font-weight:500; }
.kpi .kpi-value{ font-family:var(--font-mono); font-size:30px; font-weight:600; color:var(--ink); letter-spacing:-0.02em; line-height:1.1; margin-top:6px; }
.kpi .kpi-delta{ font-size:12px; font-weight:600; margin-top:8px; display:inline-flex; align-items:center; gap:4px; }
.kpi .up{ color:var(--emerald); }
.kpi .down{ color:var(--red); }

/* Focus visibility (a11y) */
:focus-visible{ outline:2px solid var(--ink-500); outline-offset:2px; border-radius:4px; }

/* Section label rows */
.row{ display:flex; align-items:center; }
.between{ justify-content:space-between; }
.gap2{ gap:8px; } .gap3{ gap:12px; } .gap4{ gap:16px; } .gap6{ gap:24px; }
.wrap{ flex-wrap:wrap; }
.muted{ color:var(--text-2); }
.muted3{ color:var(--text-3); }

/* Divider */
.hr{ height:1px; background:var(--line); border:0; margin:0; }

/* Animations
   Base state = the FINAL, visible state. Entrance animations run only when
   motion is allowed, so print / PDF / reduced-motion / frozen-timeline
   captures always show fully-painted content (never opacity:0). */
@keyframes vbhFadeUp{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none; } }
@keyframes vbhFade{ from{ opacity:0;} to{ opacity:1; } }
@keyframes vbhScaleIn{ from{ opacity:0; transform:scale(.96);} to{ opacity:1; transform:none; } }
@keyframes vbhDraw{ from{ stroke-dashoffset:2000; } to{ stroke-dashoffset:0; } }
@keyframes vbhBarGrow{ from{ height:0; } }

/* base = visible */
.fade-up, .fade-in{ opacity:1; }
.vbh-draw{ stroke-dashoffset:0; }

@media (prefers-reduced-motion: no-preference){
  .fade-up{ animation:vbhFadeUp .5s cubic-bezier(.2,.7,.2,1) both; }
  .fade-in{ animation:vbhFade .4s ease both; }
  .vbh-draw{ animation:vbhDraw 1.4s cubic-bezier(.3,.7,.3,1) both; }
  .vbh-grow{ animation:vbhBarGrow .7s cubic-bezier(.2,.7,.2,1) both; }
}

/* Topbar responsiveness — collapse search on narrow viewports */
@media (max-width: 1180px){
  .vbh-search{ display:none !important; }
}
@media (max-width: 1040px){
  .vbh-persona-org{ display:none !important; }
}

/* Sidebar nav items — hover via CSS so it never desyncs from React active state */
.vbh-nav-item{ background:transparent; }
.vbh-nav-item:hover{ background:rgba(255,255,255,.05); }
.vbh-nav-item.active{ background:rgba(214,174,84,.14); }