/* ============================================================
   Edge Capital — Advisory System prototype
   Design tokens + app shell + shared component styles
   ============================================================ */
:root{
  /* brand */
  --blue:#1A4C9C;          /* primary */
  --blue-700:#143C7D;      /* hover */
  --blue-deep:#0E2B5C;     /* sidebar / dark surfaces */
  --blue-ink:#0A2148;
  --blue-soft:#EAF0FA;     /* selected / tint */
  --blue-soft-2:#DCE7F7;
  --green:#0BB762;         /* positive / verified / accent */
  --green-700:#07914C;
  --green-soft:#E4F7EE;
  --gold:#B98A2F;          /* client-facing action accent (portal + mobile) */
  --gold-700:#9A7325;      /* hover */
  --gold-soft:#F4EAD3;     /* tint */
  --gold-ink:#6E5316;
  --amber:#B07D1A;         /* drift / warning */
  --amber-soft:#FBF1DA;
  --red:#C0392B;
  --red-soft:#FBE9E7;

  /* neutrals */
  --ink:#15233B;
  --muted:#5C6878;
  --faint:#8A94A2;
  --faint-2:#AAB2BD;
  --paper:#F4F2EC;         /* app background (ivory, slightly deeper for contrast) */
  --card:#FFFFFF;
  --line:#E6E2D8;          /* warm hairline on paper */
  --line-cool:#E4E8EE;     /* cool hairline inside cards */
  --line-strong:#D2D6DD;

  --sans:"Geist","Inter",system-ui,sans-serif;
  --serif:"Newsreader",Georgia,serif;

  --r-sm:7px; --r:11px; --r-lg:16px;
  --shadow-sm:0 1px 2px rgba(14,43,92,.06);
  --shadow:0 6px 22px rgba(14,43,92,.08);
  --shadow-lg:0 18px 50px rgba(14,43,92,.16);
  --sidebar-w:248px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:var(--sans);background:var(--blue-deep);color:var(--ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"cv01","ss01";
}
#root{height:100vh;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
.tnum{font-variant-numeric:tabular-nums lining-nums;}
.serif{font-family:var(--serif);}

/* ---------------- App layout ---------------- */
.app{display:flex;height:100vh;overflow:hidden;background:var(--paper);}
.main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;}
.content{flex:1;overflow-y:auto;padding:32px 40px 56px;}
.content-inner{max-width:1320px;margin:0 auto;}

/* scrollbar */
.content::-webkit-scrollbar{width:12px;}
.content::-webkit-scrollbar-thumb{background:#cdd3da;border-radius:10px;border:3px solid var(--paper);}
.content::-webkit-scrollbar-track{background:transparent;}

/* ---------------- Sidebar ---------------- */
.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);background:var(--blue-deep);
  color:#fff;display:flex;flex-direction:column;padding:24px 16px 16px;position:relative;
}
.sidebar::after{content:"";position:absolute;inset:0 0 0 auto;width:1px;background:rgba(255,255,255,.06);}
.sb-logo{display:flex;align-items:center;padding:4px 10px 22px;}
.sb-logo img{height:34px;width:auto;display:block;}
.sb-section{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#6F84A8;font-weight:600;
  padding:18px 12px 8px;}
