/* reports-look.css — the platform's reports in respond.io's shape (owner,
 * 2026-09-29, bars in a soft lime - his pick "b"). Scoped to
 * html[data-crm-reports] (reports-look.js). The numbers, filters and
 * downloads are the platform's and unchanged; this is the look only.
 *
 *   page     the whole width instead of a 1024px column
 *   bar      a small name over a hairline; Download a hairline button
 *   cards    one white card per chart / figure, hairline, 8px corners
 *   bars     one soft lime, a stronger one under the pointer
 *   heatmap  pale to strong lime in five steps
 *   Live     a small dot and a grey word, not a coloured chip
 */
html[data-crm-reports] {
  --rp-line: rgba(53, 60, 69, .16);
  --rp-ink: #282e34;
  --rp-muted: #626f7f;
  --rp-card: #ffffff;
  --rp-hover: #f5f6f7;
  --rp-bar: #dcef7e;
  --rp-bar-on: #c2dc34;
  --rp-fb: #1877f2;
}
html.dark[data-crm-reports], html[data-crm-reports].dark, html[data-crm-reports] .dark {
  --rp-line: #2c3138;
  --rp-ink: #e8eaed;
  --rp-muted: #9aa3af;
  --rp-card: #1b1e23;
  --rp-hover: rgba(255, 255, 255, .05);
  --rp-bar: rgba(212, 251, 8, .42);
  --rp-bar-on: rgba(212, 251, 8, .75);
}

/* ---- the page: full width ---- */
html[data-crm-reports] main > div.overflow-auto > div.max-w-5xl { max-width: none; }

