/* Bundle Recommendation (#page-bundle).

   Deliberately the DOI Hyper-Monitor's visual language — same tokens, same nav,
   chips, KPI tiles, panels and table rhythm. The two pages are read one after
   the other (DOI says which SKUs are stuck, this says what to do about them),
   so a second look would only make the pair feel like two products.

   What is new here is the pair cell: every row carries two SKUs, and each needs
   its code, tier, stock cover and its OWN tags. Hanging the tags off the end of
   the row is what the Slack version had to stop doing — the reader could not
   tell whether "stok tipis" was about the SKU being pushed or the anchor
   carrying it.

   The three class colours (green/blue/amber) are the same values the chart
   uses, validated together for colour-vision separation against a white
   surface. If one changes, both change. */

#page-bundle *{margin:0;padding:0;box-sizing:border-box}
#page-bundle{background:var(--bg,#F6F7F9);color:#22303c;font-family:'Nunito Sans',system-ui,-apple-system,sans-serif;line-height:1.5;
  --green:#7CBA43;--green-d:#5f9a30;--blue:#0F4583;--navy:#0A2E58;--ink:#0A2E58;
  --t1:#22303c;--t2:#5c6b78;--t3:#8a97a3;--card:#fff;--border:#e3eae6;--soft:#eef2f7;
  --red:#d64545;--amber:#f5a623;--orange:#e8743b;
  /* decision classes — shared with the chart, see BundleRecommendationPage.KELAS */
  --k-a:#5f9a30;--k-b:#2f6fb5;--k-c:#c6780f}
#page-bundle h1,#page-bundle h2,#page-bundle .kpi .val{font-family:'Quicksand','Nunito Sans',system-ui,sans-serif}
#page-bundle .wrap{max-width:1400px;margin:0 auto;padding:22px 26px 40px}

/* ---- top nav (identical rules to #page-doi) ---- */
#page-bundle .dm-nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 0 6px}
#page-bundle .dm-brand{display:flex;align-items:center;gap:10px;margin-right:6px}
#page-bundle .dm-brand img{height:38px;width:auto;display:block}
#page-bundle .dm-tabs{display:flex;gap:4px;background:#eef2f7;border-radius:12px;padding:5px}
#page-bundle .dm-tab{font-family:inherit;font-size:13px;font-weight:700;border:none;background:transparent;color:var(--t2);padding:8px 16px;border-radius:9px;cursor:pointer;transition:.15s;white-space:nowrap}
#page-bundle .dm-tab:hover{color:var(--navy)}
#page-bundle .dm-tab.active{background:var(--blue);color:#fff;box-shadow:0 2px 8px rgba(15,69,131,.28)}
#page-bundle .dm-meta{margin-left:auto;text-align:right;font-size:12px;color:var(--t3)}
#page-bundle .dm-meta b{color:var(--navy);font-size:13px}
#page-bundle .br-refresh{font-family:inherit;font-size:11px;font-weight:700;border:1.5px solid var(--border);background:#fff;color:var(--t2);padding:4px 10px;border-radius:8px;cursor:pointer;margin-top:4px}
#page-bundle .br-refresh:hover{border-color:var(--green);color:var(--navy)}

/* ---- heading ---- */
#page-bundle .eyebrow{font-size:11px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:var(--green-d);margin-top:14px}
#page-bundle h1{font-size:33px;font-weight:700;color:var(--navy);letter-spacing:-.5px;margin:8px 0 0}

/* ---- "dasar perhitungan": method before the list, never after ---- */
#page-bundle .br-basis{display:flex;align-items:flex-start;gap:16px;background:#eef4fb;border:1px solid #d5e3f3;border-radius:14px;padding:16px 20px;margin:20px 0 18px;font-size:13px;color:#33455a}
#page-bundle .br-basis .tag{flex-shrink:0;font-size:10.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--blue);background:#dbe8f7;border-radius:20px;padding:5px 12px;margin-top:1px}
#page-bundle .br-basis ol{margin:0;padding-left:18px;display:grid;gap:4px}
#page-bundle .br-basis b{color:var(--navy)}
#page-bundle .br-basis code{font-family:'Quicksand',monospace;font-weight:700;background:#fff;border:1px solid #d5e3f3;border-radius:5px;padding:0 5px;font-size:11.5px}

/* ---- notices: stale cache, stale stock snapshot, scope ---- */
#page-bundle .br-notice{font-size:12.5px;border-radius:11px;padding:11px 15px;margin-bottom:9px;line-height:1.45}
#page-bundle .br-notice.info{background:#eef4fb;border:1px solid #d5e3f3;color:#33455a}
#page-bundle .br-notice.warn{background:#fdf6e3;border:1px solid #f2e4bd;color:#7a6216}
#page-bundle .br-notice b{color:var(--navy)}

