/* Report look modelled on Power BI: a page list on the left, white visual tiles on a grey canvas,
   KPI cards with an icon chip and ▲/▼ change, Power BI's default series colours.
   Colours here are plain hex/rgba (no color-mix) so the PDF renderer can read them. */
:root {
  --series-1: #118DFF; --series-2: #12239E; --series-3: #E66C37; --series-4: #6B007B;
  --series-5: #E044A7; --series-6: #744EC2; --series-7: #D9B300; --series-8: #D64550;
  --g-male: #118DFF; --g-female: #E044A7;
  --g-male-tint: rgba(17, 141, 255, 0.10); --g-female-tint: rgba(224, 68, 167, 0.10);
  --canvas: #EEEDEC;
  --tile-border: #E1DFDD;
  --tile-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04);
  --nav-active: rgba(168, 18, 62, 0.08);
  --k-users: #118DFF; --k-users-bg: rgba(17, 141, 255, 0.12);
  --k-growth: #1AAB40; --k-growth-bg: rgba(26, 171, 64, 0.12);
  --k-reach: #744EC2; --k-reach-bg: rgba(116, 78, 194, 0.12);
  --k-views: #E66C37; --k-views-bg: rgba(230, 108, 55, 0.12);
  --k-engagement: #E044A7; --k-engagement-bg: rgba(224, 68, 167, 0.12);
  --k-rate: #0F9B9B; --k-rate-bg: rgba(15, 155, 155, 0.12);
  --k-posts: #C29200; --k-posts-bg: rgba(217, 179, 0, 0.14);
  --k-time: #605E5C; --k-time-bg: rgba(96, 94, 92, 0.12);
}
@media (prefers-color-scheme: dark) {
  :root {
    --series-1: #4AA8FF; --series-2: #7C8BF0; --series-3: #F08B5E; --series-4: #C276D0;
    --series-5: #F070C0; --series-6: #A68CF0; --series-7: #E8C640; --series-8: #EE7480;
    --g-male: #4AA8FF; --g-female: #F070C0;
    --g-male-tint: rgba(74, 168, 255, 0.14); --g-female-tint: rgba(240, 112, 192, 0.14);
    --canvas: #0D0F12;
    --tile-border: #2A2E36;
    --tile-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    --nav-active: rgba(226, 69, 111, 0.16);
    --k-users: #4AA8FF; --k-users-bg: rgba(74, 168, 255, 0.16);
    --k-growth: #4CC38A; --k-growth-bg: rgba(76, 195, 138, 0.16);
    --k-reach: #A68CF0; --k-reach-bg: rgba(166, 140, 240, 0.16);
    --k-views: #F08B5E; --k-views-bg: rgba(240, 139, 94, 0.16);
    --k-engagement: #F070C0; --k-engagement-bg: rgba(240, 112, 192, 0.16);
    --k-rate: #4CC0C0; --k-rate-bg: rgba(76, 192, 192, 0.16);
    --k-posts: #E8C640; --k-posts-bg: rgba(232, 198, 64, 0.16);
    --k-time: #A19F9D; --k-time-bg: rgba(161, 159, 157, 0.16);
  }
}

/* ---------- report frame: page list + canvas ---------- */
.hp {
  --font-anthropic-serif: var(--font-sans); /* Power BI uses one clean sans for numbers and titles */
  display: grid; grid-template-columns: 210px minmax(0, 1fr); grid-template-areas: "head head" "nav page";
  gap: 18px 20px; align-items: start;
}
.hp-head { grid-area: head; }
.hp-title { font-weight: 700; letter-spacing: -0.02em; }
.hp-tabs {
  grid-area: nav; position: sticky; top: 76px; display: flex; flex-direction: column; gap: 2px;
  background: var(--panel); border: 1px solid var(--tile-border); border-radius: 8px; padding: 6px; box-shadow: var(--tile-shadow);
}
.hp-tabs::before { content: "Pages"; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); padding: 6px 10px 4px; }
.hp-tabs button { width: 100%; justify-content: flex-start; gap: 10px; border: 0; border-radius: 6px; margin: 0; padding: 9px 10px; font-weight: 500; }
.hp-tabs button:hover { background: var(--hover); }
.hp-tabs button[aria-selected="true"] { background: var(--nav-active); color: var(--fg); font-weight: 600; box-shadow: inset 3px 0 0 var(--crimson); }
.hp-tabs button[data-tab="overview"] .hp-ic, .hp-tabs button[data-tab="competitors"] .hp-ic { display: inline-flex; color: var(--fg-muted); }
.hp-tabs button[aria-selected="true"] .hp-ic { color: var(--crimson); }
.hp-page { grid-area: page; min-width: 0; gap: 16px; }
@media (max-width: 900px) {
  .hp { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "nav" "page"; }
  .hp-tabs { position: static; flex-direction: row; overflow-x: auto; padding: 4px; }
  .hp-tabs::before { display: none; }
  .hp-tabs button { width: auto; flex: none; }
}

/* ---------- visual tiles ---------- */
.hp-card, .hp-tile, .lv-pcard {
  background: var(--panel); border: 1px solid var(--tile-border); border-radius: 8px; box-shadow: var(--tile-shadow);
}
.hp-card { padding: 16px 18px; transition: border-color .15s; }
.hp-card:hover { border-color: var(--fg-muted); }
.hp-h { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; }
.hp-note { font-size: 0.75rem; }
.hp-grid { gap: 16px; }
.hp-tiles { gap: 12px; }

