/* Reports workspace: intentionally isolated from the legacy panel rules. */
#app-view #reports-view {
  --report-blue: #1268e8;
  --report-blue-dark: #0b3d91;
  --report-ink: #14213d;
  --report-muted: #607399;
  --report-line: #d9e4f2;
  --report-surface: #ffffff;
  --report-page: #f3f7fc;
  --report-green: #128459;
  --report-red: #d52d3a;
  container: reports / inline-size;
  background: var(--report-page);
  color: var(--report-ink);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

#app-view #reports-view,
#app-view #reports-view * {
  box-sizing: border-box;
  letter-spacing: 0;
}

#app-view #reports-view .reports-screen {
  width: 100%;
  min-width: 0;
  min-height: 100%;
  padding: 14px;
  overflow-x: clip;
}

#app-view #reports-view .reports-workspace {
  display: grid !important;
  grid-template-columns: 248px minmax(0, 1fr) !important;
  align-items: stretch;
  gap: 14px;
  width: 100%;
  min-width: 0;
  min-height: calc(100vh - 110px);
}

#app-view #reports-view .panel,
#app-view #reports-view .reports-hero,
#app-view #reports-view .report-metric,
#app-view #reports-view .report-insight-card {
  border: 1px solid var(--report-line);
  border-radius: 8px;
  background: var(--report-surface);
  box-shadow: 0 3px 12px rgba(36, 75, 125, .055);
}

/* Internal report navigation */
#app-view #reports-view .reports-selector {
  position: static !important;
  display: flex !important;
  flex-direction: column;
  align-self: stretch;
  min-width: 0;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#app-view #reports-view .reports-selector > header {
  display: block !important;
  margin: 0 !important;
  padding: 17px 15px 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--report-line) !important;
  background: #f8fbff !important;
}

#app-view #reports-view .reports-selector > header small,
#app-view #reports-view .reports-selector > header strong {
  display: block;
}

#app-view #reports-view .reports-selector > header small {
  color: var(--report-blue-dark);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

#app-view #reports-view .reports-selector > header strong {
  margin-top: 5px;
  color: var(--report-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}

#app-view #reports-view .reports-types {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0;
  padding: 8px !important;
}

#app-view #reports-view .reports-types button {
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  width: 100% !important;
  min-width: 0;
  min-height: 64px;
  padding: 10px 9px !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #30466d !important;
  text-align: left;
  box-shadow: none !important;
  transform: none !important;
}

#app-view #reports-view .reports-types button > svg:first-child {
  width: 23px;
  height: 23px;
  color: #58719c;
  justify-self: center;
}

#app-view #reports-view .reports-types button > svg:last-child {
  width: 16px;
  height: 16px;
  color: #8da0bf;
}

#app-view #reports-view .reports-types button span,
#app-view #reports-view .reports-types button strong,
#app-view #reports-view .reports-types button small {
  display: block;
  min-width: 0;
}

#app-view #reports-view .reports-types button strong {
  color: inherit;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.2;
}

#app-view #reports-view .reports-types button small {
  margin-top: 4px;
  color: var(--report-muted);
  font-size: 11px;
  line-height: 1.2;
}

#app-view #reports-view .reports-types button:hover {
  border-color: #d8e5f7 !important;
  background: #f5f9ff !important;
}

#app-view #reports-view .reports-types button.active {
  border-color: #cbdfff !important;
  border-left: 3px solid var(--report-blue) !important;
  background: #eaf3ff !important;
  color: #0759cf !important;
}

#app-view #reports-view .reports-types button.active > svg {
  color: var(--report-blue);
}

/* Main content */
#app-view #reports-view .reports-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

#app-view #reports-view .reports-hero {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
  padding: 15px 17px !important;
}

#app-view #reports-view .reports-hero > div {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

#app-view #reports-view .reports-hero-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: 8px;
  background: #e8f1ff;
  color: var(--report-blue);
}

#app-view #reports-view .reports-hero-icon svg { width: 29px; height: 29px; }
#app-view #reports-view .reports-hero h2 { margin: 0; color: #0d2460; font-size: 27px; font-weight: 800; line-height: 1.05; }
#app-view #reports-view .reports-hero p { margin: 5px 0 0; color: var(--report-muted); font-size: 13px; line-height: 1.3; }

#app-view #reports-view .reports-hero .primary-button {
  min-height: 44px;
  padding: 0 17px;
  flex: 0 0 auto;
  border-radius: 7px;
  background: var(--report-blue);
  box-shadow: 0 5px 12px rgba(18, 104, 232, .18);
  font-size: 13px;
}

