/*
 * Reporting portal (/portal, Client\Apps\Portal): the TTech frame of the portal (rp-), the simulated Power BI reports
 * (pbi-, SimulatedReport.razor and SimVisualChart.razor) and the simulated PI Vision displays (piv-,
 * SimulatedDisplay.razor). Linked by the page shell (Server\Components\App.razor) after app.css: it uses the colours of
 * :root there (--accent, --panel, --border...). The Power BI and PI Vision parts imitate those products on purpose
 * (Segoe UI, Power BI's default theme, PI Vision's dark canvas); the "Simulated ..." badge says they are not the real thing.
 * Dark theme: the portal's frame follows the tokens; the Power BI report stays light (the light tokens are set again
 * inside .pbi, end of this file) and PI Vision is dark in both themes.
 * Copyright (c) 2026 Toupin Technologies Inc. All rights reserved.
 */

/* ==== The portal: departments on the left, the department's reports and the viewer on the right ==== */
.rp {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-height: 0;
}

.rp-depts {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 150px);
  padding: 10px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}
.rp-depts-title {
  padding: 4px 10px 8px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.rp-dept-list { display: flex; min-height: 0; flex: 1; flex-direction: column; gap: 2px; overflow: auto; }
.rp-dept {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 120ms ease;
}
.rp-dept:hover { background: var(--accent-soft); }
.rp-dept .rp-dept-icon { color: var(--accent); }
.rp-dept-name { flex: 1; min-width: 0; line-height: 1.25; }
.rp-dept-count {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--chip);
  color: var(--muted);
  font-size: 0.72rem;
  text-align: center;
}
.rp-dept.active { background: var(--accent); color: var(--on-accent); }
.rp-dept.active .rp-dept-icon { color: var(--brand-gold); }
.rp-dept.active .rp-dept-count { background: color-mix(in srgb, var(--on-accent) 22%, transparent); color: var(--on-accent); }
.rp-config {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px 2px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}
.rp-config:hover { color: var(--accent); }

.rp-main { display: flex; min-width: 0; flex-direction: column; gap: 10px; }

.rp-head {
  padding: 12px 16px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}
.rp-head-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; }
.rp-title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.25rem; font-weight: 900; }
.rp-title .rp-title-icon { color: var(--accent); }
.rp-mine {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 0.8rem;
  font-weight: 700;
}

