/* MRO-17: RS Business Case — estimating / ROI dashboard.
   Ported verbatim from the legacy RS_Business_Case.aspx <style> block, with ONE
   transformation: every rule is scoped under `.est-wrap` (the dashboard's own
   container) so it does NOT leak into the base.html chrome. Why this matters:
   the block set a global `*{box-sizing}`, bare element rules (label / input /
   canvas) and generic class names (.card / .title / .muted / .grid ...) that
   collide with site.css + Bootstrap — e.g. base.html's header uses
   <div class="title">. The `:root` palette was moved onto `.est-wrap` for the
   same reason (it collided with site.css variables like --radius/--shadow).
   The dark theme is DELIBERATELY unlike the rest of the site — do NOT harmonize
   it with site.css. */

.est-wrap {
    --bg: #0b1016;
    --card: #111927;
    --ink: #e9eef6;
    --muted: #c5d2e0; /* lighter muted text */
    --accent: #6be675;
    --accent-2: #6bb8ff;
    --warn: #ffd166;
    --radius: 18px;
    --shadow: 0 10px 30px rgba(0,0,0,.35);

    background: var(--bg); color: var(--ink);
    padding: 24px; max-width: 2000px; margin: 0 auto;
    font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
}
.est-wrap *{ box-sizing:border-box }
.est-wrap .grid{ display:grid; grid-template-columns: 5fr 7fr; gap:16px }
.est-wrap .card{
    background: linear-gradient(180deg,#0f1724 0%,var(--card) 100%);
    border:1px solid rgba(255,255,255,.06);
    border-radius:var(--radius); box-shadow:var(--shadow); padding:18px;
    align-self: start; height: auto;
}

.est-wrap .title{ font-size:22px; font-weight:800; letter-spacing:.2px }
.est-wrap .muted{ color:var(--muted); font-size:14px }
.est-wrap .hr{ height:1px; background:rgba(255,255,255,.08); margin:12px 0 }
.est-wrap .col{ display:grid; gap:12px }
.est-wrap .row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.est-wrap .row3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px }
.est-wrap label{ font-size:14px; color:var(--muted); display:flex; justify-content:space-between }
.est-wrap .field{ display:grid; gap:6px }

.est-wrap input[type="number"], .est-wrap input[type="range"]{
    width:100%; background:#0b1422; color:var(--ink);
    border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:10px 12px; outline:none;
}
.est-wrap .pair{ display:grid; grid-template-columns:1fr 110px; gap:8px; align-items:center }
.est-wrap .kpi{ display:flex; align-items:baseline; gap:8px }
.est-wrap .kpi .big{ font-size:36px; font-weight:900 }
.est-wrap .tag{
    font-size:14px; padding:3px 8px; border-radius:999px;
    border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,0.05);
}
.est-wrap .accent{ color:var(--accent) } .est-wrap .accent-2{ color:var(--accent-2) }
.est-wrap ul.list{ margin:0; padding-left:16px; color:var(--muted); font-size:14px }
.est-wrap canvas{ width:100%; height:280px; display:block }
@media (max-width:1200px){
    .est-wrap .grid{ grid-template-columns:1fr }
    .est-wrap .pair{ grid-template-columns:1fr 100px }
}
/* override Bootstrap card text color */
.est-wrap .card { color: var(--ink) !important; }
.est-wrap .card .muted, .est-wrap label, .est-wrap ul.list { color: var(--muted) !important; }

.est-wrap .btn-reset{
    background:#0b1422; color:var(--ink);
    border:1px solid rgba(255,255,255,.2);
    padding:8px 12px; border-radius:10px; cursor:pointer; font-weight:600;
}
.est-wrap .btn-reset:hover{ filter:brightness(1.1) }

/* Bigger chart area + slightly larger default fonts already set.
   The 380px now lives on the .chart-box wrapper in the template, so there is one
   place that decides the chart's height; the canvas just fills it. */
.est-wrap .chart-card canvas { width:100%; height:100%; display:block; }

/* Full-width row inside the 2-col grid */
.est-wrap .span-12 { grid-column: 1 / -1; }

/* Hero header banner */
.est-wrap .hero {
  background: linear-gradient(135deg, rgba(107,232,117,0.10), rgba(107,184,255,0.10)),
              linear-gradient(180deg,#0f1724 0%,var(--card) 100%);
  border: 1px solid rgba(255,255,255,.10);
  display: flex !important;          /* ensure flex wins over any card defaults */
  flex-direction: row !important;    /* force row (some themes set column)   */
  align-items: center;
  justify-content: space-between;    /* title left, values right             */
  flex-wrap: nowrap;                 /* keep them on one line                */
  gap: 24px;
  padding: 12px 18px;
  text-align: left;                  /* fight any text-align:center upstream */
}
.est-wrap .hero .title {
  font-size: 26px;
  font-weight: 800;
  margin: 0;
}
.est-wrap .hero .right {
  display: flex;
  gap: 24px;
  align-items: baseline;
  flex-wrap: wrap;                   /* allows the two pills to wrap together on small screens */
}

/* Savings footer bar under the chart */
.est-wrap .value-bar {
  display:flex; gap:24px; flex-wrap:wrap; align-items:center; margin-top:12px;
  padding:12px; border-radius:12px; background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
}
.est-wrap .value-pill {
  display:flex; gap:8px; align-items:baseline;
  font-weight:700;
}
.est-wrap .value-pill .label { font-weight:600; color: var(--muted); }
.est-wrap .value-pill .num   { font-size: 22px; font-weight: 900; }

/* Tighten right column cards */
.est-wrap .tight-cards .card{ padding:12px }
.est-wrap .tight-cards .title{ font-size:18px }
.est-wrap .tight-cards .hr{ margin:8px 0 }
.est-wrap .tight-cards .kpi .big{ font-size:30px }
.est-wrap .tight-cards .tag{ font-size:12px; padding:2px 6px }
.est-wrap .tight-cards .muted{ font-size:13px }

/* Tighten vertical rhythm on the right column stack */
.est-wrap .col.tight-cards { gap: 8px; }  /* was 12px; tweak to taste */

/* Nuke inline margin-top on those right-side blocks */
.est-wrap .col.tight-cards > .row3,
.est-wrap .col.tight-cards > .card {
  margin-top: 0 !important;
}

/* Make children cards shrink to content height (no stretch) */
.est-wrap .col.tight-cards .row3 > .card { align-self: start; height: auto; }

/* Bigger, clearer bullets under Savings Breakdown */
.est-wrap .chart-card .list { font-size: 16px; line-height: 1.45; }
.est-wrap .chart-card .list li { margin: 4px 0; }