/* Filters */
#app-view #reports-view .reports-filter-panel {
  position: relative;
  z-index: 4;
  display: grid !important;
  grid-template-columns: minmax(210px, .85fr) minmax(390px, 1.6fr) minmax(210px, .8fr);
  align-items: end;
  gap: 14px;
  min-width: 0;
  padding: 12px 14px !important;
  overflow: visible !important;
}

#app-view #reports-view .reports-filter-heading,
#app-view #reports-view .reports-shortcuts-block,
#app-view #reports-view .reports-custom-period {
  min-width: 0;
}

#app-view #reports-view .reports-filter-heading > small,
#app-view #reports-view .reports-shortcuts-block > span {
  display: block;
  margin: 0 0 6px;
  color: var(--report-blue-dark);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

#app-view #reports-view #reports-period-picker,
#app-view #reports-view .reports-custom-period > summary {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #cfdced;
  border-radius: 7px;
  background: #fff;
  color: #24375f;
  box-shadow: none;
  cursor: pointer;
}

#app-view #reports-view #reports-period-picker strong,
#app-view #reports-view .reports-custom-period > summary span {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app-view #reports-view #reports-period-picker svg,
#app-view #reports-view .reports-custom-period > summary svg { width: 17px; height: 17px; color: #53719f; }

#app-view #reports-view .reports-period-shortcuts {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(72px, 1fr));
  gap: 7px;
  min-width: 0;
}

#app-view #reports-view .reports-period-shortcuts button {
  width: auto !important;
  min-width: 0;
  height: 42px;
  padding: 0 8px !important;
  border: 1px solid #d2deed !important;
  border-radius: 7px !important;
  background: #f7faff !important;
  color: #51678e !important;
  font-size: 12px;
  font-weight: 700;
  box-shadow: none !important;
}

#app-view #reports-view .reports-period-shortcuts button.active {
  border-color: var(--report-blue) !important;
  background: var(--report-blue) !important;
  color: #fff !important;
}

#app-view #reports-view .reports-custom-period {
  position: relative;
  margin: 0 !important;
}

#app-view #reports-view .reports-custom-period > summary { list-style: none; }
#app-view #reports-view .reports-custom-period > summary::-webkit-details-marker { display: none; }

#app-view #reports-view .reports-date-fields {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 20;
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 9px;
  width: min(290px, 85vw);
  padding: 12px;
  border: 1px solid var(--report-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(25, 55, 100, .16);
}

#app-view #reports-view .reports-date-fields label span { display: block; margin-bottom: 5px; color: var(--report-muted); font-size: 11px; font-weight: 700; }
#app-view #reports-view .reports-date-fields input { width: 100%; height: 40px; border: 1px solid #cfdced; border-radius: 6px; padding: 0 10px; color: var(--report-ink); background: #fff; }

#app-view #reports-view .balance-carry-option {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  margin-top: -2px;
  padding: 8px 10px;
  border: 1px solid #d9e6f4;
  border-radius: 7px;
  background: #f7faff;
}

#app-view #reports-view .balance-carry-option.hidden { display: none !important; }
#app-view #reports-view .balance-carry-option > span { display: grid; grid-template-columns: 18px auto minmax(0, 1fr); align-items: center; gap: 7px; min-width: 0; }
#app-view #reports-view .balance-carry-option svg { width: 17px; height: 17px; color: var(--report-blue); }
#app-view #reports-view .balance-carry-option b { font-size: 12px; color: #24426e; }
#app-view #reports-view .balance-carry-option small { overflow: hidden; color: var(--report-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

/* Summary cards */
#app-view #reports-view .reports-metrics {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

#app-view #reports-view .report-metric {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-width: 0;
  min-height: 92px;
  padding: 13px !important;
  overflow: hidden;
}

#app-view #reports-view .report-metric > svg {
  width: 48px;
  height: 48px;
  padding: 12px;
  border-radius: 8px;
  background: #e9f2ff;
  color: var(--report-blue);
}

