/* ============================================================
   FlexibleX Proposal — Bootstrap 5.3 theme layer
   Overrides Bootstrap CSS variables for brand colors, then adds
   a small set of custom components Bootstrap doesn't ship
   (donut chart, risk matrix, stat bars, diagrams, timeline).
   ============================================================ */

:root{
  --bs-primary:#1F3864;
  --bs-primary-rgb:31,56,100;
  --bs-secondary:#B8892B;
  --bs-secondary-rgb:184,137,43;
  --bs-success:#3B8F5C;
  --bs-success-rgb:59,143,92;
  --bs-warning:#B8892B;
  --bs-warning-rgb:184,137,43;
  --bs-danger:#C0392B;
  --bs-danger-rgb:192,57,43;
  --bs-light:#FBFAF8;
  --bs-body-bg:#FBFAF8;
  --bs-body-font-family:-apple-system,"Segoe UI",Calibri,Helvetica,Arial,sans-serif;
  --bs-border-radius:.65rem;
  --bs-border-radius-lg:1rem;
  --bs-border-radius-sm:.45rem;

  --fx-navy:#1F3864;
  --fx-navy-deep:#152C50;
  --fx-gold:#B8892B;
  --fx-gold-light:#E8C77A;
  --fx-cream:#F4EFE3;
  --fx-ink-soft:#5b6472;

  /* soft, low-glare sidebar — pale tinted background, dark slate text (reader-friendly, WCAG AA) */
  --fx-side-bg:#EEF3FA;
  --fx-side-bg-top:#F5F8FC;
  --fx-side-text:#26313F;
  --fx-side-text-muted:#5C6B7A;
  --fx-side-border:#D9E2EE;
}

