/* The Dashboard. Lite's Periode and Sumber filters (lite-merged.html, copied rule for rule in Lite's
   tokens) stay exactly as they were; below them the page is Lacak's own: one navy hero for the money,
   white cards for everything else, gold for revenue and sales, navy for what the platforms report. */
.lacak-dashboard {
  --lite-ink: #172033;
  --lite-muted: #687386;
  --lite-line: #e5e3df;
  --lite-soft: #f7f7f5;
  --lite-blue: #2f62a4;
  --lite-blue-soft: #edf3fb;
  --lite-green: #147a52;
  --lite-green-soft: #edf8f3;
  --dx-navy: #172944;
  --dx-navy-2: #2c3e62;
  --dx-navy-3: #4a5d84;
  --dx-ink: #172033;
  --dx-muted: #5c6a86;
  --dx-faint: #7d889e;
  --dx-line: #e4e8ef;
  --dx-soft: #f5f7fa;
  --dx-gold: #c69749;
  --dx-gold-light: #e4bf78;
  --dx-gold-deep: #86662a;
  --dx-chat: #c9d3e5;
  --dx-good: #1f7a55;
  --dx-good-bg: #e3f3ea;
  --dx-bad: #b4372f;
  --dx-bad-bg: #fbe8e5;
  --dx-warn: #8f5410;
  --dx-warn-bg: #fbeedb;
  --dx-focus: #2f62a4;
}