/* KPI cards: icon chip, label, big number, change */
.hp-tile { padding: 14px 16px; }
.hp-kpi { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: start; }
.hp-kpi > :not(.kpi-ic) { grid-column: 2; }
.kpi-ic { grid-row: 1 / span 3; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; }
.kpi-ic svg { width: 21px; height: 21px; }
.kpi-users { color: var(--k-users); background: var(--k-users-bg); }
.kpi-growth { color: var(--k-growth); background: var(--k-growth-bg); }
.kpi-reach { color: var(--k-reach); background: var(--k-reach-bg); }
.kpi-views { color: var(--k-views); background: var(--k-views-bg); }
.kpi-engagement { color: var(--k-engagement); background: var(--k-engagement-bg); }
.kpi-rate { color: var(--k-rate); background: var(--k-rate-bg); }
.kpi-posts { color: var(--k-posts); background: var(--k-posts-bg); }
.kpi-time { color: var(--k-time); background: var(--k-time-bg); }
.hp-tl { font-size: 0.75rem; font-weight: 600; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.hp-tli { text-transform: none; letter-spacing: 0; font-size: 0.95rem; }
.hp-tv { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.hp-tc, .lv-d { font-weight: 600; }
.hp-tc.up, .lv-d.up { color: var(--ok); }
.hp-tc.down, .lv-d.down { color: var(--bad); }

/* ---------- gender pictogram ---------- */
.hp-gender { min-height: 0; }
.gx { display: flex; flex-direction: column; gap: 12px; }
.gx-head { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gx-big { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; min-width: 0; }
.gx-big.gx-male { color: var(--g-male); background: var(--g-male-tint); }
.gx-big.gx-female { color: var(--g-female); background: var(--g-female-tint); }
.gx-bigicon { width: 34px; height: 44px; flex: none; }
.gx-bigicon svg, .gx-figs svg { width: 100%; height: 100%; display: block; }
.gx-bigtxt { display: grid; min-width: 0; }
.gx-bigtxt b { font-size: 1.5rem; font-weight: 700; color: var(--fg); line-height: 1.1; }
.gx-bigtxt span { font-size: 0.75rem; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-row { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 0.75rem; color: var(--fg-muted); }
.gx-label { font-weight: 600; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-figs { display: flex; gap: 2px; }
.gx-figs span { width: 15px; height: 22px; flex: none; }
.gx-m { color: var(--g-male); }
.gx-f { color: var(--g-female); }
.gx-nums { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Realtime Data ---------- */
.lv-pcard { padding: 14px 16px; }
.lv-pcard.on { border-color: var(--crimson); box-shadow: 0 0 0 1px var(--crimson), var(--tile-shadow); }
.lv-big { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.02em; }
.lv-dhead h2 { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.02em; }

/* ---------- PDF stage stays light ---------- */
.pdf-stage {
  --series-1: #118DFF; --series-2: #12239E; --series-3: #E66C37; --series-4: #6B007B;
  --g-male: #118DFF; --g-female: #E044A7; --g-male-tint: rgba(17, 141, 255, 0.10); --g-female-tint: rgba(224, 68, 167, 0.10);
  --tile-border: #E1DFDD; --tile-shadow: none; --nav-active: rgba(168, 18, 62, 0.08);
  --k-users: #118DFF; --k-users-bg: rgba(17, 141, 255, 0.12); --k-growth: #1AAB40; --k-growth-bg: rgba(26, 171, 64, 0.12);
  --k-reach: #744EC2; --k-reach-bg: rgba(116, 78, 194, 0.12); --k-views: #E66C37; --k-views-bg: rgba(230, 108, 55, 0.12);
  --k-engagement: #E044A7; --k-engagement-bg: rgba(224, 68, 167, 0.12); --k-rate: #0F9B9B; --k-rate-bg: rgba(15, 155, 155, 0.12);
  --k-posts: #C29200; --k-posts-bg: rgba(217, 179, 0, 0.14); --k-time: #605E5C; --k-time-bg: rgba(96, 94, 92, 0.12);
}
.pdf-stage .hp { display: flex; }

/* KPI rows: even rows instead of a lone card on the second line */
.hp-tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
@media (min-width: 900px) {
  .hp-tiles:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hp-tiles:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .hp-tiles:has(> :nth-child(7):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1500px) {
  .hp-tiles:has(> :nth-child(6):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .hp-tiles:has(> :nth-child(7):last-child) { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
.hp-tv { overflow-wrap: anywhere; }
.lv { --font-anthropic-serif: var(--font-sans); }
.hp-pt { font-weight: 700; letter-spacing: -0.02em; }
@media (max-width: 900px) {
  .hp-tabs { flex-wrap: nowrap; scrollbar-width: none; }
  .hp-tabs::-webkit-scrollbar { display: none; }
}
@media (max-width: 560px) {
  .hp-tiles, .hp-tiles4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
  .hp-tile { padding: 12px; }
  .hp-kpi { grid-template-columns: minmax(0, 1fr); }
  .hp-kpi > :not(.kpi-ic) { grid-column: 1; }
  .kpi-ic { grid-row: auto; width: 30px; height: 30px; border-radius: 8px; margin-bottom: 4px; }
  .kpi-ic svg { width: 16px; height: 16px; }
  .hp-tv { font-size: 1.35rem; }
  .gx-figs span { width: 12px; height: 18px; }
}

/* Gender blocks sized by share: keep the content compact so narrow blocks still fit */
.gx-head { gap: 6px; }
.gx-big { padding: 10px; gap: 8px; overflow: hidden; }
.gx-bigicon { width: 26px; height: 36px; }