.nav-item{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:11px 12px;border-radius:9px;
  color:#AEBED8;font-size:15px;font-weight:500;letter-spacing:.005em;margin-bottom:2px;position:relative;
  transition:background .14s,color .14s;
}
.nav-item:hover{background:rgba(255,255,255,.05);color:#E7EEFB;}
.nav-item.active{background:rgba(255,255,255,.09);color:#fff;font-weight:600;}
.nav-item.active::before{content:"";position:absolute;left:-16px;top:9px;bottom:9px;width:4px;border-radius:0 4px 4px 0;background:var(--green);}
.nav-item .ic{width:20px;height:20px;flex:0 0 20px;display:flex;align-items:center;justify-content:center;}
.nav-item .ic svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.nav-item .badge{margin-left:auto;background:var(--green);color:#fff;font-size:11.5px;font-weight:700;
  min-width:20px;height:20px;padding:0 6px;border-radius:10px;display:flex;align-items:center;justify-content:center;}
.nav-item.active .badge,.nav-item:hover .badge{background:var(--green);}
.sb-spacer{flex:1;}
.sb-user{display:flex;align-items:center;gap:12px;padding:12px;border-radius:10px;background:rgba(255,255,255,.05);margin-top:8px;}
.sb-user .av{width:38px;height:38px;border-radius:50%;background:var(--green);color:#06301a;font-weight:700;
  display:flex;align-items:center;justify-content:center;font-size:15px;flex:0 0 38px;}
.sb-user .nm{font-size:14px;font-weight:600;color:#fff;line-height:1.2;}
.sb-user .rl{font-size:12px;color:#8DA0C0;}

/* ---------------- Topbar ---------------- */
.topbar{
  height:68px;flex:0 0 68px;background:rgba(244,242,236,.86);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:18px;padding:0 40px;position:relative;z-index:5;
}
.tb-title{font-size:20px;font-weight:600;color:var(--ink);letter-spacing:-.01em;}
.tb-sub{font-size:13px;color:var(--faint);}
.tb-crumb{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted);}
.tb-crumb b{color:var(--ink);font-weight:600;}
.tb-crumb .sep{color:var(--faint-2);}
.tb-spacer{flex:1;}
.tb-search{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line-strong);border-radius:9px;
  padding:8px 13px;width:260px;color:var(--faint);font-size:14px;white-space:nowrap;overflow:hidden;}
.tb-search svg{flex:0 0 16px;width:16px;height:16px;stroke:var(--faint);fill:none;stroke-width:1.8;}
.tb-icon{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--muted);border:1px solid transparent;}
.tb-icon:hover{background:#fff;border-color:var(--line-strong);}
.tb-icon svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:14.5px;font-weight:600;
  padding:11px 18px;border-radius:9px;letter-spacing:.005em;transition:background .14s,box-shadow .14s,transform .05s,border-color .14s;
  white-space:nowrap;
}
.btn:active{transform:translateY(.5px);}
.btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 1px 2px rgba(14,43,92,.2);}
.btn-primary:hover{background:var(--blue-700);}
.btn-green{background:var(--green);color:#fff;box-shadow:0 1px 2px rgba(7,145,76,.25);}
.btn-green:hover{background:var(--green-700);}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line-strong);}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);}
.btn-subtle{background:var(--blue-soft);color:var(--blue);}
.btn-subtle:hover{background:var(--blue-soft-2);}
.btn-sm{padding:8px 13px;font-size:13.5px;border-radius:8px;}
.btn-lg{padding:14px 26px;font-size:15.5px;}
.btn[disabled]{opacity:.45;pointer-events:none;}

/* ---------------- Cards ---------------- */
.card{background:var(--card);border:1px solid var(--line-cool);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);}
.card-pad{padding:24px 26px;}
.card-head{display:flex;align-items:center;justify-content:space-between;padding:20px 26px;border-bottom:1px solid var(--line-cool);}
.card-head h3{font-size:16.5px;font-weight:600;margin:0;color:var(--ink);letter-spacing:-.005em;}
.card-head .sub{font-size:13px;color:var(--faint);}

.section-label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:700;}

/* stat cards */
.stat{padding:22px 24px;background:var(--card);border:1px solid var(--line-cool);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);position:relative;overflow:hidden;}
.stat .lab{font-size:13px;color:var(--muted);font-weight:500;margin-bottom:12px;display:flex;align-items:center;gap:9px;}
.stat .lab .dot{width:30px;height:30px;border-radius:8px;background:var(--blue-soft);display:flex;align-items:center;justify-content:center;}
.stat .lab .dot svg{width:16px;height:16px;stroke:var(--blue);fill:none;stroke-width:1.8;}
.stat .val{font-family:var(--serif);font-size:40px;font-weight:500;color:var(--ink);line-height:1;letter-spacing:-.01em;}
.stat .val .cur{font-size:21px;color:var(--faint);font-weight:500;margin-right:5px;font-family:var(--sans);}
.stat .meta{margin-top:11px;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:7px;}
.stat .up{color:var(--green-700);font-weight:600;}

