/* =========================================================================
   Dashboard Revenue RRP — replika tampilan screenshot 1368 x 713 px.
   Semua koordinat (left/top) memakai piksel halaman screenshot sehingga
   posisi panel bisa dicek langsung terhadap gambar referensi.
   Kanvas abu-abu 1349 x 701 px (sisa putih di kanan/bawah = sama seperti screenshot).
   ========================================================================= */
:root {
  --canvas: #d9d9d9;
  --purple: #342a6a;
  --green: #34a853;        /* donut, batang total, TOTAL REVENUE, achievement */
  --green-text: #6aa84f;   /* angka Revenue di tabel */
  --row: #efefef;
  --rule: #b7b7b7;
  --orange: #ff9900;
  --peach: #f9cb9c;
  --mint: #d9ead3;
  --mauve: #d5a6bd;
  --cream: #fce5cd;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #fff; }
body {
  min-width: 1349px;                 /* layar kecil: halaman bergulir horizontal, susunan tidak rusak */
  font-family: Arial, Helvetica, "Liberation Sans", sans-serif;
  font-size: 12px;
  color: #000;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.workspace { position: relative; width: 1349px; height: 701px; background: var(--canvas); overflow: hidden; }
.sheet { position: absolute; left: 0; top: 0; width: 1349px; height: 701px; }

/* ---------- Header ---------- */
.topbar { position: absolute; left: 12px; top: 11px; width: 1288px; height: 30px; background: var(--purple); color: #fff; }
.top-title { position: absolute; left: 0; top: 0; width: 922px; text-align: center; font-weight: bold; font-size: 12px; line-height: 32px; white-space: nowrap; }
.top-month { position: absolute; left: 966px; top: 0; font-weight: normal; font-size: 12px; line-height: 32px; white-space: nowrap; }
.company-logo { position: absolute; left: 1096px; top: 0; width: 189px; height: 90px; z-index: 5; display: block; }

/* ---------- Kartu (posisi persis screenshot) ---------- */
.card { position: absolute; background: #fff; overflow: hidden; }
.sales-card       { left: 12px;   top: 50px;  width: 392px; height: 171px; }
.residential-card { left: 12px;   top: 230px; width: 392px; height: 138px; }
.marketplace-card { left: 12px;   top: 377px; width: 392px; height: 150px; }
.chart-card       { left: 414px;  top: 50px;  width: 531px; height: 318px; }
.summary-card     { left: 956px;  top: 50px;  width: 344px; height: 319px; }
.team-resto       { left: 414px;  top: 377px; width: 202px; height: 150px; }
.team-nonresto    { left: 626px;  top: 377px; width: 205px; height: 150px; }
.team-bali        { left: 841px;  top: 377px; width: 232px; height: 150px; }
.team-bandung     { left: 1083px; top: 377px; width: 217px; height: 150px; }
.team-tangerang   { left: 414px;  top: 537px; width: 202px; height: 144px; }

/* ---------- Kartu KPI kiri ---------- */
.kpi-title { position: absolute; left: 13px; top: 13px; width: 215px; height: 19px; text-align: center; font-weight: bold; font-size: 12px; line-height: 22px; white-space: nowrap; }
.kpi-title-orange { background: var(--orange); }
.kpi-title-peach  { background: var(--peach); }
.kpi-title-pale   { background: var(--mint); }
.kpi-table { position: absolute; left: 13px; top: 40px; width: 215px; }
.kpi-table > div {
  display: grid; grid-template-columns: 105px 8px minmax(0, 1fr);
  height: 18px; margin-bottom: 1px; padding: 0 3px 0 4px;
  background: var(--row); line-height: 20px; white-space: nowrap;
  overflow: hidden;                  /* seperti sel spreadsheet: ekor huruf terpotong di batas baris */
}
.kpi-table > div:first-child { height: 19px; line-height: 22px; }
.sales-card .kpi-table { top: 39px; }
.sales-card .kpi-table > div { height: 15px; line-height: 20px; }
.sales-card .kpi-table > div:first-child { height: 16px; line-height: 22px; }
.kpi-table b, .team-table b { font-weight: normal; }
.kpi-table strong, .team-table strong { text-align: right; font-weight: normal; white-space: nowrap; }
.kpi-table strong.green-text, .team-table strong.green-text { color: var(--green-text); font-weight: bold; }
.donut { position: absolute; width: 134px; height: 134px; }
.donut-svg { display: block; width: 134px; height: 134px; overflow: visible; }
.donut-text { font-family: Arial, Helvetica, "Liberation Sans", sans-serif; font-size: 12px; font-weight: bold; fill: #000; }
.donut-sales       { left: 243px; top: 13px; }
.donut-residential { left: 243px; top: 6px; }
.donut-marketplace { left: 243px; top: 14px; }

/* ---------- Grafik tengah (SVG berkoordinat halaman) ---------- */
.chart-svg { position: absolute; left: 0; top: 0; display: block; width: 531px; height: 318px; overflow: hidden; }
.chart-svg text { font-family: Arial, Helvetica, "Liberation Sans", sans-serif; }
.total-label { font-size: 14.5px; font-weight: bold; fill: #000; }
.big-total { font-size: 18px; font-weight: bold; fill: #fff; }
.chart-svg .previous-total { font-family: "Times New Roman", Times, "Liberation Serif", serif; font-size: 11px; fill: #333; }
.total-achievement { font-size: 12px; font-weight: bold; fill: #000; }
.chart-key text { font-size: 12px; fill: #222; }
.month-axis text { font-size: 10.6px; fill: #222; }

/* ---------- Rekap kanan ---------- */
.breakdown-list { position: absolute; left: 19px; top: 56px; width: 310px; }
.breakdown-row, .breakdown-total {
  display: flex; justify-content: space-between; align-items: flex-start;
  height: 16px; padding: 0 4px 0 3px; border-bottom: 1px solid var(--rule);
  font-size: 12px; line-height: 16px; white-space: nowrap;
}
.breakdown-row strong { font-weight: normal; }
.breakdown-row:nth-child(6) { height: 21px; line-height: 20px; border-bottom-width: 3px; }
.breakdown-total { height: 25px; line-height: 22px; border-bottom-width: 3px; }
.breakdown-total b, .breakdown-total strong { font-weight: bold; }
.green-strong { color: var(--green); }
.target-total {
  position: absolute; left: 19px; top: 193px; width: 310px; height: 19px;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 0 13px 0 3px; background: var(--row); line-height: 22px; white-space: nowrap;
}
.target-total strong { font-weight: bold; }
.customer-count {
  position: absolute; left: 19px; top: 220px; width: 121px; height: 83px;
  background: linear-gradient(to bottom, var(--peach) 0 38px, var(--cream) 38px 100%);
  text-align: center;
}
.customer-count::before { content: ""; position: absolute; left: 121px; top: 0; width: 1px; height: 19px; background: var(--peach); }
.customer-count strong { display: block; padding-top: 6px; font-weight: bold; font-size: 12px; line-height: 15px; white-space: nowrap; }
.customer-count span { position: absolute; left: 0; top: 38px; width: 100%; height: 45px; line-height: 46px; font-size: 12px; }
.segment-pie { position: absolute; left: 144px; top: 220px; display: block; width: 200px; height: 99px; overflow: visible; }
.segment-pie text { font-family: Arial, Helvetica, "Liberation Sans", sans-serif; }
.segment-legend text { font-size: 6.5px; fill: #8c8c8c; }
.pie-label { font-size: 9px; font-weight: bold; fill: #fff; }

/* ---------- Kartu tim ---------- */
.team-card { --tw: 176px; --label: 77px; --achv-x: 15px; --box-x: 100px; --box-w: 89px; }
.team-nonresto  { --tw: 179px; --label: 81px; --achv-x: 17px; --box-x: 103px; --box-w: 89px; }
.team-bali      { --tw: 206px; --label: 91px; --achv-x: 22px; --box-x: 115px; --box-w: 104px; }
.team-bandung   { --tw: 188px; --label: 85px; --achv-x: 19px; --box-x: 109px; --box-w: 92px; }
.team-heading {
  position: absolute; left: 13px; top: 13px; width: var(--tw); height: 19px; margin: 0;
  background: var(--mauve); text-align: center; font-size: 12px; font-weight: bold; line-height: 22px; white-space: nowrap;
}
.team-table { position: absolute; left: 13px; top: 40px; width: var(--tw); font-size: 12px; }
.team-table > div {
  display: grid; grid-template-columns: var(--label) 8px minmax(0, 1fr);
  height: 18px; margin-bottom: 1px; padding: 0 3px 0 4px;
  background: var(--row); line-height: 20px; white-space: nowrap;
}
.team-table > div:first-child { height: 19px; line-height: 22px; }
.team-achievement > strong { position: absolute; left: var(--achv-x); top: 104px; font-size: 12px; font-weight: bold; line-height: 36px; white-space: nowrap; }
.team-achievement > output {
  position: absolute; left: var(--box-x); top: 104px; width: var(--box-w); height: 34px;
  display: block; background: var(--row); color: var(--green); text-align: center;
  font-size: 12px; font-weight: bold; line-height: 36px; white-space: nowrap;
}
/* Kartu Tangerang (lebih pendek): isi turun 6 px dan kotak achievement 30 px */
.team-tangerang .team-heading { top: 19px; }
.team-tangerang .team-table { top: 45px; }
.team-tangerang .team-achievement > strong { top: 108px; line-height: 32px; }
.team-tangerang .team-achievement > output { top: 108px; height: 30px; line-height: 32px; }

/* ---------- Cetak ---------- */
@media print {
  @page { size: A4 landscape; margin: 8mm; }
  body { min-width: 0; }
  .workspace { transform: scale(.78); transform-origin: top left; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}