#app-view #reports-view .report-metric.tone-violet > svg { background: #f3eaff; color: #7736e8; }
#app-view #reports-view .report-metric.tone-orange > svg { background: #fff0e5; color: #ed6a1c; }
#app-view #reports-view .report-metric.tone-green > svg { background: #e4f7ed; color: var(--report-green); }
#app-view #reports-view .report-metric.tone-red > svg { background: #ffe9ec; color: var(--report-red); }
#app-view #reports-view .report-metric span { min-width: 0; }
#app-view #reports-view .report-metric small { display: block; overflow: hidden; color: #42608d; font-size: 10px; font-weight: 800; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; }
#app-view #reports-view .report-metric strong { display: block; margin-top: 6px; overflow: hidden; color: #0c2054; font-size: clamp(18px, 1.45vw, 25px); font-weight: 800; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
#app-view #reports-view .report-metric.tone-green strong { color: var(--report-green); }
#app-view #reports-view .report-metric.tone-red strong { color: var(--report-red); }

/* Charts */
#app-view #reports-view .reports-insights {
  display: grid !important;
  grid-template-columns: minmax(0, 1.3fr) minmax(330px, .85fr) !important;
  gap: 12px;
  min-width: 0;
}

#app-view #reports-view .reports-insights.hidden { display: none !important; }
#app-view #reports-view .report-insight-card { min-width: 0; min-height: 255px; padding: 13px 15px; overflow: hidden; }
#app-view #reports-view .report-insight-card { container: report-card / inline-size; }
#app-view #reports-view .report-insight-card > header { display: flex; align-items: center; gap: 10px; }
#app-view #reports-view .report-insight-card > header > span { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 7px; background: #e9f2ff; color: var(--report-blue); }
#app-view #reports-view .report-insight-card > header svg { width: 19px; height: 19px; }
#app-view #reports-view .report-insight-card > header strong,
#app-view #reports-view .report-insight-card > header small { display: block; }
#app-view #reports-view .report-insight-card > header strong { color: #10275d; font-size: 14px; }
#app-view #reports-view .report-insight-card > header small { margin-top: 3px; color: var(--report-muted); font-size: 11px; }

#app-view #reports-view .report-chart-bars {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 96px), 1fr));
  align-items: stretch;
  gap: 12px;
  height: auto;
  min-height: 185px;
  min-width: 0;
  margin-top: 10px;
  padding: 15px 10px 8px;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 45px, #e8eef7 46px);
  overflow: visible;
}

#app-view #reports-view .report-chart-item {
  display: grid !important;
  grid-template-rows: minmax(28px, auto) 112px minmax(34px, auto);
  gap: 5px;
  min-width: 0;
  text-align: center;
  border-bottom: 1px solid #cad8eb;
}

#app-view #reports-view .report-chart-item b { display: flex; align-items: flex-end; justify-content: center; overflow: visible; color: #173061; font-size: clamp(9px, 1.1cqi, 11px); line-height: 1.15; overflow-wrap: anywhere; white-space: normal; }
#app-view #reports-view .report-chart-item > div { display: flex; align-items: flex-end; justify-content: center; min-height: 0; }
#app-view #reports-view .report-chart-item > div span { display: block; width: min(68%, 90px); min-height: 6px; border-radius: 4px 4px 0 0; background: var(--report-blue); }
#app-view #reports-view .report-chart-item.negative > div span { background: var(--report-red); }
#app-view #reports-view .report-chart-item small { display: block; overflow: visible; color: #4d6288; font-size: 10px; line-height: 1.25; overflow-wrap: anywhere; white-space: normal; }

#app-view #reports-view .report-composition-body {
  display: grid !important;
  grid-template-columns: minmax(140px, .8fr) minmax(155px, 1fr);
  align-items: center;
  gap: 14px;
  min-width: 0;
  min-height: 190px;
  padding-top: 8px;
}

#app-view #reports-view .report-donut {
  position: relative;
  width: min(150px, 100%);
  aspect-ratio: 1;
  justify-self: center;
  border-radius: 50%;
  container: report-donut / inline-size;
}