/* ---------------- Chips ---------------- */
.chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:100px;letter-spacing:.01em;white-space:nowrap;}
.chip svg{width:13px;height:13px;}
.chip-green{background:var(--green-soft);color:var(--green-700);}
.chip-blue{background:var(--blue-soft);color:var(--blue);}
.chip-amber{background:var(--amber-soft);color:var(--amber);}
.chip-red{background:var(--red-soft);color:var(--red);}
.chip-grey{background:#EEF0F3;color:var(--muted);}
.chip-spin svg{animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------------- Tables ---------------- */
.tbl{width:100%;border-collapse:collapse;font-size:14px;}
.tbl th{text-align:left;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);
  font-weight:700;padding:12px 16px;border-bottom:1px solid var(--line-cool);background:#FBFAF7;}
.tbl th.r,.tbl td.r{text-align:right;}
.tbl td{padding:14px 16px;border-bottom:1px solid var(--line-cool);color:var(--ink);vertical-align:middle;}
.tbl tr:last-child td{border-bottom:none;}
.tbl tbody tr:hover{background:#FAFBFD;}
.tbl .inst{font-weight:600;color:var(--ink);}
.tbl .tick{font-size:12px;color:var(--faint);font-weight:500;}
.tbl .muted{color:var(--muted);}

/* ---------------- Misc ---------------- */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px;}
.page-head h1{font-size:27px;font-weight:600;margin:0;letter-spacing:-.015em;color:var(--ink);}
.page-head .desc{font-size:14.5px;color:var(--muted);margin-top:6px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.col-2{display:grid;grid-template-columns:1.5fr 1fr;gap:22px;align-items:start;}
.divider{height:1px;background:var(--line-cool);margin:0;}

/* allocation stacked bar */
.allocbar{display:flex;height:18px;border-radius:6px;overflow:hidden;background:#EEF0F3;}
.allocbar .seg{height:100%;}
.alloc-legend{display:flex;flex-wrap:wrap;gap:18px 26px;margin-top:16px;}
.alloc-legend .it{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink);}
.alloc-legend .sw{width:12px;height:12px;border-radius:3px;flex:0 0 12px;}
.alloc-legend .pct{font-weight:700;font-variant-numeric:tabular-nums;}

/* entrance — transform only, so content is ALWAYS visible even if the
   animation timeline is paused (hidden iframe, capture clone, etc.) */
.fade{animation:fade .4s ease both;}
@keyframes fade{from{transform:translateY(9px);}to{transform:none;}}

/* toast */
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:var(--blue-deep);color:#fff;
  padding:14px 22px;border-radius:11px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:12px;
  font-size:14.5px;font-weight:500;z-index:50;animation:toastIn .35s cubic-bezier(.2,.8,.2,1) both;}
.toast svg{width:20px;height:20px;color:var(--green);stroke:currentColor;fill:none;stroke-width:2;}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,16px);}to{opacity:1;transform:translate(-50%,0);}}

/* demo-advance bar (golden path) */
.advance{position:sticky;bottom:0;margin:28px -40px -56px;padding:18px 40px;
  background:linear-gradient(to top,var(--paper) 60%,rgba(244,242,236,0));display:flex;justify-content:flex-end;gap:12px;align-items:center;}
.advance .hint{margin-right:auto;font-size:13px;color:var(--faint);display:flex;align-items:center;gap:8px;}
.advance .hint .k{font-size:11px;background:#fff;border:1px solid var(--line-strong);border-radius:5px;padding:2px 7px;color:var(--muted);font-weight:600;}