/* ---- chips + toolbar ---- */
#page-bundle .br-tools{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin:18px 0 20px}
#page-bundle .dm-chips{display:flex;gap:9px;flex-wrap:wrap;flex:1}
#page-bundle .chip{font-family:inherit;font-size:12.5px;font-weight:700;border:1.5px solid var(--border);background:#fff;color:var(--t2);padding:8px 17px;border-radius:22px;cursor:pointer;transition:.15s}
#page-bundle .chip:hover{border-color:var(--green);color:var(--navy)}
#page-bundle .chip.active{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 2px 8px rgba(15,69,131,.25)}
#page-bundle .br-export{display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-size:12px;font-weight:700;border:1.5px solid var(--border);background:#fff;color:var(--t2);padding:8px 14px;border-radius:10px;cursor:pointer;white-space:nowrap}
#page-bundle .br-export:hover{border-color:var(--green);color:var(--navy)}
#page-bundle .br-export:disabled{opacity:.5;cursor:default}

/* ---- KPI tiles ---- */
#page-bundle .dm-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:22px}
#page-bundle .kpi{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px 20px;box-shadow:0 1px 3px rgba(31,45,58,.04)}
#page-bundle .kpi .val{font-size:27px;font-weight:700;line-height:1.05;color:var(--navy)}
#page-bundle .kpi.blue .val{color:var(--blue)}
#page-bundle .kpi.green .val{color:var(--k-a)}
#page-bundle .kpi.amber .val{color:var(--k-c)}
#page-bundle .kpi.red .val{color:var(--orange)}
#page-bundle .kpi .lab{font-size:12px;color:var(--t2);margin-top:8px;line-height:1.4}
#page-bundle .kpi .lab b{color:var(--navy)}

/* ---- panels ---- */
#page-bundle .panel{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:24px 26px;margin-bottom:22px;box-shadow:0 1px 3px rgba(31,45,58,.04)}
#page-bundle .panel h2{font-size:18px;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:10px}
#page-bundle .panel h2 .dot{width:10px;height:10px;border-radius:50%;background:var(--blue)}
#page-bundle .panel .pdesc{font-size:13px;color:var(--t2);margin:6px 0 18px}
#page-bundle .br-chart-wrap{height:340px}

/* ---- class sections. The stripe is the only place the class colour is load
        bearing outside the chart, so the tables never need a colour legend. --- */
#page-bundle .br-sec{border-left:4px solid var(--border)}
#page-bundle .br-sec.a{border-left-color:var(--k-a)}
#page-bundle .br-sec.b{border-left-color:var(--k-b)}
#page-bundle .br-sec.c{border-left-color:var(--k-c)}
#page-bundle .br-sec-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
#page-bundle .br-sec-count{display:inline-block;min-width:26px;text-align:center;font-size:12px;font-weight:800;color:#fff;background:var(--navy);border-radius:8px;padding:2px 8px;margin-left:2px}
#page-bundle .br-sec-action{font-size:13px;color:var(--t2);margin:8px 0 18px;max-width:900px}

/* ---- the table ---- */
#page-bundle .tbl-scroll{overflow-x:auto}
#page-bundle table.br-tbl{width:100%;border-collapse:collapse;font-size:12.5px;min-width:1220px}
#page-bundle table.br-tbl th{text-align:left;padding:11px 12px;color:var(--t3);font-weight:800;font-size:10px;text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid var(--border);vertical-align:bottom}
#page-bundle table.br-tbl th.r,#page-bundle table.br-tbl td.r{text-align:right}
#page-bundle table.br-tbl th.c,#page-bundle table.br-tbl td.c{text-align:center}
#page-bundle table.br-tbl th.br-sort{cursor:pointer;user-select:none}
#page-bundle table.br-tbl th.br-sort:hover{color:var(--blue)}
#page-bundle table.br-tbl th.br-sort.on{color:var(--blue)}
#page-bundle table.br-tbl .br-arrow{font-size:10px}
#page-bundle table.br-tbl td{padding:13px 12px;border-bottom:1px solid var(--border);color:#2a3742;vertical-align:top}
#page-bundle table.br-tbl tbody tr:hover{background:#f7fafd}
#page-bundle .br-no{color:var(--t3);font-weight:800;font-variant-numeric:tabular-nums}
#page-bundle .br-prin{color:var(--navy);display:block}
#page-bundle .br-sub{display:block;font-size:11px;color:var(--t3);font-weight:600;line-height:1.35}
#page-bundle .br-cover{font-variant-numeric:tabular-nums;font-weight:800;color:var(--navy);white-space:nowrap}