#app-view #reports-view .report-donut::before { content: ""; position: absolute; inset: 24%; border-radius: 50%; background: #fff; }
#app-view #reports-view .report-donut > span { position: absolute; inset: 25%; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; overflow: visible; text-align: center; }
#app-view #reports-view .report-donut strong { display: block; width: 100%; overflow: visible; color: #112654; font-size: clamp(8px, 9cqi, 14px); line-height: 1.08; overflow-wrap: anywhere; white-space: normal; }
#app-view #reports-view .report-donut strong.long { font-size: clamp(7px, 7.3cqi, 11px); }
#app-view #reports-view .report-donut strong.very-long { font-size: clamp(6px, 6.2cqi, 9px); }
#app-view #reports-view .report-donut small { display: block; width: 100%; margin-top: 3px; overflow: visible; color: var(--report-muted); font-size: clamp(6px, 5.6cqi, 9px); line-height: 1.1; overflow-wrap: anywhere; white-space: normal; }
#app-view #reports-view .report-composition-legend { min-width: 0; }
#app-view #reports-view .report-composition-legend > div { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #edf1f7; }
#app-view #reports-view .report-composition-legend i { width: 9px; height: 9px; border-radius: 50%; }
#app-view #reports-view .report-composition-legend span,
#app-view #reports-view .report-composition-legend small,
#app-view #reports-view .report-composition-legend strong { display: block; min-width: 0; }
#app-view #reports-view .report-composition-legend small { overflow: visible; color: #4e648c; font-size: clamp(8px, 2.7cqi, 10px); line-height: 1.2; overflow-wrap: anywhere; white-space: normal; }
#app-view #reports-view .report-composition-legend strong { margin-top: 2px; overflow: visible; color: #193364; font-size: clamp(9px, 3cqi, 11px); line-height: 1.2; overflow-wrap: anywhere; white-space: normal; }
#app-view #reports-view .report-composition-legend em { color: #6d7f9e; font-size: clamp(8px, 2.7cqi, 10px); font-style: normal; white-space: nowrap; }

@container report-card (max-width: 340px) {
  #app-view #reports-view .report-composition-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding-top: 12px;
  }

  #app-view #reports-view .report-donut { width: min(126px, 58%); }
  #app-view #reports-view .report-composition-legend { width: 100%; }
  #app-view #reports-view .report-composition-legend > div { grid-template-columns: 9px minmax(0, 1fr) auto; }
}

@container report-card (max-width: 260px) {
  #app-view #reports-view .report-chart-bars { grid-template-columns: repeat(auto-fit, minmax(min(100%, 72px), 1fr)); padding-inline: 4px; }
  #app-view #reports-view .report-chart-item small { font-size: 8px; }
}

/* Detailed table */
#app-view #reports-view .reports-result {
  min-width: 0;
  padding: 0 !important;
  overflow: hidden !important;
}

#app-view #reports-view .reports-result > header {
  display: grid !important;
  grid-template-columns: minmax(230px, 1fr) minmax(190px, 280px);
  align-items: center;
  gap: 8px 14px;
  min-width: 0;
  padding: 12px 14px 10px !important;
  border-bottom: 1px solid var(--report-line);
  background: #fff;
}

#app-view #reports-view .reports-result > header > div { min-width: 0; }
#app-view #reports-view .reports-result > header small { color: var(--report-blue); font-size: 9px; font-weight: 800; text-transform: uppercase; }
#app-view #reports-view .reports-result > header h2 { margin: 3px 0 0; color: #10265a; font-size: 16px; font-weight: 800; }
#app-view #reports-view .reports-result > header p { margin: 3px 0 0; color: var(--report-muted); font-size: 11px; }
#app-view #reports-view .reports-result-search { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 7px; height: 38px; padding: 0 10px; border: 1px solid #cfdbeb; border-radius: 7px; background: #fff; }
#app-view #reports-view .reports-result-search svg { width: 17px; height: 17px; color: #6680a7; }
#app-view #reports-view .reports-result-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--report-ink); font-size: 11px; }
#app-view #reports-view #reports-note { grid-column: 1 / -1; color: #7183a2; font-size: 10px; text-align: right; }
#app-view #reports-view .reports-table-wrap { width: 100%; min-width: 0; overflow-x: auto; }
#app-view #reports-view .reports-table-wrap.hidden { display: none !important; }
#app-view #reports-view .reports-table { width: 100%; min-width: 690px; border-collapse: collapse; }
#app-view #reports-view .reports-table th { padding: 9px 12px; border-bottom: 1px solid #d8e3f1; background: #edf4fd; color: #28528f; font-size: 10px; font-weight: 800; text-align: left; text-transform: uppercase; white-space: nowrap; }
#app-view #reports-view .reports-table td { max-width: 280px; padding: 9px 12px; border-bottom: 1px solid #e6ecf4; color: #243a63; font-size: 11px; line-height: 1.25; }
#app-view #reports-view .reports-table tbody tr:hover { background: #f7faff; }
#app-view #reports-view .reports-table td.is-positive { color: var(--report-green); font-weight: 750; }
#app-view #reports-view .reports-table td.is-negative { color: var(--report-red); font-weight: 750; }
#app-view #reports-view .report-margin-pill { display: inline-block; min-width: 58px; padding: 4px 8px; border-radius: 6px; background: #e3f7ed; color: var(--report-green); text-align: center; }
#app-view #reports-view td.is-negative .report-margin-pill { background: #ffe5e8; color: var(--report-red); }
#app-view #reports-view .reports-empty { height: 160px; text-align: center; }