body{background-color:var(--bs-body-bg);line-height:1.65;color:#2c3340;}
a{text-decoration:none;}
p{margin-bottom:1rem;}

/* ---------- brand navbar / sidebar ---------- */
.fx-sidebar{
  width:280px;flex:0 0 280px;min-height:100vh;
  background:linear-gradient(180deg,var(--fx-side-bg-top) 0%, var(--fx-side-bg) 100%);
  border-right:1px solid var(--fx-side-border);
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.fx-brand-logo{width:34px;height:34px;border-radius:8px;background:#fff;padding:4px;object-fit:contain;box-shadow:0 1px 4px rgba(31,56,100,.15);}
.fx-sidebar .fx-brand-title{color:var(--fx-navy);}
.fx-sidebar .fx-brand-sub{color:var(--fx-side-text-muted);}
.fx-sidebar hr{border-color:var(--fx-side-border);opacity:1;}
.fx-sidebar .nav-link{color:var(--fx-side-text);font-size:.92rem;font-weight:500;border-left:3px solid transparent;border-radius:0 .5rem .5rem 0;padding:.6rem .9rem;transition:background .12s ease,color .12s ease;}
.fx-sidebar .nav-link i{width:1.3em;text-align:center;color:var(--fx-navy);opacity:.75;}
.fx-sidebar .nav-link:hover{background:#fff;color:var(--fx-navy);}
.fx-sidebar .nav-link.active{background:var(--fx-navy);color:#fff;border-left-color:var(--fx-gold);font-weight:700;box-shadow:0 2px 6px rgba(31,56,100,.25);}
.fx-sidebar .nav-link.active i{color:#fff;opacity:1;}
.fx-sidebar .nav-heading, .fx-sidebar .fx-nav-heading{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fx-side-text-muted);font-weight:800;padding:0 .9rem;}
.fx-sidebar .fx-sidebar-footer{color:var(--fx-side-text-muted);}

/* bold "presented by" vendor credit — sidebar */
.fx-presented-by{
  background:#fff;border:1px solid var(--fx-side-border);border-radius:.55rem;
  padding:.65rem .75rem;font-size:.86rem;font-weight:800;color:var(--fx-navy);line-height:1.35;
}
.fx-presented-by .fx-sub{font-weight:700;color:var(--fx-gold);text-transform:uppercase;letter-spacing:.03em;font-size:.66rem;margin-top:.15rem;}

/* ---------- hero ---------- */
.fx-hero{
  background:linear-gradient(135deg,var(--fx-navy) 0%, var(--fx-navy-deep) 100%);
  color:#fff;border-radius:var(--bs-border-radius-lg);
}
.fx-hero .fx-kicker{color:var(--fx-gold-light);font-weight:700;letter-spacing:.14em;font-size:.75rem;}
.fx-hero h1{font-weight:800;font-size:2.75rem;}

/* ---------- icon tile for stat cards / focus cards ---------- */
.fx-icon-tile{
  width:46px;height:46px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--fx-cream);color:var(--fx-navy);font-size:1.1rem;
}
.fx-icon-tile.on-dark{background:rgba(255,255,255,.14);color:#fff;}

/* ---------- formula chips ---------- */
.fx-formula{background:var(--fx-cream);border:1px solid var(--fx-gold-light);border-radius:var(--bs-border-radius);}
.fx-formula .fx-eq{font-family:"Courier New",monospace;color:#6b5217;font-size:.9rem;}

/* ---------- stacked bar ---------- */
.fx-bar-stack{height:42px;border-radius:.6rem;overflow:hidden;}
.fx-bar-stack .seg{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.78rem;}

/* ---------- donut (pure CSS conic-gradient) ---------- */
.fx-donut{
  width:170px;height:170px;border-radius:50%;flex:0 0 auto;
  background:conic-gradient(
    var(--fx-navy) 0% 17%,
    var(--fx-gold) 17% 33%,
    var(--bs-success) 33% 50%,
    var(--bs-danger) 50% 66%,
    #8CA0C7 66% 100%
  );
  position:relative;
}
.fx-donut::after{content:"";position:absolute;inset:26px;background:var(--bs-body-bg);border-radius:50%;}

/* ---------- diagrams (hierarchy / architecture) ---------- */
.fx-diagram-box{
  background:#fff;border:2px solid var(--fx-navy);border-radius:.6rem;
  padding:.7rem 1rem;font-weight:700;color:var(--fx-navy);font-size:.85rem;text-align:center;
}
.fx-diagram-box.accent{background:var(--fx-navy);color:#fff;}
.fx-diagram-box.accent2{background:var(--fx-cream);border-color:var(--fx-gold);color:#6b5217;}
.fx-arrow-right{color:var(--fx-gold);font-size:1.3rem;}
.fx-arrow-down{color:var(--fx-gold);font-size:1.3rem;}

/* ---------- risk matrix heatmap ---------- */
.fx-matrix-cell{border-radius:.5rem;padding:1rem .4rem;text-align:center;font-weight:800;font-size:.85rem;color:#fff;}
.fx-matrix-cell.low{background:var(--bs-success);}
.fx-matrix-cell.med{background:var(--bs-warning);}
.fx-matrix-cell.crit{background:var(--bs-danger);}
.fx-matrix-label{font-size:.7rem;font-weight:800;color:var(--fx-ink-soft);text-transform:uppercase;}

/* ---------- vertical timeline ---------- */
.fx-timeline{position:relative;padding-left:2.6rem;border-left:3px solid #E4E1DA;}
.fx-timeline-item{position:relative;padding-bottom:1.9rem;}
.fx-timeline-item:last-child{padding-bottom:0;}
.fx-timeline-item .fx-dot{
  position:absolute;left:-2.95rem;top:0;width:2.1rem;height:2.1rem;border-radius:50%;
  background:var(--fx-navy);color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.85rem;box-shadow:0 0 0 4px var(--bs-body-bg);
}

/* ---------- step cards (process flows) ---------- */
.fx-step{background:#fff;border:1px solid #E4E1DA;border-radius:var(--bs-border-radius);}
.fx-step .fx-step-badge{font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--fx-gold);}

/* ---------- callout ---------- */
.fx-callout{background:var(--fx-cream);border-left:4px solid var(--fx-gold);border-radius:0 .6rem .6rem 0;color:#6b5217;}

/* ---------- equal-height side-by-side boxes ----------
   Bootstrap rows are flex containers (align-items:stretch by default),
   so any direct card-like child of a column just needs height:100%
   to match its siblings — applied broadly as a safety net. */
.row > [class*="col-"] > .card,
.row > [class*="col-"] > .fx-step,
.row > [class*="col-"] > .fx-formula,
.row > [class*="col-"] > .fx-callout,
.row > [class*="col-"] > .fx-glance-stat,
.row > [class*="col-"] > .fx-diagram-box{
  height:100%;
}
.card-body{display:flex;flex-direction:column;}

/* ---------- misc ---------- */
.fx-progress-track{height:20px;border-radius:999px;}
.text-fx-navy{color:var(--fx-navy)!important;}
.text-fx-gold{color:var(--fx-gold)!important;}
.bg-fx-cream{background:var(--fx-cream)!important;}
.fx-card-link{transition:transform .12s ease, box-shadow .12s ease;}
.fx-card-link:hover{transform:translateY(-3px);box-shadow:0 .75rem 1.5rem rgba(31,56,100,.14)!important;}
.fx-footer{color:#8b93a0;font-size:.8rem;}

/* ---------- right-hand "at a glance" panel ---------- */
.fx-rightpanel{
  width:340px;flex:0 0 340px;
  min-height:100vh;
  border-left:1px solid #E4E1DA;
  background:#F7F5F0;
}
.fx-rightpanel-inner{position:sticky;top:0;min-height:100vh;max-height:100vh;overflow-y:auto;display:flex;flex-direction:column;}

/* persistent pitch header at the top of the panel */
.fx-pitch{padding:1.75rem 1.5rem 1.25rem 1.5rem;border-bottom:1px solid #E4E1DA;}
.fx-pitch-eyebrow{font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--fx-gold);margin-bottom:.35rem;}
.fx-pitch-title{font-size:1.5rem;font-weight:800;color:var(--fx-navy);line-height:1.2;margin-bottom:.6rem;}
.fx-pitch-sub{font-size:1.02rem;line-height:1.55;color:#3a4150;margin-bottom:0;}

.fx-glance-wrap{padding:1.5rem;flex:1 1 auto;}
.fx-glance-card{background:#fff;border:1px solid #E4E1DA;border-radius:var(--bs-border-radius);}
.fx-glance-card .fx-glance-title{font-size:.9rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--fx-gold);}
.fx-glance-summary{font-size:1.05rem;line-height:1.55;color:#3a4150;}
.fx-glance-list{list-style:none;margin:0;padding:0;}
.fx-glance-list li{display:flex;gap:.6rem;font-size:1.02rem;line-height:1.5;color:#282e38;margin-bottom:.85rem;align-items:flex-start;}
.fx-glance-list li i{color:var(--bs-success);margin-top:.25rem;flex:0 0 auto;font-size:1.05rem;}
.fx-glance-stat{background:var(--fx-cream);border-radius:.5rem;padding:.75rem .8rem;text-align:center;}
.fx-glance-stat .num{font-weight:800;color:var(--fx-navy);font-size:1.55rem;line-height:1;}
.fx-glance-stat .lbl{font-size:.76rem;color:#6b5217;text-transform:uppercase;letter-spacing:.03em;margin-top:.2rem;}

/* persistent bold vendor credit at the base of the right panel — repeats on every page */
.fx-rightpanel-credit{padding:1.25rem 1.5rem 1.5rem 1.5rem;border-top:1px solid #E4E1DA;background:#fff;flex:0 0 auto;}
.fx-rightpanel-credit img{height:26px;width:auto;display:block;}
.fx-rightpanel-credit .brand-line{font-weight:800;color:var(--fx-navy);font-size:1rem;line-height:1.3;}
.fx-rightpanel-credit .sub-line{font-weight:700;color:var(--fx-gold);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;margin-top:.15rem;}