/* pair cell: name / code / tier · cover / tags, one under the other */
#page-bundle .br-sku{min-width:210px;max-width:290px}
#page-bundle .br-sku b{color:var(--navy);font-weight:700;display:block;line-height:1.35}
#page-bundle .br-code{font-family:'Quicksand',monospace;font-weight:700;font-size:11px;color:var(--t2);background:var(--soft);border-radius:5px;padding:1px 6px;display:inline-block;margin-top:3px;letter-spacing:.2px}
#page-bundle .br-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
#page-bundle .br-tag{font-size:9.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;padding:3px 8px;border-radius:6px}
/* "overstock" is not a warning — it is the case bundling exists for. */
#page-bundle .br-tag.good{background:#e2f0d3;color:#4c7a1f}
#page-bundle .br-tag.warn{background:#fdefd4;color:#b9791a}
#page-bundle .br-alt{margin-top:9px;padding-top:8px;border-top:1px dashed var(--border);font-size:11px;color:var(--t2);max-width:290px;line-height:1.45}
#page-bundle .br-alt b{color:var(--t1);font-weight:700}
#page-bundle .br-bundle{min-width:250px;font-size:12px;color:var(--t1);line-height:1.6}
#page-bundle .br-plus{font-weight:800;color:var(--green-d)}
#page-bundle .br-evi{white-space:nowrap}
#page-bundle .br-evi b{font-size:14px;color:var(--navy)}
#page-bundle .br-price b{font-size:14px;color:var(--navy);white-space:nowrap}

/* ---- method: the full calculation, on the page ----
       Two columns so eleven blocks do not become a wall of prose, and each
       block keeps its own heading so a single step can be pointed at. */
/* Column FLOW, not a two-column grid. A grid aligns rows, so a short block
   next to a long one leaves a hole the height of the difference — and these
   blocks differ by a factor of four. Columns let them pack. */
#page-bundle .br-method{columns:2;column-gap:30px}
#page-bundle .br-m{break-inside:avoid;margin-bottom:18px;font-size:12.5px;color:var(--t2);line-height:1.55}
#page-bundle .br-m h3{font-size:12px;font-weight:800;color:var(--navy);letter-spacing:.2px;margin-bottom:5px}
#page-bundle .br-m b{color:var(--t1);font-weight:700}
#page-bundle .br-m code{font-family:'Quicksand',monospace;font-weight:700;background:var(--soft);border-radius:5px;padding:0 5px;font-size:11.5px;color:var(--navy)}
#page-bundle .br-formula{font-family:'Quicksand',monospace;font-size:11.5px;line-height:1.7;color:var(--navy);background:var(--soft);border:1px solid var(--border);border-radius:9px;padding:11px 14px;margin:8px 0;white-space:pre;overflow-x:auto}
#page-bundle .br-src{margin-top:20px;padding-top:14px;border-top:1px solid var(--border);font-size:11.5px;color:var(--t3)}
#page-bundle .br-src code{font-family:'Quicksand',monospace;font-weight:700;color:var(--t2)}
@media(max-width:900px){#page-bundle .br-method{columns:1}}

/* ---- notes, empty and error states ---- */
#page-bundle .br-notes ul{margin:0;padding-left:18px;display:grid;gap:8px;font-size:13px;color:var(--t2);line-height:1.5}
#page-bundle .br-notes b{color:var(--navy)}
#page-bundle .br-notes code{font-family:'Quicksand',monospace;font-weight:700;background:var(--soft);border-radius:5px;padding:0 5px;font-size:11.5px}
#page-bundle .br-empty{padding:34px;text-align:center;color:var(--t3);font-size:14px}
#page-bundle .br-error{background:#fcecec;border:1px solid #f4cccc;border-radius:14px;padding:20px 24px;margin-bottom:22px;font-size:13.5px;color:#7a2f2f}
#page-bundle .br-error b{color:#a82c2c;font-size:15px}
#page-bundle .br-error-msg{font-family:'Quicksand',monospace;font-size:12px;background:#fff;border:1px solid #f4cccc;border-radius:8px;padding:9px 12px;margin:10px 0;word-break:break-word}
#page-bundle .br-error-hint{color:#8a5252;line-height:1.5}
#page-bundle .br-error code{font-family:'Quicksand',monospace;font-weight:700;background:#fff;border-radius:5px;padding:0 5px}
#page-bundle .br-retry{margin-top:14px;font-family:inherit;font-size:12.5px;font-weight:700;border:1.5px solid #e0aeae;background:#fff;color:#a82c2c;padding:8px 16px;border-radius:10px;cursor:pointer}
#page-bundle .br-retry:hover{background:#fff5f5}
#page-bundle .dm-foot{font-size:11.5px;color:var(--t3);line-height:1.6;padding:6px 2px 0}
#page-bundle .dm-foot b{color:var(--t2)}

@media(max-width:1100px){#page-bundle .dm-kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){#page-bundle .dm-kpis{grid-template-columns:1fr}#page-bundle .wrap{padding:16px}#page-bundle h1{font-size:26px}#page-bundle .br-basis{flex-direction:column;gap:10px}}