#app-view #reports-view .reports-account-groups { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px; }
#app-view #reports-view .reports-account-groups.hidden { display: none !important; }
#app-view #reports-view .reports-account-block { min-width: 0; overflow: hidden; border: 1px solid var(--report-line); border-radius: 8px; background: #fff; }
#app-view #reports-view .reports-account-block > header { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 11px; background: #f7faff; }
#app-view #reports-view .reports-account-block > header > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 7px; background: #e7f1ff; color: var(--report-blue); }
#app-view #reports-view .reports-account-block > header svg { width: 19px; }
#app-view #reports-view .reports-account-block h3 { margin: 2px 0 0; font-size: 15px; }
#app-view #reports-view .reports-account-block header small { color: var(--report-muted); font-size: 9px; text-transform: uppercase; }
#app-view #reports-view .reports-account-block header aside { display: flex; gap: 7px; font-size: 10px; }
#app-view #reports-view .reports-account-block header aside b { color: var(--report-green); }
#app-view #reports-view .reports-account-block header aside strong { color: var(--report-red); }
#app-view #reports-view .reports-account-table { overflow-x: auto; }
#app-view #reports-view .reports-account-table table { width: 100%; min-width: 430px; border-collapse: collapse; }
#app-view #reports-view .reports-account-table th,
#app-view #reports-view .reports-account-table td { padding: 8px 9px; border-bottom: 1px solid #e7edf5; font-size: 10px; text-align: left; }
#app-view #reports-view .reports-account-block footer,
#app-view #reports-view .reports-account-opening { display: flex; justify-content: space-between; gap: 12px; padding: 9px 11px; color: #445c82; font-size: 11px; }
#app-view #reports-view .reports-account-block footer { border-top: 1px solid var(--report-line); background: #f8fbff; font-weight: 750; }

/* The actual report area, not the browser width, decides when the layout changes. */
@container reports (max-width: 1120px) {
  #app-view #reports-view .reports-workspace { grid-template-columns: 210px minmax(0, 1fr) !important; gap: 10px; }
  #app-view #reports-view .reports-filter-panel { grid-template-columns: minmax(190px, .8fr) minmax(310px, 1.3fr); }
  #app-view #reports-view .reports-custom-period { grid-column: 1 / -1; }
  #app-view #reports-view .reports-custom-period > summary { width: min(280px, 100%); }
  #app-view #reports-view .reports-date-fields { right: auto; left: 0; }
  #app-view #reports-view .reports-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app-view #reports-view .reports-insights { grid-template-columns: minmax(0, 1fr) !important; }
}

@container reports (max-width: 960px) {
  #app-view #reports-view .reports-screen { padding: 9px; }
  #app-view #reports-view .reports-workspace { grid-template-columns: minmax(0, 1fr) !important; min-height: 0; }
  #app-view #reports-view .reports-selector { display: block !important; }
  #app-view #reports-view .reports-selector > header { display: none !important; }
  #app-view #reports-view .reports-types { display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(168px, 1fr); overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
  #app-view #reports-view .reports-types button { min-height: 56px; grid-template-columns: 30px minmax(0, 1fr); }
  #app-view #reports-view .reports-types button > svg:last-child { display: none; }
  #app-view #reports-view .reports-hero { padding: 12px !important; }
  #app-view #reports-view .reports-hero-icon { width: 44px; height: 44px; flex-basis: 44px; }
  #app-view #reports-view .reports-hero h2 { font-size: 22px; }
  #app-view #reports-view .reports-hero p { font-size: 11px; }
  #app-view #reports-view .reports-filter-panel { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #app-view #reports-view .reports-custom-period { grid-column: auto; }
  #app-view #reports-view .reports-custom-period > summary { width: 100%; }
  #app-view #reports-view .reports-date-fields { right: 0; left: auto; }
  #app-view #reports-view .reports-account-groups { grid-template-columns: minmax(0, 1fr); }
}