/* ---------- Header: the title, then the two filters ---------- */
.lacak-dashboard .lacak-dash-head { align-items: center; min-height: 62px; }
.lacak-dashboard .lacak-dash-state { display: grid; min-height: 320px; place-items: center; border: 1px solid var(--db-line); border-radius: 12px; background: #fff; }
.lacak-dashboard .lacak-dash-state.error { display: flex; flex-direction: column; justify-content: center; gap: 12px; }

/* Lite's filter bar (.control-row, .dashboard-filter-*), at Lite's own sizes and in Lite's tokens. */
.lacak-dashboard .control-row { position: relative; display: flex; gap: 9px; }
.lacak-dashboard .dashboard-filter-trigger { min-width: 146px; min-height: 52px; display: grid; grid-template-columns: 28px minmax(0, 1fr) 16px; align-items: center; gap: 9px; border: 1px solid var(--lite-line); border-radius: 11px; background: #fff; padding: 7px 10px; color: var(--lite-ink); text-align: left; cursor: pointer; }
.lacak-dashboard .dashboard-filter-trigger.source { min-width: 205px; max-width: 280px; }
.lacak-dashboard .dashboard-filter-trigger:hover,
.lacak-dashboard .dashboard-filter-trigger[aria-expanded="true"] { border-color: #b9c9df; background: #fbfcfe; }
.lacak-dashboard .dashboard-filter-trigger > svg { width: 21px; height: 21px; color: var(--lite-blue); }
.lacak-dashboard .dashboard-filter-trigger-copy { min-width: 0; display: grid; gap: 2px; }
.lacak-dashboard .dashboard-filter-trigger-copy small { color: var(--lite-muted); font-size: 10px; font-weight: 720; }
.lacak-dashboard .dashboard-filter-trigger-copy b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.lacak-dashboard .dashboard-filter-chevron { width: 14px !important; height: 14px !important; color: var(--lite-muted) !important; transition: transform .16s ease; }
.lacak-dashboard .dashboard-filter-trigger[aria-expanded="true"] .dashboard-filter-chevron { transform: rotate(180deg); }
.lacak-dashboard .dashboard-filter-backdrop { display: none; }
.lacak-dashboard .dashboard-filter-menu { position: absolute; z-index: 30; top: calc(100% + 8px); overflow: hidden; border: 1px solid var(--lite-line); border-radius: 13px; background: #fff; box-shadow: 0 18px 42px rgba(23, 32, 51, .14); }
.lacak-dashboard .dashboard-filter-menu.period { left: 0; width: 280px; }
.lacak-dashboard .dashboard-filter-menu.source { right: 0; width: 360px; max-height: min(560px, calc(100vh - 150px)); overflow-y: auto; }
.lacak-dashboard .dashboard-filter-menu-head,
.lacak-dashboard .dashboard-filter-selected-path { display: none; }
.lacak-dashboard .dashboard-filter-list { padding: 6px; }
.lacak-dashboard .dashboard-filter-option,
.lacak-dashboard .dashboard-source-select { width: 100%; min-height: 40px; display: flex; align-items: center; gap: 9px; border: 0; border-radius: 8px; background: transparent; padding: 6px 10px; color: var(--lite-ink); font-size: 12px; font-weight: 680; text-align: left; cursor: pointer; }
.lacak-dashboard .dashboard-filter-option:hover,
.lacak-dashboard .dashboard-source-select:hover { background: #f5f8fc; }
.lacak-dashboard .dashboard-filter-option.selected { font-weight: 780; }
.lacak-dashboard .dashboard-filter-radio { width: 16px; height: 16px; flex: 0 0 16px; color: #98a2b0; }
.lacak-dashboard .dashboard-filter-divider { height: 1px; margin: 4px 2px; background: var(--lite-line); }
.lacak-dashboard .dashboard-source-select > svg,
.lacak-dashboard .dashboard-source-open > svg { width: 16px; height: 16px; flex: 0 0 16px; }
.lacak-dashboard .dashboard-source-select .source-icon,
.lacak-dashboard .dashboard-source-open .source-icon { fill: none; stroke: #2d68b2; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lacak-dashboard .dashboard-source-select .source-icon.organic { stroke: #219065; }
.lacak-dashboard svg.source-icon-checkbox { width: 16px !important; height: 16px !important; flex: 0 0 16px !important; color: #98a2b0; }
.lacak-dashboard .dashboard-source-tree { padding: 4px 6px 0; }
.lacak-dashboard .dashboard-source-row { position: relative; }
.lacak-dashboard .dashboard-source-row.depth-0 + .dashboard-source-row.depth-0 { border-top: 1px solid var(--lite-line); }
.lacak-dashboard .dashboard-source-line { position: relative; display: flex; align-items: center; }
.lacak-dashboard .dashboard-source-check { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border: 0; border-radius: 7px; background: transparent; padding: 0; cursor: pointer; }
.lacak-dashboard .dashboard-source-check:hover { background: #eef3f9; }
.lacak-dashboard .dashboard-source-open { flex: 1; min-width: 0; min-height: 36px; display: flex; align-items: center; gap: 9px; border: 0; border-radius: 8px; background: transparent; padding: 4px 8px; color: var(--lite-ink); font-size: 12px; font-weight: 680; text-align: left; cursor: pointer; }
.lacak-dashboard .dashboard-source-open:hover { background: #f5f8fc; }
.lacak-dashboard .dashboard-source-open > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lacak-dashboard .dashboard-source-caret { width: 13px !important; height: 13px !important; flex: 0 0 13px !important; margin-left: auto; color: var(--lite-muted); transition: transform .16s ease; }
.lacak-dashboard .dashboard-source-open[aria-expanded="true"] .dashboard-source-caret { transform: rotate(90deg); }
.lacak-dashboard .dashboard-source-row.depth-0 > .dashboard-source-line { min-height: 44px; padding: 4px 6px; }
.lacak-dashboard .dashboard-source-row.depth-0 > .dashboard-source-line .dashboard-source-select,
.lacak-dashboard .dashboard-source-row.depth-0 > .dashboard-source-line .dashboard-source-open { font-size: 13px; font-weight: 770; }
.lacak-dashboard .dashboard-source-row.depth-1 { margin-left: 26px; padding-left: 16px; }
.lacak-dashboard .dashboard-source-row.depth-1 > .dashboard-source-line { min-height: 38px; padding: 2px 6px 2px 0; }
.lacak-dashboard .dashboard-source-row.depth-1 > .dashboard-source-line .dashboard-source-select { min-height: 34px; }
.lacak-dashboard .dashboard-source-row.depth-1::before { content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; border-left: 1px solid #d8e1ed; }
.lacak-dashboard .dashboard-source-row.depth-1:last-child::before { bottom: calc(100% - 20px); }
.lacak-dashboard .dashboard-source-row.depth-1 > .dashboard-source-line::before { content: ""; position: absolute; left: -16px; top: 50%; width: 16px; border-top: 1px solid #d8e1ed; }
.lacak-dashboard .dashboard-source-row.depth-0:not(.leaf) { padding-bottom: 4px; }
.lacak-dashboard .dashboard-filter-actions { position: sticky; bottom: 0; display: flex; justify-content: space-between; gap: 9px; margin-top: 4px; border-top: 1px solid var(--lite-line); background: #fff; padding: 10px 12px; }
.lacak-dashboard .dashboard-filter-actions .btn { min-height: 38px; padding: 0 13px; border-color: var(--lite-line); font-size: 10px; font-weight: 780; }
.lacak-dashboard .dashboard-filter-actions .btn.primary { flex: 1; border-color: var(--navy); }
.lacak-dashboard .dashboard-filter-actions .btn:disabled { cursor: not-allowed; opacity: .48; }
.lacak-dashboard .period-inline { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 8px 2px; }
.lacak-dashboard .period-field { display: grid; gap: 6px; color: var(--lite-muted); font-size: 10px; font-weight: 760; }
.lacak-dashboard .period-field input { min-width: 0; min-height: 42px; border: 1px solid var(--lite-line); border-radius: 9px; background: #fff; padding: 0 10px; color: var(--lite-ink); font: inherit; font-size: 11px; }
.lacak-dashboard .period-error { grid-column: 1 / -1; margin: 0; color: #a53d3d; font-size: 11px; }
.lacak-dashboard .period-error:empty { display: none; }

/* ---------- The page under the filters ---------- */
.lacak-dashboard { font-variant-numeric: tabular-nums; }
.lacak-dashboard .dx-body { display: grid; gap: 14px; color: var(--dx-ink); }
.lacak-dashboard .dx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lacak-dashboard :is(.dx-toggle, .dx-button, .dx-chart):focus-visible { outline: 2px solid var(--dx-focus); outline-offset: 2px; }
/* A label with an explanation is a Tab stop of its own; on the navy hero its ring is gold. */
.lacak-dashboard [data-def]:focus { outline: none; }
.lacak-dashboard [data-def]:focus-visible { outline: 2px solid var(--dx-focus); outline-offset: 2px; border-radius: 4px; }
.lacak-dashboard .dx-hero [data-def]:focus-visible { outline-color: var(--dx-gold-light); }
/* The figure's column name in a phone card; on a wide screen the header carries it. */
.lacak-dashboard .dx-cell-label { display: none; }
.lacak-dashboard .dx-card { min-width: 0; border: 1px solid var(--dx-line); border-radius: 16px; background: #fff; }
.lacak-dashboard .dx-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; padding: 18px 22px 0; }
.lacak-dashboard .dx-card-head h2 { margin: 0; color: var(--dx-ink); font-size: 16px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.lacak-dashboard .dx-card-head p { margin: 2px 0 0; color: var(--dx-muted); font-size: 12.5px; }
.lacak-dashboard .dx-empty { display: grid; gap: 4px; justify-items: center; padding: 40px 22px; text-align: center; }
.lacak-dashboard .dx-empty b { color: var(--dx-ink); font-size: 14px; font-weight: 650; }
.lacak-dashboard .dx-empty span { max-width: 52ch; color: var(--dx-muted); font-size: 13px; line-height: 1.5; }
.lacak-dashboard .dx-button { min-height: 40px; border: 1px solid #d3d9e4; border-radius: 10px; background: #fff; padding: 0 16px; color: var(--dx-ink); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.lacak-dashboard .dx-button:hover { border-color: var(--dx-navy); }
.lacak-dashboard .dx-state { display: flex; min-height: 300px; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--dx-ink); font-size: 14px; }
.lacak-dashboard .dx-tail { padding: 10px 22px 14px; }
.lacak-dashboard .dx-tail.list-state { display: flex; align-items: center; justify-content: center; gap: 12px; }

/* The change against the period before: an arrow and words, never colour alone. */
.lacak-dashboard .dx-change { display: inline-flex; align-items: center; gap: 4px; color: var(--dx-muted); font-size: 12px; font-weight: 650; white-space: nowrap; }
.lacak-dashboard .dx-change svg { width: 9px; height: 9px; fill: currentColor; }
.lacak-dashboard .dx-change.good { color: var(--dx-good); }
.lacak-dashboard .dx-change.bad { color: var(--dx-bad); }

/* ---------- The top: the hero and four tiles ---------- */
.lacak-dashboard .dx-top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; }
/* The hero: the one navy surface on the page. ROAS left in gold; the ledger right. */
.lacak-dashboard .dx-hero { display: grid; grid-template-columns: minmax(150px, auto) minmax(0, 1fr); align-items: stretch; min-height: 196px; border-radius: 18px; background: var(--dx-navy); color: #fff; overflow: hidden; }
.lacak-dashboard .dx-roas { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 24px 30px 24px 28px; border-right: 1px solid rgba(255, 255, 255, .1); }
.lacak-dashboard .dx-roas-label,
.lacak-dashboard .dx-ledger-label { color: #b9c4d8; font-size: 13px; font-weight: 600; }
.lacak-dashboard .dx-roas strong { color: var(--dx-gold-light); font-size: 60px; font-weight: 750; letter-spacing: -.035em; line-height: 1; }
.lacak-dashboard .dx-hero.is-under .dx-roas strong { color: #f0c9a0; }
.lacak-dashboard .dx-hero .dx-change { color: #b9c4d8; }
.lacak-dashboard .dx-hero .dx-change.good { color: #8fdcb4; }
.lacak-dashboard .dx-hero .dx-change.bad { color: #f6aaa2; }
.lacak-dashboard .dx-ledger { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 24px 28px; min-width: 0; }
.lacak-dashboard .dx-ledger-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label change" "amount amount" "track track"; align-items: baseline; gap: 2px 12px; }
.lacak-dashboard .dx-ledger-label { grid-area: label; }
.lacak-dashboard .dx-ledger-row > b { grid-area: amount; font-size: 26px; font-weight: 720; letter-spacing: -.02em; line-height: 1.15; }
.lacak-dashboard .dx-ledger-row > .dx-change { grid-area: change; justify-self: end; }
.lacak-dashboard .dx-track { grid-area: track; position: relative; height: 12px; margin-top: 8px; border-radius: 6px; background: rgba(255, 255, 255, .08); }
.lacak-dashboard .dx-track > i { display: block; height: 100%; border-radius: inherit; }
.lacak-dashboard .dx-track.spend > i { background: #8fa3c7; }
.lacak-dashboard .dx-track.revenue > i { background: var(--dx-gold); }
.lacak-dashboard .dx-hero-empty { margin: 0; color: #b9c4d8; font-size: 14px; }

.lacak-dashboard .dx-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lacak-dashboard .dx-tile { display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: 3px; border: 1px solid var(--dx-line); border-radius: 14px; background: #fff; padding: 14px 18px; }
.lacak-dashboard .dx-tile-label { color: var(--dx-muted); font-size: 12.5px; font-weight: 600; }
.lacak-dashboard .dx-tile strong { color: var(--dx-ink); font-size: 25px; font-weight: 730; letter-spacing: -.02em; line-height: 1.15; }
/* Room inside the note's clip for the focus ring of the count it holds. */
.lacak-dashboard .dx-tile-note { overflow: hidden; margin: -3px; padding: 3px; color: var(--dx-faint); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

/* Loading: the page's shape, still. */
.lacak-dashboard .is-ghost { border: 0; background: #eceff4; }
.lacak-dashboard .dx-skeleton .dx-tile { min-height: 92px; }
.lacak-dashboard .dx-ghost-table { padding: 10px 0; }
.lacak-dashboard .dx-ghost-table i { display: block; height: 14px; margin: 18px 22px; border-radius: 6px; background: #eef1f5; }
.lacak-dashboard .dx-ghost-table i:nth-child(odd) { width: 62%; }

/* ---------- The ad table ---------- */
.lacak-dashboard .dx-ads { overflow: hidden; }
.lacak-dashboard .dx-table-scroll { overflow-x: auto; scrollbar-width: thin; }
.lacak-dashboard .dx-table { width: 100%; min-width: 1060px; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.lacak-dashboard .dx-table thead th { padding: 10px 8px; border-top: 1px solid var(--dx-line); border-bottom: 1px solid var(--dx-line); background: var(--dx-soft); color: var(--dx-muted); font-size: 11.5px; font-weight: 650; line-height: 1.25; text-align: right; vertical-align: bottom; }
.lacak-dashboard .dx-table td { white-space: nowrap; }
.lacak-dashboard .dx-table thead th:not(.dx-col-name) { white-space: normal; }
.lacak-dashboard .dx-table th.dx-col-name { position: sticky; left: 0; z-index: 1; width: 236px; min-width: 220px; max-width: 250px; padding-left: 14px; text-align: left; }
.lacak-dashboard .dx-table thead th.dx-col-name { z-index: 2; padding-left: 20px; }
.lacak-dashboard .dx-table thead .dx-col-colStatus { text-align: left; }
.lacak-dashboard .dx-table tbody :is(th, td),
.lacak-dashboard .dx-table tfoot :is(th, td) { height: 50px; padding: 0 8px; border-bottom: 1px solid #eef0f4; background: #fff; text-align: right; }
.lacak-dashboard .dx-table tbody th.dx-col-name,
.lacak-dashboard .dx-table tfoot th.dx-col-name { padding-left: 14px; text-align: left; }
.lacak-dashboard .dx-table td.dx-col-colStatus { text-align: left; }
.lacak-dashboard .dx-table td:last-child,
.lacak-dashboard .dx-table th:last-child { padding-right: 20px; }
.lacak-dashboard .dx-table tbody tr:hover > * { background: #f8fafd; }
.lacak-dashboard .dx-row.lv-0 > * { font-weight: 650; }
.lacak-dashboard .dx-row.lv-0:not(:first-child) > * { border-top: 1px solid var(--dx-line); }
.lacak-dashboard .dx-row.lv-2 > *,
.lacak-dashboard .dx-row.lv-3 > * { background: #fcfcfd; }
.lacak-dashboard .dx-row.lv-3 > * { height: 44px; color: #47546b; }
.lacak-dashboard .dx-name { display: flex; min-width: 0; align-items: center; gap: 7px; padding-left: calc(var(--depth, 0) * 16px); }
.lacak-dashboard .dx-name-text { display: -webkit-box; min-width: 0; overflow: hidden; white-space: normal; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.lacak-dashboard .dx-name-text small { display: block; color: var(--dx-muted); font-size: 11px; font-weight: 600; }
.lacak-dashboard .dx-toggle,
.lacak-dashboard .dx-toggle-space { display: grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; }
.lacak-dashboard .dx-toggle { border: 0; border-radius: 7px; background: transparent; padding: 0; color: var(--dx-muted); cursor: pointer; }
.lacak-dashboard .dx-toggle:hover { background: #edf1f7; color: var(--dx-ink); }
.lacak-dashboard .dx-toggle svg { width: 14px; height: 14px; transition: transform .18s ease; }
.lacak-dashboard .dx-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.lacak-dashboard .dx-mark { display: grid; width: 20px; height: 20px; flex: 0 0 20px; place-items: center; color: var(--dx-muted); }
.lacak-dashboard .dx-mark svg { width: 18px; height: 18px; }
.lacak-dashboard .dx-mark .dx-glyph,
.lacak-dashboard .dx-mark .source-icon { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lacak-dashboard .dx-mark .source-icon.organic { color: var(--dx-good); }
.lacak-dashboard .dx-status,
.lacak-dashboard .dx-pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 3px 8px; font-size: 11.5px; font-weight: 650; line-height: 1.3; white-space: nowrap; }
.lacak-dashboard .dx-status::before,
.lacak-dashboard .dx-pill::before { content: ""; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: currentColor; }
.lacak-dashboard .dx-status.active,
.lacak-dashboard .dx-pill.met { background: var(--dx-good-bg); color: var(--dx-good); }
.lacak-dashboard .dx-status.paused,
.lacak-dashboard .dx-pill.plain { background: #eef0f4; color: #5f6c80; }
.lacak-dashboard .dx-status.linked { background: #eaf0f8; color: var(--dx-navy-2); }
.lacak-dashboard .dx-status.failed,
.lacak-dashboard .dx-pill.between { background: var(--dx-warn-bg); color: var(--dx-warn); }
.lacak-dashboard .dx-pill.below { background: var(--dx-bad-bg); color: var(--dx-bad); }
.lacak-dashboard .dx-pill { font-size: 12px; font-weight: 700; }
.lacak-dashboard .dx-na { color: #a1a9b6; }
.lacak-dashboard .dx-roas-cell { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
.lacak-dashboard .dx-mini { position: relative; width: 40px; height: 6px; border-radius: 3px; background: #edf0f5; }
.lacak-dashboard .dx-mini i { display: block; height: 100%; border-radius: inherit; }
.lacak-dashboard .dx-mini i.met { background: var(--dx-good); }
.lacak-dashboard .dx-mini i.between { background: #d99a3c; }
.lacak-dashboard .dx-mini i.below { background: var(--dx-bad); }
.lacak-dashboard .dx-mini i.plain { background: #8f9bb0; }
/* The target's control on the ROAS header: a quiet gear after the column's name, muted until the pointer
   or the keyboard reaches it; with a target set it takes the ink. On a phone the header is gone, so the
   total's card carries it beside its ROAS. */
.lacak-dashboard .dx-col-colRoas .dx-head { vertical-align: middle; }
.lacak-dashboard .dx-target-button { display: inline-grid; width: 24px; height: 24px; margin: -4px -4px -4px 2px; place-items: center; border: 0; border-radius: 7px; background: transparent; padding: 0; color: #98a2b3; vertical-align: middle; cursor: pointer; }
.lacak-dashboard .dx-target-button.is-set { color: var(--dx-muted); }
.lacak-dashboard .dx-target-button:hover { background: #e8edf4; color: var(--dx-ink); }
.lacak-dashboard .dx-target-button:focus-visible { outline: 2px solid var(--dx-focus); outline-offset: 1px; }
.lacak-dashboard .dx-target-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lacak-dashboard .dx-table td .dx-target-button { display: none; }
/* The 1× mark on the mini bar. */
.lacak-dashboard .dx-mini s { position: absolute; top: -3px; bottom: -3px; border-left: 1.5px solid var(--dx-navy); opacity: .55; }
.lacak-dashboard .dx-total > * { height: 54px !important; border-top: 1.5px solid #d6dce7; border-bottom: 0 !important; background: var(--dx-soft) !important; font-weight: 720; }
.lacak-dashboard .dx-total .dx-name { padding-left: 6px; }

/* ---------- Corong konversi ---------- */
.lacak-dashboard .dx-fgroups { display: grid; padding: 4px 0 8px; }
.lacak-dashboard .dx-fgroup { --lab: 176px; --val: 132px; min-width: 0; padding: 8px 22px 16px; }
.lacak-dashboard .dx-fgroup-head { display: flex; align-items: center; gap: 8px; margin: 8px 0 12px; color: var(--dx-ink); font-size: 13.5px; font-weight: 700; }
.lacak-dashboard .dx-fgroup-mark { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 6px; background: var(--dx-soft); color: var(--dx-muted); }
.lacak-dashboard .dx-fgroup-mark svg,
.lacak-dashboard .dx-fgroup-mark img { width: 15px; height: 15px; }
.lacak-dashboard .dx-fgroup-mark .source-icon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lacak-dashboard .dx-step,
.lacak-dashboard .dx-rate { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr) var(--val); align-items: center; gap: 16px; }
.lacak-dashboard .dx-step { min-height: 52px; }
.lacak-dashboard .dx-step-label { display: grid; justify-items: start; gap: 4px; }
.lacak-dashboard .dx-step-label b { color: var(--dx-ink); font-size: 14px; font-weight: 700; line-height: 1.25; }
.lacak-dashboard .dx-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--dx-line); border-radius: 999px; background: var(--dx-soft); padding: 2px 8px 2px 5px; color: var(--dx-navy-3); font-size: 11px; font-weight: 650; white-space: nowrap; }
.lacak-dashboard .dx-chip svg,
.lacak-dashboard .dx-chip img { width: 13px; height: 13px; }
.lacak-dashboard .dx-chip.lacak { border-color: #eddcb8; background: #fbf6ec; color: var(--dx-gold-deep); }
.lacak-dashboard .dx-step-bar { display: flex; justify-content: center; }
.lacak-dashboard .dx-step-bar i { display: block; height: 42px; border-radius: 10px; }
.lacak-dashboard .dx-step-bar i.navy-0 { background: var(--dx-navy); }
.lacak-dashboard .dx-step-bar i.navy-1 { background: var(--dx-navy-2); }
.lacak-dashboard .dx-step-bar i.navy-2 { background: var(--dx-navy-3); }
.lacak-dashboard .dx-step-bar i.gold-soft { background: #e3c992; }
.lacak-dashboard .dx-step-bar i.gold { background: var(--dx-gold); }
.lacak-dashboard .dx-step-value { text-align: right; }
.lacak-dashboard .dx-step-value strong { display: block; color: var(--dx-ink); font-size: 21px; font-weight: 750; letter-spacing: -.02em; line-height: 1.1; }
.lacak-dashboard .dx-step-value span { display: block; color: var(--dx-muted); font-size: 12px; }
/* Between two steps: the line down the bars' centre, and the pill on it. */
.lacak-dashboard .dx-rate { position: relative; min-height: 30px; }
.lacak-dashboard .dx-rate::before { content: ""; position: absolute; top: -4px; bottom: -4px; left: calc(var(--lab) + 16px + (100% - var(--lab) - var(--val) - 32px) / 2); border-left: 1px solid #d9dfe9; }
.lacak-dashboard .dx-rate > span { position: relative; z-index: 1; grid-column: 2; justify-self: center; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--dx-line); border-radius: 999px; background: #fff; padding: 3px 10px; color: var(--dx-muted); font-size: 12px; white-space: nowrap; }
.lacak-dashboard .dx-rate b { color: var(--dx-ink); font-weight: 700; }
.lacak-dashboard .dx-rate em { margin-left: 2px; border-left: 1px solid currentColor; padding-left: 8px; font-style: normal; font-weight: 700; }
.lacak-dashboard .dx-rate.is-leak > span { border-color: #e6c48c; background: var(--dx-warn-bg); color: var(--dx-warn); }
.lacak-dashboard .dx-rate.is-leak b { color: var(--dx-warn); }

/* ---------- The chart and revenue by source ---------- */
.lacak-dashboard .dx-pair { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; gap: 14px; }
/* The card's two averages side by side, each its name over its figure, as the first one was. */
.lacak-dashboard .dx-chart-figures { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 28px; }
.lacak-dashboard .dx-chart-figure { display: grid; justify-items: end; text-align: right; }
.lacak-dashboard .dx-chart-figure span { color: var(--dx-muted); font-size: 12px; }
.lacak-dashboard .dx-chart-figure strong { color: var(--dx-ink); font-size: 18px; font-weight: 720; letter-spacing: -.01em; }
.lacak-dashboard .dx-chart-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 12px 22px 0; color: var(--dx-muted); font-size: 12px; }
.lacak-dashboard .dx-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lacak-dashboard .dx-chart-legend i,
.lacak-dashboard .dx-tip i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--dx-chat); }
.lacak-dashboard :is(.dx-chart-legend, .dx-tip) .sales i { background: var(--dx-gold); }
.lacak-dashboard .dx-chart-legend .line i { width: 16px; height: 2px; border-radius: 1px; background: var(--dx-navy); }
.lacak-dashboard .dx-tip .line i { height: 2px; background: var(--dx-navy); }
/* Rata-rata respons: the lighter navy of the same family, dashed, so it parts from the first-response line
   without its colour alone. Its key is the same dash. */
.lacak-dashboard :is(.dx-chart-legend, .dx-tip) .line-all i { height: 2px; border-radius: 1px; background: repeating-linear-gradient(90deg, var(--dx-navy-3) 0 4px, transparent 4px 6px); }
.lacak-dashboard .dx-chart-legend .line-all i { width: 16px; }
.lacak-dashboard .dx-chart { position: relative; margin: 6px 12px 14px 10px; border-radius: 10px; touch-action: pan-y; }
.lacak-dashboard .dx-chart-svg svg { display: block; overflow: visible; }
.lacak-dashboard .dx-chart text { fill: var(--dx-faint); font-size: 11px; }
.lacak-dashboard .dx-chart .dx-axis-unit { font-size: 10.5px; }
.lacak-dashboard .dx-grid line { stroke: #eef0f4; }
.lacak-dashboard .dx-bars .chats { fill: var(--dx-chat); }
.lacak-dashboard .dx-bars .sales { fill: var(--dx-gold); }
.lacak-dashboard .dx-line { fill: none; stroke: var(--dx-navy); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.lacak-dashboard .dx-dots circle { fill: #fff; stroke: var(--dx-navy); stroke-width: 1.6; }
.lacak-dashboard .dx-focus-col { fill: rgba(23, 41, 68, .06); }
.lacak-dashboard .dx-dot-focus { fill: var(--dx-navy); stroke: #fff; stroke-width: 2; }
.lacak-dashboard .dx-line.is-all { stroke: var(--dx-navy-3); stroke-width: 1.8; stroke-dasharray: 5 3; }
.lacak-dashboard .dx-dots.is-all circle { stroke: var(--dx-navy-3); stroke-width: 1.4; }
.lacak-dashboard .dx-dot-focus.is-all { fill: var(--dx-navy-3); }
/* The CRM's chart tooltip (pages-dashboard.css .db-chart-tooltip) in the hover card (lacak.css :root --hover-card-*). */
.lacak-dashboard .dx-tip { position: absolute; z-index: 3; top: 4px; left: var(--tx, 0); display: grid; gap: 5px; min-width: 236px; border: var(--hover-card-edge); border-radius: var(--hover-card-radius); background: var(--hover-card-bg); padding: 10px 12px; color: var(--hover-card-ink); font-size: var(--hover-card-size); pointer-events: none; box-shadow: var(--hover-card-shadow); }
.lacak-dashboard .dx-tip strong { margin-bottom: 3px; padding-bottom: 6px; border-bottom: 1px solid #eef0f4; color: var(--hover-card-title); font-size: var(--hover-card-title-size); font-weight: 650; }
.lacak-dashboard .dx-tip span { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 8px; column-gap: 8px; }
.lacak-dashboard .dx-tip b { padding-left: 14px; }
.lacak-dashboard .dx-tip b { color: var(--dx-ink); font-weight: 700; text-align: right; }
/* Each response line's definition, under its name and value, in the legend's own words. */
.lacak-dashboard .dx-chart > .dx-tip { max-width: 300px; }
/* On a phone the card takes the chart's whole width, so the definitions wrap short and it stays inside the chart. */
@media (max-width: 560px) { .lacak-dashboard .dx-chart > .dx-tip { width: 100%; min-width: 0; max-width: none; } }
.lacak-dashboard .dx-tip span small { grid-column: 2 / -1; margin-top: -3px; color: var(--dx-muted); font-size: 11.5px; line-height: 1.4; }


/* Pendapatan per sumber: the level control in the head (the CRM's card select, .db-card-filter, at the
   page's type size), the pie centred in the card, one quiet line under it. Beside the chart the card is
   as tall as the chart's card and the pie sits in the middle of the room it has. */
.lacak-dashboard .dx-level { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 14px; align-items: center; gap: 4px; min-width: 112px; max-width: 200px; height: 34px; margin-top: -4px; padding: 0 9px 0 10px; border: 1px solid var(--dx-line); border-radius: 9px; background: #fff; color: var(--dx-ink); }
.lacak-dashboard .dx-level:hover { border-color: #c9d3e2; }
.lacak-dashboard .dx-level:focus-within { border-color: var(--dx-focus); box-shadow: 0 0 0 3px rgba(47, 98, 164, .15); }
.lacak-dashboard .dx-level select { min-width: 0; width: 100%; height: 100%; padding: 0; border: 0; outline: 0; appearance: none; background: transparent; color: inherit; font: inherit; font-size: 12.5px; font-weight: 650; text-overflow: ellipsis; cursor: pointer; }
.lacak-dashboard .dx-level svg { width: 14px; height: 14px; color: var(--dx-muted); pointer-events: none; }
.lacak-dashboard .dx-sources { display: flex; flex-direction: column; align-self: stretch; }
.lacak-dashboard .dx-pie-body { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 14px; padding: 16px 22px 18px; }
.lacak-dashboard .dx-pie { position: relative; display: flex; justify-content: center; width: max-content; margin: 0 auto; border-radius: 50%; touch-action: pan-y; }
.lacak-dashboard .dx-pie:focus-visible { outline: 2px solid var(--dx-focus); outline-offset: 4px; }
.lacak-dashboard .dx-pie > svg { display: block; overflow: visible; }
.lacak-dashboard .dx-pie > svg path { stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; cursor: default; }
.lacak-dashboard .dx-pie .dx-tip { top: var(--ty, 4px); min-width: 0; width: max-content; max-width: 260px; }
.lacak-dashboard .dx-pie .dx-tip strong { display: grid; gap: 2px; }
.lacak-dashboard .dx-pie .dx-tip strong em { color: var(--dx-muted); font-size: 11.5px; font-style: normal; font-weight: 600; }
.lacak-dashboard .dx-pie .dx-tip strong small { color: var(--dx-muted); font-size: 11.5px; font-weight: 500; }
.lacak-dashboard .dx-pie .dx-tip span:not(.revenue) i { background: transparent; }
/* The line under the pie, as the wedge's card reads it: a muted name for the line, then the wedge's colour,
   its mark and its source, then its share. Where one line is too narrow the source goes under the name,
   and only a source too long for a line of its own is cut short; the share never is. */
.lacak-dashboard .dx-pie-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 8px; margin: 0; color: var(--dx-muted); font-size: 12.5px; line-height: 1.4; white-space: nowrap; }
.lacak-dashboard .dx-pie-pick { display: flex; min-width: 0; max-width: 100%; align-items: center; gap: 8px; }
.lacak-dashboard .dx-pie-note strong { flex: none; color: var(--dx-ink); font-weight: 700; }
.lacak-dashboard .dx-pie-note i { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.lacak-dashboard .dx-pie-name { display: flex; min-width: 0; align-items: center; gap: 6px; }
.lacak-dashboard .dx-pie-name .dx-mark { width: 16px; height: 16px; flex-basis: 16px; }
.lacak-dashboard .dx-pie-name .dx-mark svg { width: 15px; height: 15px; }
.lacak-dashboard .dx-pie-name b { overflow: hidden; color: var(--dx-ink); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.lacak-dashboard .dx-pie-name small { flex: none; color: var(--dx-muted); font-size: 11px; font-weight: 600; }

/* ---------- Narrower screens ---------- */
@media (max-width: 1100px) {
  .lacak-dashboard .lacak-dash-head { flex-wrap: wrap; }
}
/* One platform in Sumber: its group takes the card's whole width. Two stand side by side on a wide screen. */
.lacak-dashboard .dx-fgroups.count-1 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1240px) {
  .lacak-dashboard .dx-fgroups.count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lacak-dashboard .dx-fgroups.count-2 .dx-fgroup { --lab: 150px; --val: 112px; }
  .lacak-dashboard .dx-fgroups.count-2 .dx-fgroup + .dx-fgroup { border-left: 1px solid var(--dx-line); }
}
@media (max-width: 1239px) {
  .lacak-dashboard .dx-fgroups.count-2 .dx-fgroup + .dx-fgroup { border-top: 1px solid var(--dx-line); }
}
@media (max-width: 1180px) {
  .lacak-dashboard .dx-top,
  .lacak-dashboard .dx-pair { grid-template-columns: minmax(0, 1fr); }
  .lacak-dashboard .dx-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1040px) {
  .lacak-dashboard .dx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Lite's connection banners, above the page ---------- */
.lacak-dashboard .connection-banners { display: grid; gap: 8px; margin-bottom: 18px; }
.lacak-dashboard .connection-banner { display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid #efd5d5; border-radius: 11px; background: #fff1f1; padding: 13px 15px; color: #8f3131; }
.lacak-dashboard .connection-banner.ads { border-color: #f0dfbd; background: #fff7e7; color: #95600b; }
.lacak-dashboard .connection-banner b { display: block; font-size: 11px; }
.lacak-dashboard .connection-banner p { margin: 3px 0 0; font-size: 10px; line-height: 1.45; }
.lacak-dashboard .connection-banner .btn { flex: 0 0 auto; min-height: 38px; border: 1px solid currentColor; border-radius: 9px; background: transparent; padding: 0 13px; color: inherit; font-size: 10px; font-weight: 780; cursor: pointer; }
.lacak-dashboard .connection-banner .btn:hover { background: rgba(255, 255, 255, .6); }
.lacak-dashboard .connection-banner .btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* In the page's type: a readable title and line, the repair on the right. */
.lacak-dashboard .connection-banners { gap: 10px; margin-bottom: 16px; }
.lacak-dashboard .connection-banner { position: relative; border-radius: 14px; padding: 14px 16px 14px 20px; overflow: hidden; }
.lacak-dashboard .connection-banner::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: currentColor; }
.lacak-dashboard .connection-banner b { font-size: 13.5px; font-weight: 700; }
.lacak-dashboard .connection-banner p { margin-top: 2px; font-size: 12.5px; }
.lacak-dashboard .connection-banner .btn { min-height: 40px; border-radius: 10px; padding: 0 14px; font-size: 12.5px; font-weight: 700; }

/* Phone: Lite's filters become bottom sheets (Lite's 760px block, as it was). */
@media (max-width: 760px) {
  .lacak-dashboard .lacak-dash-head { align-items: stretch; }
  .lacak-dashboard .lacak-dash-head h1 { font-size: 24px; }
  .lacak-dashboard .control-row { width: 100%; gap: 8px; }
  .lacak-dashboard .dashboard-filter-trigger,
  .lacak-dashboard .dashboard-filter-trigger.source { min-width: 0; max-width: none; min-height: 50px; flex: 1; grid-template-columns: 24px minmax(0, 1fr) 13px; gap: 7px; padding: 7px 9px; }
  .lacak-dashboard .dashboard-filter-trigger.source { flex: 1.35; }
  .lacak-dashboard .dashboard-filter-trigger > svg { width: 19px; height: 19px; }
  .lacak-dashboard .dashboard-filter-trigger-copy small { font-size: 9px; }
  .lacak-dashboard .dashboard-filter-trigger-copy b { font-size: 11px; }
  .lacak-dashboard .dashboard-filter-backdrop { position: fixed; z-index: 140; inset: 0; display: block; border: 0; background: rgba(23, 32, 51, .38); }
  .lacak-dashboard .dashboard-filter-menu,
  .lacak-dashboard .dashboard-filter-menu.period,
  .lacak-dashboard .dashboard-filter-menu.source { position: fixed; z-index: 141; top: auto; right: 0; bottom: 0; left: 0; width: 100%; max-height: min(82vh, 650px); overflow-y: auto; border-width: 1px 0 0; border-radius: 18px 18px 0 0; padding-bottom: calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -18px 50px rgba(23, 32, 51, .18); }
  .lacak-dashboard .dashboard-filter-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 18px 13px; border-bottom: 1px solid var(--lite-line); }
  .lacak-dashboard .dashboard-filter-menu-head h2 { margin: 0; font-size: 17px; }
  .lacak-dashboard .dashboard-filter-menu-close { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--lite-line); border-radius: 9px; background: #fff; color: var(--lite-ink); }
  .lacak-dashboard .dashboard-filter-menu-close svg { width: 17px; height: 17px; }
  .lacak-dashboard .dashboard-filter-menu.source { padding-bottom: 0; }
  .lacak-dashboard .dashboard-filter-list { padding: 8px 12px; }
  .lacak-dashboard .dashboard-source-tree { margin-top: 8px; border-top: 1px solid var(--lite-line); padding: 4px 12px 0; }
  .lacak-dashboard .dashboard-filter-option,
  .lacak-dashboard .dashboard-source-select { min-height: 46px; }
  .lacak-dashboard .dashboard-source-open { min-height: 44px; }
  .lacak-dashboard .dashboard-source-check { width: 38px; height: 38px; flex-basis: 38px; }
  .lacak-dashboard svg.source-icon-checkbox { width: 18px !important; height: 18px !important; flex: 0 0 18px !important; }
  .lacak-dashboard .dashboard-source-row.depth-0 > .dashboard-source-line { min-height: 52px; padding: 4px 2px; }
  .lacak-dashboard .dashboard-source-row.depth-0 > .dashboard-source-line .dashboard-source-select,
  .lacak-dashboard .dashboard-source-row.depth-0 > .dashboard-source-line .dashboard-source-open { min-height: 46px; }
  .lacak-dashboard .dashboard-source-row.depth-1 { margin-left: 28px; padding-left: 18px; }
  .lacak-dashboard .dashboard-source-row.depth-1 > .dashboard-source-line { min-height: 46px; padding-right: 4px; }
  .lacak-dashboard .dashboard-source-row.depth-1:last-child::before { bottom: calc(100% - 23px); }
  .lacak-dashboard .dashboard-source-row.depth-1 > .dashboard-source-line::before { left: -18px; width: 18px; }
  .lacak-dashboard .dashboard-filter-actions { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
  .lacak-dashboard .dashboard-filter-actions .btn { min-height: 46px; }
  /* Lite's selected path: what Terapkan would apply, above the tree. */
  .lacak-dashboard .dashboard-filter-selected-path { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 9px; margin: 12px 12px 2px; border-radius: 10px; background: #f4f7fb; padding: 10px 12px; color: var(--lite-muted); font-size: 10px; line-height: 1.55; }
  .lacak-dashboard .dashboard-filter-selected-path > svg { width: 18px; height: 18px; color: var(--lite-blue); }
  .lacak-dashboard .dashboard-filter-selected-path b { display: block; margin-bottom: 2px; color: var(--lite-ink); font-size: 11px; }
  .lacak-dashboard .connection-banner { align-items: stretch; flex-direction: column; gap: 10px; }
  .lacak-dashboard .connection-banner .btn { width: 100%; min-height: 44px; }
}

/* Phone: the hero first, the tiles two by two, the table's rows as cards, the funnel stacked. */
@media (max-width: 760px) {
  .lacak-dashboard .dx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lacak-dashboard .dx-tile { padding: 12px 14px; }
  .lacak-dashboard .dx-tile strong { font-size: 21px; }
  .lacak-dashboard .dx-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .lacak-dashboard .dx-roas { padding: 20px 20px 4px; border-right: 0; }
  .lacak-dashboard .dx-roas strong { font-size: 48px; }
  .lacak-dashboard .dx-ledger { gap: 14px; padding: 14px 20px 20px; }
  .lacak-dashboard .dx-ledger-row > b { font-size: 22px; }
  .lacak-dashboard .dx-card-head { flex-wrap: wrap; padding: 16px 16px 0; }
  .lacak-dashboard .dx-chart-figures { justify-content: flex-start; }
  .lacak-dashboard .dx-chart-figure { justify-items: start; text-align: left; }

  /* The table becomes cards: the name, then spend, revenue and ROAS, then the rest small. */
  .lacak-dashboard .dx-ads { padding-top: 10px; }
  .lacak-dashboard .dx-table td .dx-target-button { position: absolute; top: 4px; left: 40px; display: inline-grid; width: 32px; height: 32px; margin: 0; }
  .lacak-dashboard .dx-table td.dx-col-colRoas { position: relative; }
  .lacak-dashboard .dx-table-scroll { overflow: visible; padding: 0 10px 12px; }
  .lacak-dashboard .dx-table,
  .lacak-dashboard .dx-table :is(tbody, tfoot) { display: block; min-width: 0; }
  .lacak-dashboard .dx-table thead { display: none; }
  .lacak-dashboard .dx-table tr { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin: 0 0 8px; overflow: hidden; border: 1px solid var(--dx-line); border-radius: 12px; background: #fff; }
  .lacak-dashboard .dx-table tr.lv-1 { margin-left: 12px; }
  .lacak-dashboard .dx-table tr.lv-2 { margin-left: 24px; }
  .lacak-dashboard .dx-table tr.lv-3 { margin-left: 36px; }
  .lacak-dashboard .dx-table :is(tbody, tfoot) :is(th, td) { height: auto !important; border: 0 !important; background: transparent !important; padding: 7px 12px 8px; text-align: left; white-space: normal; }
  .lacak-dashboard .dx-table tbody tr:hover > * { background: transparent; }
  .lacak-dashboard .dx-table th.dx-col-name { position: static; grid-column: 1 / -1; width: auto; min-width: 0; max-width: none; padding: 10px 104px 10px 6px !important; border-bottom: 1px solid #eef0f4 !important; }
  .lacak-dashboard .dx-name { padding-left: 0; font-size: 14px; }
  .lacak-dashboard .dx-name-text { white-space: normal; line-height: 1.3; }
  .lacak-dashboard .dx-toggle { width: 40px; height: 40px; flex-basis: 40px; margin: -6px -4px -6px 0; }
  .lacak-dashboard .dx-toggle-space { width: 8px; flex-basis: 8px; }
  .lacak-dashboard .dx-table td.dx-col-colStatus { position: absolute; z-index: 2; top: 14px; right: 10px; padding: 0 !important; }
  .lacak-dashboard .dx-table .dx-cell-label { display: table; margin-bottom: 2px; color: var(--dx-muted); font-size: 10.5px; font-weight: 600; line-height: 1.3; }
  .lacak-dashboard .dx-table td { order: 4; grid-column: span 3; padding: 6px 8px 7px !important; background: var(--dx-soft) !important; font-size: 12.5px; font-weight: 600 !important; }
  .lacak-dashboard .dx-table td:is(.dx-col-colSpend, .dx-col-colRevenue, .dx-col-colRoas) { order: 1; grid-column: span 4; padding: 10px 12px 10px !important; background: #fff !important; font-size: 15px; font-weight: 720 !important; }
  .lacak-dashboard .dx-table td:is(.dx-col-colSpend, .dx-col-colRevenue, .dx-col-colRoas) .dx-cell-label { font-size: 11px; }
  .lacak-dashboard .dx-table td:is(.dx-col-colChats, .dx-col-colSales, .dx-col-colImpressions, .dx-col-colReach, .dx-col-colClicks, .dx-col-colConversations, .dx-col-colCostPerConversation):first-of-type { padding-left: 12px !important; }
  .lacak-dashboard .dx-table td:is(.dx-col-colChats, .dx-col-colSales) { order: 2; }
  .lacak-dashboard .dx-table td:is(.dx-col-colImpressions) { order: 3; }
  .lacak-dashboard .dx-table td:last-child { padding-right: 12px; }
  .lacak-dashboard .dx-table td:last-of-type { padding-bottom: 12px; }
  .lacak-dashboard .dx-roas-cell { flex-direction: column-reverse; align-items: flex-start; justify-content: flex-start; gap: 7px; width: 100%; }
  .lacak-dashboard .dx-mini { width: 100%; max-width: 88px; }
  .lacak-dashboard .dx-total { background: var(--dx-soft) !important; }
  .lacak-dashboard .dx-total th.dx-col-name { padding-left: 12px !important; }

  .lacak-dashboard .dx-fgroup { padding: 4px 16px 14px; }
  .lacak-dashboard .dx-step { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label value" "bar bar"; gap: 6px 12px; padding: 4px 0; }
  .lacak-dashboard .dx-step-label { grid-area: label; }
  .lacak-dashboard .dx-step-value { grid-area: value; }
  .lacak-dashboard .dx-step-bar { grid-area: bar; justify-content: flex-start; }
  .lacak-dashboard .dx-step-bar i { height: 12px; border-radius: 6px; }
  .lacak-dashboard .dx-rate { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 8px 0; }
  .lacak-dashboard .dx-rate::before { display: none; }
  .lacak-dashboard .dx-rate > span { grid-column: 1; justify-self: start; white-space: normal; }

  .lacak-dashboard .dx-chart-legend { padding: 10px 16px 0; }
  .lacak-dashboard .dx-chart { margin: 6px 6px 12px 2px; }
  .lacak-dashboard .dx-pie-body { padding: 14px 16px 16px; }
}
@media (max-width: 400px) {
  .lacak-dashboard .dx-tile strong { font-size: 19px; }
}


@keyframes lacak-fade-in { from { opacity: 0; } }
@keyframes lacak-sheet-in { from { transform: translateY(24px); opacity: .75; } }

/* ---------- Motion: Pelanggan's one family (lacak.css :root --m-*) ----------
   Only what answers a person's action moves, and only to show what changed: in on the decelerating curve,
   out on the accelerating one; hover 120ms, a surface 160ms, a move 220ms, an exit 140ms. Nothing moves on load. */

/* Hover: rows, triggers, toggles and pills change colour over 120ms; nothing lifts. */
.lacak-dashboard :where(button, .dx-table tbody tr > *, .dx-status, .dx-pill, .dx-chip, .dx-rate > span) { transition: background-color var(--m-hover) ease, border-color var(--m-hover) ease, color var(--m-hover) ease; }
.lacak-dashboard .dashboard-filter-chevron,
.lacak-dashboard .dashboard-source-caret,
.lacak-dashboard .dx-toggle svg { transition: transform var(--m-move) var(--m-in); }

/* The filters' menus: on a wide screen the mockup's menu arrival (Lite's account-menu-in: 4px down and
   .985, to rest, 160ms); on a phone Lite's sheet rising (sheet-in). Closing, each leaves the way it came. */
@media (min-width: 761px) {
  .lacak-dashboard .dashboard-filter-menu.period { transform-origin: top left; }
  .lacak-dashboard .dashboard-filter-menu.source { transform-origin: top right; }
  .lacak-dashboard .dashboard-filter-menu.is-entering { animation: dx-menu-in var(--m-pop) var(--m-in) both; }
  .lacak-dashboard .dashboard-filter-menu.is-leaving { animation: dx-menu-out var(--m-exit) var(--m-out) forwards; pointer-events: none; }
}
@media (max-width: 760px) {
  .lacak-dashboard .dashboard-filter-menu.is-entering { animation: lacak-sheet-in var(--m-move) var(--m-in) both; }
  .lacak-dashboard .dashboard-filter-menu.is-leaving { animation: dx-sheet-out var(--m-exit) var(--m-out) forwards; pointer-events: none; }
  .lacak-dashboard .dashboard-filter-backdrop.is-entering { animation: lacak-fade-in var(--m-pop) ease both; }
  .lacak-dashboard .dashboard-filter-backdrop.is-leaving { animation: dx-fade-out var(--m-exit) ease forwards; pointer-events: none; }
}
@keyframes dx-menu-in { from { opacity: 0; transform: translateY(-4px) scale(.985); } }
@keyframes dx-menu-out { to { opacity: 0; transform: translateY(-4px) scale(.985); } }
@keyframes dx-sheet-out { to { transform: translateY(100%); } }
@keyframes dx-fade-out { to { opacity: 0; } }

/* A new Periode or Sumber: a figure whose value changed comes up from faint, rising 4px; a bar moves from
   the width it had; a funnel for other platforms fades in whole. */
.lacak-dashboard .is-settling { animation: dx-settle var(--m-move) var(--m-in) both; }
@keyframes dx-settle { from { opacity: .3; transform: translateY(4px); } }
.lacak-dashboard :is(.dx-track > i, .dx-mini i) { transition: width var(--m-move) var(--m-in), background-color var(--m-hover) ease; }
.lacak-dashboard .dx-fgroups.is-arriving { animation: lacak-fade-in var(--m-pop) ease both; }

/* Rows: a row that opens brings its children in under it (fading, 4px from above, 160ms) while the rows
   and cards below glide down (220ms); closing, the children fade up and out (140ms), then what was below
   glides up into their place. A source that moves up or down its list glides there. */
.lacak-dashboard [data-flip].is-flipping { transition: transform var(--m-move) var(--m-in); }
.lacak-dashboard tr.is-arriving > *, .lacak-dashboard [data-flip].is-arriving:not(tr) { animation: dx-arrive var(--m-pop) var(--m-in) both; }
.lacak-dashboard tr.is-leaving > * { animation: dx-leave var(--m-exit) var(--m-out) forwards; }
@keyframes dx-arrive { from { opacity: 0; transform: translateY(-4px); } }
@keyframes dx-leave { to { opacity: 0; transform: translateY(-4px); } }
.lacak-dashboard .dx-tail, .lacak-dashboard .dx-tail.list-state { animation: lacak-fade-in var(--m-pop) ease both; }

/* The chart: the hover column, the response dot and the card fade in (the card rising 7px, the CRM's
   .db-chart-tooltip, 120ms); from one bucket to the next they glide there in the same 120ms. A new filter
   moves each bar from its old height (220ms); new buckets fade in drawn anew. */
.lacak-dashboard .dx-focus-col { opacity: 0; transition: opacity var(--m-hover) ease, transform var(--m-hover) var(--m-in); }
.lacak-dashboard .dx-dot-focus { opacity: 0; transition: opacity var(--m-hover) ease, transform var(--m-hover) var(--m-in); }
.lacak-dashboard .dx-chart.is-pointing .dx-focus-col,
.lacak-dashboard .dx-chart.is-pointing .dx-dot-focus.shown { opacity: 1; }
.lacak-dashboard .dx-tip { opacity: 0; visibility: hidden; transform: translateY(var(--hover-card-rise)); transition: opacity var(--m-hover) ease, transform var(--m-hover) ease, left var(--m-hover) var(--m-in), visibility 0s linear var(--m-hover); }
.lacak-dashboard .dx-chart.is-pointing .dx-tip { opacity: 1; visibility: visible; transform: none; transition: opacity var(--m-hover) ease, transform var(--m-hover) var(--m-in), left var(--m-hover) var(--m-in), visibility 0s; }
.lacak-dashboard .dx-chart .no-glide { transition: opacity var(--m-hover) ease, transform var(--m-hover) var(--m-in), visibility 0s !important; }
.lacak-dashboard .dx-chart .dx-focus-col.no-glide, .lacak-dashboard .dx-chart .dx-dot-focus.no-glide { transition: opacity var(--m-hover) ease !important; }
.lacak-dashboard .dx-bars rect { transition: y var(--m-move) var(--m-in), height var(--m-move) var(--m-in); }
.lacak-dashboard .dx-line { transition: d var(--m-move) var(--m-in); }
.lacak-dashboard .dx-dots circle { transition: cx var(--m-move) var(--m-in), cy var(--m-move) var(--m-in); }
.lacak-dashboard .dx-chart-svg .is-arriving { animation: lacak-fade-in var(--m-pop) ease both; }

/* The pie: a wedge reached by the pointer, the keyboard or its legend row lifts 7px out along its middle
   and casts a soft shadow (120ms, decelerating); it settles back the same way. Its card is the chart's,
   arriving and gliding as the chart's does. A new level or filter fades the pie and legend in drawn anew. */
.lacak-dashboard .dx-pie > svg path { transition: transform var(--m-hover) var(--m-in), filter var(--m-hover) ease; }
.lacak-dashboard .dx-pie > svg path.is-lifted { transform: translate(var(--lx), var(--ly)); filter: drop-shadow(0 4px 6px rgba(23, 41, 68, .28)); }
.lacak-dashboard .dx-pie > svg path.is-whole { transform-origin: 116px 116px; }
.lacak-dashboard .dx-pie > svg path.is-whole.is-lifted { transform: scale(var(--lg)); }
.lacak-dashboard .dx-pie .dx-tip { transition: opacity var(--m-hover) ease, transform var(--m-hover) ease, left var(--m-hover) var(--m-in), top var(--m-hover) var(--m-in), visibility 0s linear var(--m-hover); }
.lacak-dashboard .dx-pie.is-pointing .dx-tip { opacity: 1; visibility: visible; transform: none; transition: opacity var(--m-hover) ease, transform var(--m-hover) var(--m-in), left var(--m-hover) var(--m-in), top var(--m-hover) var(--m-in), visibility 0s; }
.lacak-dashboard .dx-pie .dx-tip.no-glide { transition: opacity var(--m-hover) ease, transform var(--m-hover) var(--m-in), visibility 0s !important; }
.lacak-dashboard .dx-pie-body.is-arriving { animation: lacak-fade-in var(--m-pop) ease both; }

/* A connection banner arriving or going opens or closes its height (220ms) as it fades, so the page
   below moves rather than jumps. */
.lacak-dashboard .connection-banners.is-opening { overflow: hidden; animation: dx-banner-open var(--m-move) var(--m-in) both; }
.lacak-dashboard .connection-banners.is-going { overflow: hidden; animation: dx-banner-close var(--m-move) var(--m-out) forwards; }
@keyframes dx-banner-open { from { height: var(--from); margin-bottom: var(--gap-from, 16px); opacity: 0; } to { height: var(--to); margin-bottom: 16px; opacity: 1; } }
@keyframes dx-banner-close { from { height: var(--from); margin-bottom: 16px; opacity: 1; } to { height: 0; margin-bottom: 0; opacity: 0; } }

/* ---------- The explanation tooltip (dashboard.js def) ----------
   The hover card itself (lacak.css :root --hover-card-*), the CRM's chart card for a label: the name in ink
   above how it is counted, at most 264px; it fades in and rises 7px over 120ms with no wait, and glides from
   one label to the next. */
.dx-def { position: fixed; z-index: 262; top: 0; left: 0; display: grid; gap: 3px; width: max-content; max-width: 264px; padding: 9px 12px 10px; border: var(--hover-card-edge); border-radius: var(--hover-card-radius); background: var(--hover-card-bg); box-shadow: var(--hover-card-shadow); color: var(--hover-card-ink); font-size: var(--hover-card-size); font-variant-numeric: tabular-nums; line-height: var(--hover-card-leading); pointer-events: none; opacity: 0; visibility: hidden; transform: translate(var(--x, 0), calc(var(--y, 0) + var(--hover-card-rise))); transition: opacity var(--m-hover) ease, transform var(--m-hover) ease, visibility 0s linear var(--m-hover); }
.dx-def.shown { opacity: 1; visibility: visible; transform: translate(var(--x, 0), var(--y, 0)); transition: opacity var(--m-hover) ease, transform var(--m-hover) var(--m-in), visibility 0s; }
.dx-def b { color: var(--hover-card-title); font-size: var(--hover-card-title-size); font-weight: 650; }

/* ---------- Empty states: the CRM's form with its mark, as Pelanggan's (lacak.css .lacak-empty) ---------- */
.lacak-dashboard .lacak-empty { min-height: 0; padding: 38px 24px 34px; }
.lacak-dashboard .lacak-empty strong { color: var(--dx-ink); font-size: 14px; font-weight: 650; }
.lacak-dashboard .lacak-empty > span:last-child { max-width: 46ch; font-size: 13px; line-height: 1.5; }
.lacak-dashboard .dx-chart-card .lacak-empty { padding: 62px 24px 64px; }
/* No sale yet: the empty mark in the middle of the card, as the pie is. */
.lacak-dashboard .dx-sources > .lacak-empty { flex: 1; align-content: center; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  /* Every transition and animation on the Dashboard is off: a new filter, a row or a banner shows its end at once. */
  .lacak-dashboard *, .lacak-dashboard *::before, .lacak-dashboard *::after, .dx-def { animation: none !important; transition: none !important; }
}