/* RO Profit Chart — professional dark palette (no blue; elegant greys) */
:where(.ro-profit-chart), :where(.ro-profit-chart *) { box-sizing: border-box; max-width: 100%; }
.ro-profit-chart { isolation:isolate; }

.ro-profit-chart.wrap{
  /* Neutrals */
  --bg:#14161c;         /* page background */
  --panel:#161a22;      /* cards */
  --soft:#10141b;       /* inputs/surfaces */
  --border:#2a323f;     /* borders/grid */
  --text:#e6eaf2;       /* primary text */
  --muted:#9aa3b2;      /* secondary text */
  --axis:#8d96a6;       /* chart axis labels */
  --grid:#2a323f;       /* chart grid lines */

  /* Accents (tempered) */
  --pri:#18b2cd;        /* cyan (sales) — subtle */
  --sec:#8b7cf6;        /* indigo (trend if needed) */

  /* Series colors (moved away from blue → elegant greys) */
  --sale:  var(--pri);      /* Estimated sale (teal/cyan) */
  --tax:   #e07272;         /* coral/red for taxes */
  --agency:#dcb24b;         /* warm amber for agency */
  --profit:#2bb679;         /* refined emerald */
  --profitEdge:#1b8b61;     /* profit outline */
  --cost:  #8a93a3;         /* <-- dark grey for All-in cost line/dot */
  --line:  #9aa3b2;         /* neutral line if needed */

  font-family: ui-sans-serif,Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  padding:clamp(14px,2vw,28px);
  border-radius:24px;
  width:100%;
  overflow:hidden;
  display:grid;
  gap:16px;
  border:1px solid #1b212b;
  box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.02);
}

.ro-profit-chart .title{font-weight:900;font-size:clamp(20px,2.2vw,30px);margin:0;letter-spacing:.2px}
.ro-profit-chart .sub{color:var(--muted);font-size:13px}
.ro-profit-chart .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:16px}
.ro-profit-chart .card{
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  border:1px solid var(--border);
  border-radius:18px;
  padding:clamp(12px,1.6vw,18px);
  box-shadow: 0 10px 28px rgba(2,8,23,.25);
}

/* Forms */
.ro-profit-chart .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ro-profit-chart .field{display:flex;flex-direction:column;gap:6px}
.ro-profit-chart label{font-size:12px;color:var(--muted)}
.ro-profit-chart .input,.ro-profit-chart .select{
  width:100%;padding:12px;border-radius:12px;border:1px solid var(--border);
  background:var(--soft);color:var(--text);outline:none;
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.ro-profit-chart .input:hover,.ro-profit-chart .select:hover{ border-color:#343c4a; }
.ro-profit-chart .input:focus-visible,.ro-profit-chart .select:focus-visible{
  border-color:#4a5566; box-shadow: 0 0 0 3px rgba(154,163,178,.22);
}

/* Switch */
.ro-profit-chart .switch{display:flex;align-items:center;gap:10px;margin-top:6px}
.ro-profit-chart .switch input{
  width:52px;height:28px;appearance:none;background:#222834;border-radius:16px;position:relative;cursor:pointer;
  border:1px solid var(--border);
  transition:background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ro-profit-chart .switch input:checked{
  background:linear-gradient(90deg,#179fb7,#7f72e6); border-color:#464f60; box-shadow: 0 6px 14px rgba(23,159,183,.18);
}
.ro-profit-chart .switch input::after{
  content:"";position:absolute;top:4px;left:4px;width:20px;height:20px;border-radius:50%;
  background:#0e131b;border:1px solid #273040;transition:.2s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 6px rgba(0,0,0,.45);
}
.ro-profit-chart .switch input:checked::after{left:27px;background:#0d1220;border-color:#3a4556}

/* Canvas */
.ro-profit-chart canvas{
  width:100%;height:auto;display:block;aspect-ratio:16/9;
  background:var(--soft);border:1px solid var(--border);border-radius:14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

/* Focus cards */
.ro-profit-chart .focus{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.ro-profit-chart .pCard{background:var(--soft);border:1px solid var(--border);border-radius:14px;padding:12px;display:grid;gap:8px;transition:transform .12s ease, border-color .12s ease, background .12s ease;}
.ro-profit-chart .pCard:hover{ transform: translateY(-1px); border-color:#3a4352; background:#111621; }
.ro-profit-chart .pHead{display:flex;justify-content:space-between;align-items:center}
.ro-profit-chart .pHead h4{margin:0;font-size:14px;color:#c4cad6;font-weight:800}
.ro-profit-chart .pill{background:rgba(43,182,121,.12);border:1px solid var(--profitEdge);color:#cfeee0;padding:4px 8px;border-radius:999px;font-size:12px;font-weight:800}
.ro-profit-chart .pMain{font-size:26px;font-weight:900;letter-spacing:.2px}
.ro-profit-chart .pSub{color:#adb6c6;font-size:12px}
.ro-profit-chart .bar{height:10px;background:#0f1b2a;border:1px solid var(--border);border-radius:999px;overflow:hidden}
.ro-profit-chart .bar > span{display:block;height:100%;background:linear-gradient(90deg,var(--profit),#3bce8f);width:0%;box-shadow: inset 0 4px 12px rgba(59,206,143,.15)}

/* Legend + dots (cost, line now greys) */
.ro-profit-chart .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:6px}
.ro-profit-chart .kpi{background:var(--soft);border:1px solid var(--border);border-radius:12px;padding:12px}
.ro-profit-chart .kpi h5{margin:0 0 6px;color:#c1c7d2;font-size:12px;font-weight:800}
.ro-profit-chart .kpi p{margin:0;font-weight:900;font-size:18px}
.ro-profit-chart .legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.ro-profit-chart .badge{display:flex;align-items:center;gap:6px;font-size:12px;color:#dde3ee;background:var(--soft);border:1px solid var(--border);padding:6px 8px;border-radius:10px;font-weight:800}
.ro-profit-chart .dot{width:12px;height:12px;border-radius:3px}
.ro-profit-chart .dot.sale{background:var(--sale)}
.ro-profit-chart .dot.tax{background:var(--tax)}
.ro-profit-chart .dot.agency{background:var(--agency)}
.ro-profit-chart .dot.profit{background:var(--profit)}
.ro-profit-chart .dot.cost{background:var(--cost)}
.ro-profit-chart .dot.line{background:var(--line)}

/* Tooltip for interactive chart */
.ro-profit-chart .chart-tip{
  position:absolute; pointer-events:none;
  background:#0e131b; border:1px solid #323a48; color:#e6eaf2;
  padding:8px 10px; border-radius:10px; font-size:12px; line-height:1.25;
  box-shadow:0 8px 18px rgba(0,0,0,.35);
  transform:translate(-50%,-110%); display:none; white-space:nowrap; z-index:2;
}

@media (max-width:980px){
  .ro-profit-chart .grid{grid-template-columns:1fr}
  .ro-profit-chart .row{grid-template-columns:1fr}
}