@container reports (max-width: 500px) {
  #app-view #reports-view .reports-screen { padding: 7px; }
  #app-view #reports-view .reports-main { gap: 8px; }
  #app-view #reports-view .reports-hero { align-items: flex-start; gap: 8px; }
  #app-view #reports-view .reports-hero p { display: none; }
  #app-view #reports-view .reports-hero .primary-button { width: 42px; min-width: 42px; padding: 0; overflow: hidden; color: transparent; }
  #app-view #reports-view .reports-hero .primary-button svg { color: #fff; }
  #app-view #reports-view .reports-period-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app-view #reports-view .reports-metrics { gap: 7px; }
  #app-view #reports-view .report-metric { grid-template-columns: 36px minmax(0, 1fr); min-height: 76px; padding: 9px !important; }
  #app-view #reports-view .report-metric > svg { width: 36px; height: 36px; padding: 9px; }
  #app-view #reports-view .report-metric small { font-size: 8px; }
  #app-view #reports-view .report-metric strong { font-size: 16px; }
  #app-view #reports-view .report-composition-body { grid-template-columns: minmax(110px, .75fr) minmax(130px, 1fr); gap: 8px; }
  #app-view #reports-view .reports-result > header { grid-template-columns: minmax(0, 1fr); }
  #app-view #reports-view #reports-note { text-align: left; }
}

@container reports (max-width: 560px) {
  #app-view #reports-view .reports-metrics { grid-template-columns: minmax(0, 1fr); }
  #app-view #reports-view .report-metric { min-height: 70px; }
  #app-view #reports-view .report-composition-body { grid-template-columns: minmax(105px, .7fr) minmax(125px, 1fr); }
}

html[data-theme="dark"] #app-view #reports-view {
  --report-ink: #ecf2ff;
  --report-muted: #a9b7d0;
  --report-line: #344563;
  --report-surface: #1d2940;
  --report-page: #141d30;
  --report-blue: #4c91ff;
  --report-blue-dark: #8eb8ff;
}

html[data-theme="dark"] #app-view #reports-view .reports-selector > header,
html[data-theme="dark"] #app-view #reports-view .reports-types button:hover,
html[data-theme="dark"] #app-view #reports-view .reports-account-block > header,
html[data-theme="dark"] #app-view #reports-view .reports-account-block footer { background: #222f48 !important; }
html[data-theme="dark"] #app-view #reports-view .reports-types button.active { background: #243b61 !important; }
html[data-theme="dark"] #app-view #reports-view #reports-period-picker,
html[data-theme="dark"] #app-view #reports-view .reports-custom-period > summary,
html[data-theme="dark"] #app-view #reports-view .reports-date-fields,
html[data-theme="dark"] #app-view #reports-view .reports-date-fields input,
html[data-theme="dark"] #app-view #reports-view .reports-result-search,
html[data-theme="dark"] #app-view #reports-view .reports-account-block { background: #1d2940; color: #ecf2ff; }
html[data-theme="dark"] #app-view #reports-view .reports-table th { background: #263651; color: #b9d2ff; }
html[data-theme="dark"] #app-view #reports-view .reports-table td { color: #dbe5f7; }
html[data-theme="dark"] #app-view #reports-view .reports-table tbody tr:hover { background: #22314b; }
html[data-theme="dark"] #app-view #reports-view .report-donut::before { background: #1d2940; }

/* Dark reports: colorful data groups with accessible contrast. */
html[data-theme="dark"] #app-view #reports-view {
  --report-page: #0d1423;
  --report-surface: #151f32;
  --report-line: #34445f;
  --report-ink: #f2f6ff;
  --report-muted: #a5b3c9;
  background:
    radial-gradient(circle at 12% 0%, rgba(42, 106, 219, .16), transparent 27%),
    #0d1423 !important;
}

html[data-theme="dark"] #app-view #reports-view :is(
  .reports-selector, .reports-hero, .reports-filter-panel, .report-insight-card,
  .reports-result, .reports-account-block
) {
  border-color: #34445f !important;
  background: #151f32 !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .24) !important;
}

html[data-theme="dark"] #app-view #reports-view .reports-hero {
  border-color: #365c97 !important;
  background: linear-gradient(105deg, #172a4a, #17233a 60%, #153342) !important;
}

html[data-theme="dark"] #app-view #reports-view .reports-selector > header,
html[data-theme="dark"] #app-view #reports-view .reports-result > header {
  border-color: #3a4c68 !important;
  background: #1b2a42 !important;
}

html[data-theme="dark"] #app-view #reports-view .reports-types button {
  border-color: #2e3d55 !important;
  background: #151f32 !important;
  color: #c9d5e7 !important;
}

html[data-theme="dark"] #app-view #reports-view .reports-types button:nth-child(1).active {
  border-color: #4f8df7 !important;
  background: #1b3762 !important;
}