/* ---- the bar ---- */
html[data-crm-reports] main section.pt-6.pb-5 {
  padding-top: 12px; padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--rp-line);
}
html[data-crm-reports] main section.pt-6.pb-5 .text-heading-1 { font-size: 16px; font-weight: 600; min-height: 32px; }
/* Download: a hairline button, Facebook blue on hover (the owner's rule). */
html[data-crm-reports] main section.pt-6.pb-5 button {
  height: 32px; background: var(--rp-card) !important; color: var(--rp-ink) !important;
  outline: 1px solid var(--rp-line); outline-offset: -1px; border-radius: 8px; font-size: 14px;
  transition: background-color .15s cubic-bezier(.4, 0, .2, 1), color .15s cubic-bezier(.4, 0, .2, 1);
}
html[data-crm-reports] main section.pt-6.pb-5 button:hover { background: var(--rp-fb) !important; color: #fff !important; outline-color: var(--rp-fb); }
html[data-crm-reports] main section.pt-6.pb-5 button [class*="i-ph-"] { background-color: currentColor; }

/* The period and the other filters: 32px hairline buttons. */
html[data-crm-reports] main button.h-10.bg-n-alpha-2 {
  height: 32px; background: var(--rp-card); outline: 1px solid var(--rp-line); outline-offset: -1px; font-size: 14px;
}
html[data-crm-reports] main button.h-10.bg-n-alpha-2:hover { background: var(--rp-hover); }

/* ---- the cards ---- */
/* Every framed box the platform draws (the Overview cards, the one big box
   around the charts) becomes a white card on a hairline. */
html[data-crm-reports] main div.shadow.outline-1 {
  background: var(--rp-card) !important; box-shadow: none !important;
  outline: 1px solid var(--rp-line) !important; border-radius: 8px;
}
/* The one big box around a page's charts steps back, and each chart in it
   is a card of its own, as theirs are. */
html[data-crm-reports] main div.grid.shadow.outline-1 {
  background: transparent !important; outline: 0 !important; padding: 0 !important;
  gap: 16px; margin-top: 16px;
}
html[data-crm-reports] main div.grid.shadow.outline-1 > div {
  margin: 0 !important; padding: 16px 20px !important;
  background: var(--rp-card); border: 1px solid var(--rp-line); border-radius: 8px;
}

/* Figures: the number large, its change small beside it. */
html[data-crm-reports] main .text-heading-1,
html[data-crm-reports] main div.grid.shadow.outline-1 > div .text-n-slate-12 { color: var(--rp-ink); }

/* ---- the bars: one soft lime ---- */
html[data-crm-reports] .cw-viz-bar__bar { fill: var(--rp-bar); transition: fill .15s cubic-bezier(.4, 0, .2, 1); }
html[data-crm-reports] .cw-viz-bar__bar-group:hover .cw-viz-bar__bar { fill: var(--rp-bar-on); }

/* ---- the heatmap: pale to strong lime ---- */
html[data-crm-reports] .cw-viz-heatmap__cell--level-1 { background-color: #f6fcd9 !important; }
html[data-crm-reports] .cw-viz-heatmap__cell--level-2 { background-color: #ebf8b0 !important; }
html[data-crm-reports] .cw-viz-heatmap__cell--level-3 { background-color: #dcef7e !important; }
html[data-crm-reports] .cw-viz-heatmap__cell--level-4 { background-color: #c9e34a !important; }
html[data-crm-reports] .cw-viz-heatmap__cell--level-5 { background-color: #aac41c !important; }
html.dark[data-crm-reports] .cw-viz-heatmap__cell--level-1 { background-color: rgba(212, 251, 8, .12) !important; }
html.dark[data-crm-reports] .cw-viz-heatmap__cell--level-2 { background-color: rgba(212, 251, 8, .24) !important; }
html.dark[data-crm-reports] .cw-viz-heatmap__cell--level-3 { background-color: rgba(212, 251, 8, .40) !important; }
html.dark[data-crm-reports] .cw-viz-heatmap__cell--level-4 { background-color: rgba(212, 251, 8, .60) !important; }
html.dark[data-crm-reports] .cw-viz-heatmap__cell--level-5 { background-color: rgba(212, 251, 8, .85) !important; }

/* ---- "Live": a dot and a grey word ---- */
html[data-crm-reports] main span.bg-n-teal-3 {
  background: transparent !important; padding: 0 !important; gap: 6px; color: var(--rp-muted);
}
html[data-crm-reports] main span.bg-n-teal-3 > span { color: var(--rp-muted) !important; }
html[data-crm-reports] main span.bg-n-teal-3 > span:first-child:empty,
html[data-crm-reports] main span.bg-n-teal-3 > :first-child:not(:only-child) { background-color: #86d993 !important; }

/* The figure over each chart: large, as theirs (28px); its name 14px grey. */
html[data-crm-reports] main div.grid.shadow.outline-1 > div .text-xl.font-medium { font-size: 28px; line-height: 1.2; font-weight: 500; }
html[data-crm-reports] main div.grid.shadow.outline-1 > div span.text-sm { color: var(--rp-muted); font-weight: 500; }

/* The Overview cards' filters (All Teams, Last 7 days, All Inboxes, download):
   hairline buttons, not grey blocks. */
html[data-crm-reports] main div.shadow.outline-1 button[class*="group-hover:bg-n-alpha-2"],
html[data-crm-reports] main div.shadow.outline-1 button.bg-n-alpha-2 {
  height: 32px; background: var(--rp-card) !important;
  outline: 1px solid var(--rp-line); outline-offset: -1px; border-radius: 8px;
}
html[data-crm-reports] main div.shadow.outline-1 button[class*="group-hover:bg-n-alpha-2"]:hover,
html[data-crm-reports] main div.shadow.outline-1 button.bg-n-alpha-2:hover { background: var(--rp-hover) !important; }

/* A chart with no data: the card shrinks around its one grey line instead of
   holding 288px of empty space (the platform's own words stay, so Arabic
   stays Arabic). */
html[data-crm-reports] main div.mt-4.h-72:has(> div > span.text-n-slate-10:only-child),
html[data-crm-reports] main div.mt-4.h-72 > div.h-72:has(> span.text-n-slate-10:only-child) { height: 88px; }
html[data-crm-reports] main div.h-72 > span.text-n-slate-10:only-child { font-size: 13px; color: var(--rp-muted); }