.rp-tabs { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 10px; }
.rp-tab-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rp-tab-group-title {
  white-space: nowrap;
  margin-right: 2px;
  color: var(--faint);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.rp-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #f1f0eb;
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background 120ms ease;
}
.rp-tab:hover { background: #e6e3d8; }
.rp-tab.kind-pbi .mud-icon-root { color: #c49a00; }
.rp-tab.kind-pi .mud-icon-root { color: #1f7a9c; }
.rp-tab.kind-web .mud-icon-root { color: var(--accent); }
.rp-tab.active { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.rp-tab.active .mud-icon-root { color: var(--brand-gold); }
.rp-tab.disabled { background: var(--panel-2); color: var(--faint); cursor: not-allowed; }
.rp-tab.disabled .mud-icon-root { color: var(--faint); }
.rp-tab .rp-tab-external { margin-left: -2px; font-size: 0.95rem; opacity: 0.6; }

.rp-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  padding: 0 4px;
  color: var(--muted);
  font-size: 0.8rem;
}
.rp-contact { color: var(--text); font-weight: 700; }
.rp-contact-title { margin-right: 4px; color: var(--muted); font-weight: 600; }
.rp-contact-title::after { content: ":"; }
.rp-meta-spacer { flex: 1; }
.rp-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.rp-action:hover { border-color: var(--accent); color: var(--accent); }

.rp-viewer { min-width: 0; }
.rp-viewer.framed {
  height: calc(100vh - 290px);
  min-height: 480px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}
.rp-viewer.framed iframe { display: block; width: 100%; height: 100%; border: 0; }
.rp-empty { padding: 40px 16px; border: 1px dashed var(--border); border-radius: var(--radius); background: var(--panel); }

/* The badge of every simulated report or display */
.sim-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px 2px 6px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

/* ==== Simulated Power BI report ==== */
.pbi {
  overflow: hidden;
  border: 1px solid #d2d0ce;
  border-radius: 6px;
  background: #eaeaea;
  box-shadow: var(--shadow);
  color: #252423;
  font-family: "Segoe UI", "Segoe UI Web", Roboto, Arial, sans-serif;
}
.pbi-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 4px 12px;
  background: #252423;
  color: #ffffff;
  font-size: 0.82rem;
}
.pbi-logo { display: inline-flex; align-items: flex-end; gap: 2px; width: 18px; height: 18px; }
.pbi-logo i { display: block; width: 4px; border-radius: 1px; background: #f2c811; }
.pbi-logo i:nth-child(1) { height: 8px; opacity: 0.7; }
.pbi-logo i:nth-child(2) { height: 13px; opacity: 0.85; }
.pbi-logo i:nth-child(3) { height: 18px; }
.pbi-chrome-app { font-weight: 700; }
.pbi-chrome-sep { opacity: 0.4; }
.pbi-chrome-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbi-chrome-spacer { flex: 1; }
.pbi-badge { background: #f2c811; color: #252423; }

.pbi-canvas { display: flex; flex-direction: column; gap: 12px; padding: 14px; transition: opacity 150ms ease; }
.pbi-refreshing { opacity: 0.55; }
.pbi-loading { min-height: 320px; }
.pbi-skeleton-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pbi-skeleton { height: 92px; border-radius: 4px; background: linear-gradient(90deg, #f3f2f1, #ffffff, #f3f2f1); background-size: 200% 100%; animation: pbi-shine 1.2s linear infinite; }
@keyframes pbi-shine { to { background-position: -200% 0; } }

.pbi-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 20px;
  padding: 14px 16px;
  border-radius: 4px;
  background: linear-gradient(100deg, #12239e 0%, #118dff 100%);
  color: #ffffff;
}
.pbi-heading h2 { margin: 0; font-size: 1.35rem; font-weight: 600; }
.pbi-sub { margin-top: 3px; font-size: 0.78rem; opacity: 0.85; }
.pbi-slicers { display: flex; flex-wrap: wrap; gap: 8px; }
.pbi-slicer { display: flex; min-width: 130px; flex-direction: column; gap: 2px; }
.pbi-slicer-label { font-size: 0.68rem; font-weight: 600; opacity: 0.85; }
.pbi-slicer-value {
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 2px;
  background: #ffffff;
  color: #252423;
  font: inherit;
  font-size: 0.8rem;
}
select.pbi-slicer-value { cursor: pointer; }
select.pbi-slicer-value:disabled { cursor: default; opacity: 1; }

.pbi-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.pbi-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 10px 12px 6px;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.pbi-card-label { overflow: hidden; color: #605e5c; font-size: 0.74rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.pbi-card-value { color: #252423; font-size: 1.45rem; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.pbi-card-unit { color: #605e5c; font-size: 0.78rem; font-weight: 400; }
.pbi-card-target { display: flex; flex-wrap: wrap; gap: 0 8px; font-size: 0.72rem; }
.pbi-card-target.good .pbi-delta { color: #107c10; font-weight: 700; }
.pbi-card-target.bad .pbi-delta { color: #c4314b; font-weight: 700; }
.pbi-target { color: #8a8886; }
.pbi-spark { width: 100%; height: 22px; margin-top: 4px; }
.pbi-spark polyline { fill: none; stroke: #118dff; stroke-width: 1.6; vector-effect: non-scaling-stroke; }

.pbi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pbi-visual {
  min-width: 0;
  padding: 10px 12px 6px;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.pbi-visual.span-2 { grid-column: span 2; }
.pbi-visual.span-3 { grid-column: 1 / -1; }
.pbi-visual-title { margin: 0 0 4px; color: #252423; font-size: 0.86rem; font-weight: 600; }
.pbi-visual .empty { padding: 30px 0; }

.pbi-table-wrap { max-height: 360px; overflow: auto; }
.pbi-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.pbi-table th {
  position: sticky;
  top: 0;
  padding: 6px 8px;
  border-bottom: 2px solid #252423;
  background: #ffffff;
  color: #252423;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.pbi-table td { padding: 5px 8px; border-bottom: 1px solid #edebe9; }
.pbi-table tbody tr:nth-child(even) td { background: #faf9f8; }
.pbi-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pbi-row-label { font-weight: 600; white-space: nowrap; }

.pbi-pages {
  display: flex;
  align-items: stretch;
  gap: 2px;
  min-height: 34px;
  padding: 0 8px;
  overflow-x: auto;
  border-top: 1px solid #d2d0ce;
  background: #f3f2f1;
  font-size: 0.8rem;
}
.pbi-page {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-bottom: 3px solid transparent;
  color: #605e5c;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.pbi-page:hover { background: #e1dfdd; }
.pbi-page.active { border-bottom-color: #f2c811; background: #ffffff; color: #252423; }
.pbi-pages-spacer { flex: 1; }
.pbi-pages-info { display: inline-flex; align-items: center; color: #8a8886; white-space: nowrap; }

/* ==== Simulated PI Vision display ==== */
.piv {
  overflow: hidden;
  border: 1px solid #1b1d20;
  border-radius: 6px;
  background: #2b2d31;
  box-shadow: var(--shadow);
  color: #e6e6e6;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
}
.piv-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 4px 12px;
  border-bottom: 1px solid #111214;
  background: #1e2023;
  font-size: 0.82rem;
}
.piv-logo {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: conic-gradient(#21a0d2 0 120deg, #8cc63f 0 240deg, #f7941d 0);
}
.piv-app { font-weight: 700; }
.piv-sep { opacity: 0.35; }
.piv-bar-title { overflow: hidden; color: #c9cdd2; text-overflow: ellipsis; white-space: nowrap; }
.piv-spacer { flex: 1; }
.piv-badge { background: #21a0d2; color: #ffffff; }

.piv-canvas { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.piv-canvas.stale { opacity: 0.6; }
.piv-wait { align-items: center; justify-content: center; min-height: 320px; color: #9aa0a6; }
.piv-error { padding: 6px 10px; border-left: 3px solid #ff5f56; background: rgba(255, 95, 86, 0.12); color: #ffb4ae; font-size: 0.82rem; }
.piv-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.piv-title { color: #ffffff; font-size: 1.15rem; font-weight: 600; }
.piv-site { color: #9aa0a6; font-size: 0.82rem; }

.piv-values { display: flex; flex-wrap: wrap; gap: 10px; }
.piv-big {
  display: flex;
  min-width: 150px;
  flex-direction: column;
  padding: 8px 12px;
  border: 1px solid #3c4046;
  border-radius: 3px;
  background: #222427;
}
.piv-big-label { color: #9aa0a6; font-size: 0.72rem; }
.piv-big-value { color: #7cfc8a; font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.piv-big-value small { color: #9aa0a6; font-size: 0.75rem; font-weight: 400; }
.piv-big.warning { border-color: #f5c400; }
.piv-big.warning .piv-big-value { color: #f5c400; }
.piv-big.alarm { border-color: #ff4d4d; background: rgba(255, 77, 77, 0.12); }
.piv-big.alarm .piv-big-value { color: #ff6b6b; }

.piv-row-title { margin-top: 4px; color: #9aa0a6; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
.piv-row { overflow-x: auto; border: 1px solid #383b40; border-radius: 3px; background: #26282c; }
/* Natural size (180 px a unit), smaller when the row is narrower, never below 760 px (phones scroll the row) */
.piv-svg { display: block; max-width: 100%; height: auto; font-family: "Segoe UI", Roboto, Arial, sans-serif; }
.piv-flow { stroke: #4fa3e0; stroke-width: 3; }
.piv-arrow { fill: #4fa3e0; }
.piv-unit-name { fill: #e6e6e6; font-size: 12.5px; font-weight: 600; }
.piv-symbol polygon, .piv-symbol rect, .piv-symbol circle, .piv-symbol ellipse, .piv-symbol path {
  fill: #5a6068;
  stroke: #b8c0c8;
  stroke-width: 1.4;
}
.piv-symbol .piv-detail, .piv-symbol .piv-frame, .piv-symbol .piv-belt, .piv-symbol .piv-liquid, .piv-symbol .piv-ray { fill: none; stroke: #b8c0c8; stroke-width: 1.4; }
.piv-symbol .piv-frame { stroke-width: 3; }
.piv-symbol .piv-belt { stroke: #8f969e; stroke-width: 7; }
.piv-symbol .piv-liquid { stroke: #4fa3e0; stroke-dasharray: 4 3; }
.piv-symbol .piv-water { fill: #2f6f9f; stroke: none; }
.piv-symbol .piv-froth { fill: #8d939b; }
.piv-symbol .piv-blade { fill: #8d939b; }
.piv-symbol .piv-glass { fill: #7fb7d8; }
.piv-symbol .piv-wheel { fill: #1e2023; }
.piv-symbol .piv-ray { stroke: #f5c400; stroke-width: 2; }
.piv-unit.stopped .piv-symbol polygon, .piv-unit.stopped .piv-symbol rect, .piv-unit.stopped .piv-symbol circle { fill: #3f4349; stroke: #6f757c; }
.piv-unit.warning .piv-symbol > g > :first-child { stroke: #f5c400; stroke-width: 2.4; }
.piv-unit.alarm .piv-symbol > g > :first-child { stroke: #ff4d4d; stroke-width: 2.4; }
.piv-dot { fill: #3ddc84; stroke: #1e2023; stroke-width: 1.5; }
.piv-unit.warning .piv-dot { fill: #f5c400; }
.piv-unit.alarm .piv-dot { fill: #ff4d4d; }
.piv-unit.stopped .piv-dot { fill: #7a7f86; }
.piv-label { fill: #9aa0a6; font-size: 11px; }
.piv-value-box { fill: #1b1d20; stroke: #3c4046; stroke-width: 1; }
.piv-value-box.warning { fill: #f5c400; stroke: #f5c400; }
.piv-value-box.alarm { fill: #e53935; stroke: #e53935; }
.piv-value-box.stopped { fill: #3f4349; }
.piv-value { fill: #7cfc8a; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.piv-value.warning { fill: #1b1d20; }
.piv-value.alarm { fill: #ffffff; }
.piv-value.stopped { fill: #c9cdd2; }

.piv-trends { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.piv-trend { padding: 8px 10px; border: 1px solid #383b40; border-radius: 3px; background: #222427; }
.piv-trend-head { display: flex; justify-content: space-between; gap: 8px; font-size: 0.78rem; }
.piv-trend-name { overflow: hidden; color: #c9cdd2; text-overflow: ellipsis; white-space: nowrap; }
.piv-trend-value { color: #4fc3f7; font-weight: 700; white-space: nowrap; }
.piv-trend-body { display: flex; gap: 6px; margin-top: 4px; }
.piv-trend-scale { display: flex; flex-direction: column; justify-content: space-between; color: #7a7f86; font-size: 0.66rem; text-align: right; }
.piv-trend-svg { display: block; width: 100%; height: 96px; background: #1b1d20; }
.piv-grid { stroke: #33363b; stroke-width: 1; vector-effect: non-scaling-stroke; }
.piv-limit { stroke: #ff4d4d; stroke-dasharray: 5 4; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.piv-trace { fill: none; stroke: #4fc3f7; stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.piv-trend:nth-child(2) .piv-trace { stroke: #f5c400; }
.piv-trend:nth-child(2) .piv-trend-value { color: #f5c400; }
.piv-trend:nth-child(3) .piv-trace { stroke: #e57cf0; }
.piv-trend:nth-child(3) .piv-trend-value { color: #e57cf0; }

.piv-timebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 7px 12px;
  border-top: 1px solid #111214;
  background: #1e2023;
  color: #c9cdd2;
  font-size: 0.75rem;
}
.piv-time { padding: 2px 8px; border: 1px solid #3c4046; border-radius: 2px; background: #2b2d31; font-variant-numeric: tabular-nums; }
.piv-timeline { min-width: 40px; flex: 1; height: 2px; background: #3c4046; }
.piv-now { padding: 2px 10px; border-radius: 2px; background: #21a0d2; color: #ffffff; font-weight: 700; }
.piv-refresh { color: #7a7f86; }

/* ==== Phones and narrow windows ==== */
@media (max-width: 1100px) {
  .pbi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pbi-visual.span-3 { grid-column: 1 / -1; }
  .pbi-visual.span-2 { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  /* Departments become a row of chips on top that scrolls sideways */
  .rp { grid-template-columns: minmax(0, 1fr); }
  .rp-depts { position: static; max-height: none; flex-direction: row; align-items: center; padding: 6px; }
  .rp-depts-title, .rp-config { display: none; }
  .rp-dept-list { flex-direction: row; gap: 4px; overflow-x: auto; scrollbar-width: thin; }
  .rp-dept { flex: none; padding: 7px 10px; }
  .rp-dept-name { white-space: nowrap; }
  .rp-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .rp-tab-group { flex-wrap: nowrap; }
  .rp-viewer.framed { height: 70vh; min-height: 380px; }
  .pbi-grid { grid-template-columns: minmax(0, 1fr); }
  .pbi-visual.span-2, .pbi-visual.span-3 { grid-column: auto; }
  .pbi-canvas, .piv-canvas { padding: 10px; }
  .pbi-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pbi-card-value { font-size: 1.2rem; }
  .pbi-chrome-app, .pbi-chrome-sep, .piv-app, .piv-sep { display: none; }
  .piv-refresh { display: none; }
}

@media (max-width: 480px) {
  .pbi-slicer { min-width: 0; flex: 1 1 45%; }
  .piv-big { min-width: 0; flex: 1 1 45%; }
  .pbi-chrome-title, .piv-bar-title { display: none; }
}

/* ==== Administration > Portal configuration (Client\Apps\Admin\PortalEditor.razor): the portal's own fields ==== */
.dept-item .pe-dept-icon { margin-right: 6px; vertical-align: -4px; color: var(--accent); }
.dept-item.active .pe-dept-icon { color: var(--brand-gold); }
.pe-icon-item { display: inline-flex; align-items: center; gap: 8px; }
/* The URL takes the room left by the display mode and the app menu */
.url-row > * { flex: 1 1 auto; min-width: 0; }
.url-row > .url-mode { flex: 0 0 220px; }
.url-row > .url-app-menu { flex: 0 0 auto; }
@media (max-width: 900px) {
  .url-row { flex-wrap: wrap; }
  .url-row > .url-mode { flex: 1 1 100%; }
}

/* ==== Dark theme (html[data-theme="dark"], tokens in app.css) ==== */
:root[data-theme="dark"] .rp-tab:not(.active, .disabled) { background: var(--chip); }
:root[data-theme="dark"] .rp-tab:not(.active, .disabled):hover { background: var(--chip-hover); }
:root[data-theme="dark"] .rp-tab.kind-pi .mud-icon-root { color: #5bb8dc; }
/* On the light olive of an active department or tab, the gold icon would not read: the text colour instead */
:root[data-theme="dark"] .rp-dept.active .rp-dept-icon,
:root[data-theme="dark"] .rp-tab.active .mud-icon-root,
:root[data-theme="dark"] .dept-item.active .pe-dept-icon { color: var(--on-accent); }
/* The simulated Power BI report keeps Power BI's light look: the light tokens again inside it (its empty and loading
   states, MudBlazor parts and charts use them) */
:root[data-theme="dark"] .pbi {
  --background: #f7f5ef;
  --panel: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --faint: #9ca3af;
  --border: rgba(0, 0, 0, 0.1);
  --rule: rgba(0, 0, 0, 0.07);
  --chip: #eaeaea;
  --field: #ffffff;
  color-scheme: light;
}