html[data-theme="dark"] #app-view #reports-view .reports-types button:nth-child(2).active {
  border-color: #35b985 !important;
  background: #173c32 !important;
}

html[data-theme="dark"] #app-view #reports-view .reports-types button:nth-child(3).active {
  border-color: #f0a34a !important;
  background: #45331d !important;
}

html[data-theme="dark"] #app-view #reports-view .reports-types button:nth-child(4).active {
  border-color: #27b8bd !important;
  background: #153c43 !important;
}

html[data-theme="dark"] #app-view #reports-view .report-metric.tone-blue {
  border-color: #3d69a8 !important;
  background: linear-gradient(135deg, #1a3764, #151f32 72%) !important;
}

html[data-theme="dark"] #app-view #reports-view .report-metric.tone-green {
  border-color: #327359 !important;
  background: linear-gradient(135deg, #173c30, #151f32 72%) !important;
}

html[data-theme="dark"] #app-view #reports-view .report-metric.tone-teal {
  border-color: #2b7779 !important;
  background: linear-gradient(135deg, #153d42, #151f32 72%) !important;
}

html[data-theme="dark"] #app-view #reports-view .report-metric.tone-amber {
  border-color: #91622c !important;
  background: linear-gradient(135deg, #45331d, #151f32 72%) !important;
}

html[data-theme="dark"] #app-view #reports-view .report-metric.tone-red {
  border-color: #8c4650 !important;
  background: linear-gradient(135deg, #43252e, #151f32 72%) !important;
}

html[data-theme="dark"] #app-view #reports-view .report-metric.tone-slate {
  border-color: #596a83 !important;
  background: linear-gradient(135deg, #293548, #151f32 72%) !important;
}

html[data-theme="dark"] #app-view #reports-view :is(
  #reports-period-picker, .reports-custom-period > summary, .reports-date-fields,
  .reports-date-fields input, .reports-result-search
) {
  border-color: #40516e !important;
  background: #0f1829 !important;
  color: #eef4ff !important;
}

html[data-theme="dark"] #app-view #reports-view .reports-period-shortcuts button {
  border-color: #40516e !important;
  background: #1c2940 !important;
  color: #c3d0e4 !important;
}

html[data-theme="dark"] #app-view #reports-view .reports-period-shortcuts button.active {
  border-color: #4f8df7 !important;
  background: linear-gradient(135deg, #285fb8, #176b86) !important;
  color: #fff !important;
}

html[data-theme="dark"] #app-view #reports-view .report-chart-bars {
  border-color: #34445f !important;
  background: repeating-linear-gradient(to bottom, transparent 0 39px, #2a3951 40px) !important;
}

html[data-theme="dark"] #app-view #reports-view .report-donut::before {
  background: #151f32 !important;
}

html[data-theme="dark"] #app-view #reports-view .reports-table th {
  border-color: #42638e !important;
  background: linear-gradient(180deg, #294f80, #213f68) !important;
  color: #eef5ff !important;
}

html[data-theme="dark"] #app-view #reports-view .reports-table td {
  border-color: #2f3e56 !important;
  background: #151f32 !important;
  color: #dce5f3 !important;
}

html[data-theme="dark"] #app-view #reports-view .reports-table tbody tr:nth-child(even) td {
  background: #182439 !important;
}

html[data-theme="dark"] #app-view #reports-view .reports-table tbody tr:hover td {
  background: #203758 !important;
}

html[data-theme-variant="black"] #app-view #reports-view {
  --report-page: #050608;
  --report-surface: #0d1117;
  --report-ink: #f0f6fc;
  --report-muted: #8b949e;
  --report-line: #30363d;
  background: #050608 !important;
}

html[data-theme-variant="black"] #app-view #reports-view :is(
  .reports-selector, .reports-hero, .reports-filter-panel, .report-insight-card,
  .reports-result, .reports-account-block, .report-metric
) {
  border-color: #30363d !important;
  background: #0d1117 !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .34) !important;
}

html[data-theme-variant="black"] #app-view #reports-view .reports-hero {
  border-left-color: #58a6ff !important;
  background: linear-gradient(105deg, #0d1117, #101722 68%, #0d1d1b) !important;
}

html[data-theme-variant="black"] #app-view #reports-view .reports-types button,
html[data-theme-variant="black"] #app-view #reports-view .reports-period-shortcuts button {
  border-color: #30363d !important;
  background: #151b23 !important;
  color: #c9d1d9 !important;
}

html[data-theme-variant="black"] #app-view #reports-view .reports-types button.active,
html[data-theme-variant="black"] #app-view #reports-view .reports-period-shortcuts button.active {
  border-color: #1f6feb !important;
  background: #0d419d !important;
  color: #fff !important;
}

html[data-theme-variant="black"] #app-view #reports-view .report-chart-bars {
  border-color: #30363d !important;
  background: repeating-linear-gradient(to bottom, transparent 0 39px, #21262d 40px) !important;
}

html[data-theme-variant="black"] #app-view #reports-view .report-donut::before {
  background: #0d1117 !important;
}

html[data-theme-variant="black"] #app-view #reports-view .reports-table th {
  border-color: #30363d !important;
  background: #161b22 !important;
  color: #c9d1d9 !important;
}

html[data-theme-variant="black"] #app-view #reports-view .reports-table td {
  border-color: #21262d !important;
  background: #0d1117 !important;
  color: #e6edf3 !important;
}

html[data-theme-variant="black"] #app-view #reports-view .reports-table tbody tr:nth-child(even) td,
html[data-theme-variant="black"] #app-view #reports-view .reports-table tbody tr:hover td {
  background: #161b22 !important;
}

html[data-theme="light"][data-theme-variant="whatsapp"] #app-view #reports-view {
  --report-page: #f0f2f5;
  --report-surface: #fff;
  --report-ink: #111b21;
  --report-muted: #667781;
  --report-line: #d8e0e5;
  --report-blue: #00a884;
  --report-blue-dark: #00735f;
  --report-green: #128c7e;
  background: #f0f2f5 !important;
}

html[data-theme="light"][data-theme-variant="whatsapp"] #app-view #reports-view :is(
  .reports-selector, .reports-hero, .reports-filter-panel, .report-insight-card,
  .reports-result, .reports-account-block, .report-metric
) {
  border-color: #d8e0e5 !important;
  background: #fff !important;
  box-shadow: 0 10px 26px rgba(17, 27, 33, .08) !important;
}

html[data-theme="light"][data-theme-variant="whatsapp"] #app-view #reports-view .reports-hero {
  border-left-color: #00a884 !important;
  background: linear-gradient(105deg, #fff, #f2fcf8 68%, #eaf7fb) !important;
}

html[data-theme="light"][data-theme-variant="whatsapp"] #app-view #reports-view .reports-types button,
html[data-theme="light"][data-theme-variant="whatsapp"] #app-view #reports-view .reports-period-shortcuts button {
  border-color: #d8e0e5 !important;
  background: #f7f9fa !important;
  color: #3b4a54 !important;
}

html[data-theme="light"][data-theme-variant="whatsapp"] #app-view #reports-view .reports-types button.active,
html[data-theme="light"][data-theme-variant="whatsapp"] #app-view #reports-view .reports-period-shortcuts button.active {
  border-color: #008069 !important;
  background: #00a884 !important;
  color: #fff !important;
}

html[data-theme="light"][data-theme-variant="whatsapp"] #app-view #reports-view .report-chart-bars {
  border-color: #d8e0e5 !important;
  background: repeating-linear-gradient(to bottom, transparent 0 39px, #e9edef 40px) !important;
}

html[data-theme="light"][data-theme-variant="whatsapp"] #app-view #reports-view .report-donut::before {
  background: #fff !important;
}

html[data-theme="light"][data-theme-variant="whatsapp"] #app-view #reports-view .reports-table th {
  border-color: #d8e0e5 !important;
  background: #e9edef !important;
  color: #3b4a54 !important;
}

html[data-theme="light"][data-theme-variant="whatsapp"] #app-view #reports-view .reports-table td {
  border-color: #e6ebee !important;
  background: #fff !important;
  color: #111b21 !important;
}

html[data-theme="light"][data-theme-variant="whatsapp"] #app-view #reports-view .reports-table tbody tr:nth-child(even) td,
html[data-theme="light"][data-theme-variant="whatsapp"] #app-view #reports-view .reports-table tbody tr:hover td {
  background: #f0faf7 !important;
}

html[data-theme="light"][data-theme-variant="whatsapp"] #app-view #reports-view .report-chart-item > div span {
  background: linear-gradient(180deg, #25d366, #00a884) !important;
}

html[data-theme="light"][data-theme-variant="whatsapp"] #app-view #reports-view .reports-result-search:focus-within,
html[data-theme="light"][data-theme-variant="whatsapp"] #app-view #reports-view .reports-custom-period[open] > summary {
  border-color: #00a884 !important;
  box-shadow: 0 0 0 3px rgba(0, 168, 132, .13) !important;
}