/* Every colour on the site is one of these, and nothing outside this block
   names a colour. That is what makes a second theme possible at all: the dark
   palette below redefines the same names and not one rule has to know.

   The light values are a shade darker than they were on the greys: the old
   ones failed WCAG AA against white — muted text sat at 4.08:1 and the search
   placeholder at 2.46:1, where 4.5:1 is the bar for text. */
:root {
  color-scheme: light;

  --bg: #eef3f9;
  --surface: #ffffff;
  --surface-soft: #f7f9fc;
  --surface-raised: var(--surface-raised);
  --line: #d8e1ee;
  --line-soft: #edf1f6;

  --text: #273244;
  --muted: #68788e;
  --head-text: #64748b;
  --faint: #69778d;
  --placeholder: #6b7789;

  --primary: #4d46e8;
  --primary-soft: #eef0ff;
  --on-primary: #ffffff;

  --accent: #0d9488;
  --accent-2: #b45309;
  --green: #3d9a77;

  --danger: var(--danger);
  --danger-strong: var(--danger-strong);
  --danger-soft: var(--danger-soft);
  --danger-line: var(--danger-line);
  --danger-tint: var(--danger-tint);
  --danger-badge-line: var(--danger-badge-line);

  --warn-soft: var(--warn-soft);
  --warn-text: #a65e00;
  --caution-soft: var(--caution-soft);

  --shadow-soft: var(--shadow-soft);
  --shadow-strong: var(--shadow-strong);
}

/* The dark palette, twice: once for the reader who has chosen it, and once for
   the reader who has chosen nothing and whose system is dark. The two lists
   must stay identical, and `test_both_dark_palettes_define_the_same_colours`
   is what makes sure they do — a token that drifts between them would show up
   only for whichever half of the users hit the other rule.

   `color-scheme` is not decoration: it is what makes the date pickers, scroll
   bars and autofill this page is full of render dark too. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #111621;
  --surface: #1a2131;
  --surface-soft: #212a3d;
  --surface-raised: #242e43;
  --line: #35415c;
  --line-soft: #2a3348;

  --text: #e7ecf7;
  --muted: #9aa7bf;
  --head-text: #8f9cb4;
  --faint: #8593ac;
  --placeholder: #77839a;

  --primary: #8f8aff;
  --primary-soft: #272c55;
  --on-primary: #0e1220;

  --accent: #5ad1c0;
  --accent-2: #e8a13c;
  --green: #54c09b;

  --danger: #ff7b7b;
  --danger-strong: #ff9a9a;
  --danger-soft: #2b1a1f;
  --danger-line: #4a2830;
  --danger-tint: #33202a;
  --danger-badge-line: #5a2f36;

  --warn-soft: #2f2517;
  --warn-text: #e6b662;
  --caution-soft: #272016;

  --shadow-soft: rgba(0, 0, 0, 0.42);
  --shadow-strong: rgba(0, 0, 0, 0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #111621;
    --surface: #1a2131;
    --surface-soft: #212a3d;
    --surface-raised: #242e43;
    --line: #35415c;
    --line-soft: #2a3348;

    --text: #e7ecf7;
    --muted: #9aa7bf;
    --head-text: #8f9cb4;
    --faint: #8593ac;
    --placeholder: #77839a;

    --primary: #8f8aff;
    --primary-soft: #272c55;
    --on-primary: #0e1220;

    --accent: #5ad1c0;
    --accent-2: #e8a13c;
    --green: #54c09b;

    --danger: #ff7b7b;
    --danger-strong: #ff9a9a;
    --danger-soft: #2b1a1f;
    --danger-line: #4a2830;
    --danger-tint: #33202a;
    --danger-badge-line: #5a2f36;

    --warn-soft: #2f2517;
    --warn-text: #e6b662;
    --caution-soft: #272016;

    --shadow-soft: rgba(0, 0, 0, 0.42);
    --shadow-strong: rgba(0, 0, 0, 0.55);
  }
}


* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
}

.topbar {
  height: 58px;
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(24px, calc((100vw - 1740px) / 2));
}

.brand {
  color: var(--primary);
  font-size: 20px;
  font-weight: 800;
  text-decoration: none;
}

/* Two icons in one button, the one you get by pressing it. Which is showing
   is decided by the same pair of rules the palette uses: an explicit choice,
   or the system when there is none. */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}

.theme-toggle:hover {
  color: var(--primary);
  border-color: var(--primary);
}

.theme-toggle svg {
  width: 16px;
  height: 16px;
  grid-area: 1 / 1;
}

.icon-sun {
  display: none;
}

:root[data-theme="dark"] .icon-sun { display: block; }
:root[data-theme="dark"] .icon-moon { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-sun { display: block; }
  :root:not([data-theme="light"]) .icon-moon { display: none; }
}

.auth-theme {
  display: flex;
  justify-content: flex-end;
  width: min(420px, 100%);
  margin-bottom: 10px;
}

.user-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-weight: 650;
}

.user-nav a {
  color: var(--muted);
  text-decoration: none;
}

.page {
  max-width: 1740px;
  margin: 0 auto;
  padding: 30px 24px 56px;
}

.section-heading,
.detail-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 14px;
}

h1 {
  margin: 0 0 18px;
  font-size: 23px;
  line-height: 1.2;
  letter-spacing: 0;
}

.button {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: 8px;
  padding: 10px 14px;
  min-height: 42px;
  font-weight: 700;
  text-decoration: none;
  cursor: default;
}

.button.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}

.button.secondary {
  background: var(--surface);
}

.auth-body {
  background: var(--bg);
}

.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.auth-card {
  width: min(420px, 100%);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 18px 60px var(--shadow-soft);
}

.auth-brand {
  color: var(--primary);
  font-size: 20px;
  font-weight: 850;
  margin-bottom: 22px;
}

.auth-card h1 {
  margin-bottom: 18px;
}

.auth-card label {
  display: block;
  margin-bottom: 14px;
}

.auth-card label span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 7px;
}

.auth-card input {
  width: 100%;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--text);
  font: inherit;
  font-weight: 650;
}

.auth-error {
  border: 1px solid var(--danger-badge-line);
  background: var(--danger-soft);
  color: var(--danger-strong);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-weight: 700;
}

.auth-submit {
  width: 100%;
  justify-content: center;
  cursor: pointer;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.stat-card {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 10px 14px;
}

.stat-label {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 5px;
}

.stat-value {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.stat-value.amount-positive {
  color: var(--primary);
}

.stat-value.amount-negative {
  color: var(--danger);
}

.stat-value.stat-alert {
  color: var(--danger);
}

.stat-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* Two components where there used to be one. `.alert-bar` is for a gap in the
   data — nobody owns these rows, nobody documented this payout — and is the
   only one allowed to be red. `.excluded` explains why a total is smaller than
   expected, which is not news, so it is grey, collapsed, and never shouts. */
.alert-bar {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--danger-soft);
  border: 1px solid var(--danger-line);
  border-left: 3px solid var(--danger);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 650;
}

.alert-count {
  color: var(--danger);
  font-weight: 800;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.alert-label {
  color: var(--text);
}

.alert-detail {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.alert-action {
  margin-left: auto;
  color: var(--danger);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

/* The overview is the one page built of several sections, so it needs a rank
   between the page title and a stat label. Everything else here is one table
   under one h1 and has never had a use for it. */
/* The overview's one figure, and its shape beside it. Everything used to be a
   210px stat card in a row of six, which said every number mattered equally
   and truncated half of them proving it. */
.hero {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: 18px;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 14px;
}

.hero-figure {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.hero-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.hero-value {
  display: block;
  margin: 4px 0 10px;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
}

.hero-split {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.swatch {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  margin-right: 7px;
}

.swatch-in { background: var(--primary); }
.swatch-out { background: var(--accent); }

.hero-chart {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
}

/* Stretched to whatever width it lands in — the bars distort with it, which is
   what bars are for, and there is no text inside to distort with them. */
.chart {
  width: 100%;
  height: 132px;
  display: block;
}

.bar-in { fill: var(--primary); }
.bar-out { fill: var(--accent); }
.bar-hit { fill: transparent; }
.chart g:hover .bar-hit { fill: var(--primary-soft); }

/* One band per platform, in the order the partner table lists them, so a
   colour means the same thing in both places. */
.bar-p0, .swatch-p0 { fill: var(--primary); background: var(--primary); }
.bar-p1, .swatch-p1 { fill: var(--accent); background: var(--accent); }
.bar-p2, .swatch-p2 { fill: var(--accent-2); background: var(--accent-2); }

.swatch-p0, .swatch-p1, .swatch-p2 {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  margin-right: 7px;
}

/* The day-by-day figures are a report, not a glance: folded away under the
   shape that answers the question most days. */
.daily-table .table-shell {
  border: 0;
  border-radius: 0;
}

.daily-table[open] > .excluded-summary {
  border-bottom: 1px solid var(--line-soft);
}

/* Two figures in one block, so neither is a footnote to the other. */
.hero-label-second {
  margin-top: 12px;
}

/* Two figures share this block, so neither can be the size a single one gets. */
.hero-pair .hero-value {
  font-size: 26px;
}

.hero-value-out {
  color: var(--text);
}

/* Payouts hang below the baseline in the same colour as their platform: the
   colour says whose money it is, the side says which way it went. Softened so
   the two halves read as related rather than as six separate series. */
.bar-out-side {
  opacity: 0.62;
}

.chart-baseline {
  stroke: var(--line);
  stroke-width: 1;
}

.chart-flow {
  height: 168px;
}

.chart-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

/* One tile per thing to look at, side by side. As three stacked red bars this
   was the first and loudest thing on the page, which is how a dashboard ends
   up answering "where do I look" with "everywhere". */
.attention-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.attention-tile {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--danger);
  border-radius: 12px;
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
}

.attention-tile:hover {
  border-color: var(--danger-line);
  border-left-color: var(--danger);
  background: var(--danger-tint);
}

.attention-count {
  display: block;
  color: var(--danger);
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.attention-label {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 700;
}

.attention-detail {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* The period governs the whole page, so it sits with the title rather than in
   a band of its own between two things it does not both apply to. */
.period-bar {
  display: flex;
  align-items: center;
  align-self: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* .filter-input is full-width by default, for the column popovers. Left at that
   in the heading it took a column of its own per date and stacked the whole
   control into a tower beside the title. */
.period-bar .filter-input {
  width: auto;
  min-width: 132px;
  height: 36px;
}

.period-bar .compact-button {
  min-height: 36px;
}

/* A link inside a table should not shout in blue and underline. It carries the
   same weight as the text it sits in and only marks itself on hover. */
.quiet-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed var(--line);
}

.quiet-link:hover {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* How much of the income this partner is, under its name: the column of
   figures says how much, and this says how much of it. */
.share-bar {
  display: block;
  height: 3px;
  margin-top: 6px;
  background: var(--line-soft);
  border-radius: 2px;
  overflow: hidden;
}

.share-bar i {
  display: block;
  height: 100%;
  background: var(--primary);
}

/* Not a warning: nobody configured a rate, which is a fact about our setup
   rather than something wrong with the data. */
.badge-muted {
  background: var(--surface-soft);
  color: var(--muted);
  border: 1px solid var(--line);
}

.overview-heading {
  margin: 22px 0 10px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.overview-heading span {
  color: var(--muted);
  font-weight: 700;
}

/* The answer to "is anything wrong?" when the answer is no. Without it the
   section simply vanishes, which reads as "not loaded" rather than "clean". */
.all-clear {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--green);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

/* Volume nobody could attribute, under the totals it is deliberately not part
   of. Tinted so it never reads as one more partner in the list. */
.unowned-row td {
  background: var(--caution-soft);
}

.unowned-row .muted-line a {
  color: var(--primary);
}

.overview-more {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 700;
}

.overview-more a {
  color: var(--primary);
  text-decoration: none;
}

.excluded {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  margin-bottom: 12px;
  font-size: 13px;
}

/* The three columns line up between the summary and every row beneath it, so
   the total sits directly above the parts it is made of. */
.excluded-summary,
.excluded-row {
  display: grid;
  grid-template-columns: 1fr 84px 150px;
  align-items: baseline;
  gap: 12px;
  padding: 9px 14px;
}

.excluded-summary {
  cursor: default;
  font-weight: 800;
  color: var(--muted);
  list-style: none;
}

.excluded-summary::-webkit-details-marker {
  display: none;
}

/* On the title, not on the summary: the summary is the grid, so a marker there
   becomes a fourth cell and shunts the three columns out of alignment. */
.excluded-title::before {
  content: "▸";
  display: inline-block;
  width: 14px;
  color: var(--muted);
  font-size: 11px;
}

.excluded[open] .excluded-title::before {
  content: "▾";
}

.excluded[open] > .excluded-summary {
  border-bottom: 1px solid var(--line-soft);
}

/* Indented by the width of the disclosure marker, so the parts line up under
   the title they belong to rather than beside it. */
.excluded-row {
  padding-left: 28px;
  color: var(--text);
  font-weight: 650;
  text-decoration: none;
}

.excluded-row:hover {
  background: var(--surface-soft);
}

.excluded-label {
  min-width: 0;
}

.excluded-note {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-weight: 500;
  font-size: 11px;
}

/* Counts and sums are read down the column, so they are aligned and tabular:
   the old strip ran them together inline and nothing lined up with anything. */
.excluded-count,
.excluded-sum {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.excluded-count {
  color: var(--muted);
  font-weight: 700;
}

.excluded-sum {
  font-weight: 800;
}

.stat-pair-item {
  min-width: 0;
}

.stat-pair .stat-value {
  font-size: 16px;
}

.stat-sublabel {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 4px;
}

.stat-hint {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.accounts-filter-form {
  margin-bottom: 0;
}

.accounts-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
}

.accounts-search {
  flex: 1 1 240px;
  min-width: 0;
}

/* .filter-input is full-width by default for the column popovers; inside the
   flex toolbar that would push every control onto a line of its own. */
.accounts-toolbar > .filter-input {
  width: auto;
  min-width: 150px;
  height: 38px;
}

.accounts-search input {
  width: 100%;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 14px;
  color: var(--text);
  font: inherit;
  font-weight: 650;
}

.accounts-search input::placeholder {
  color: var(--placeholder);
}

/* Two tiers on one line. The three links after the divider are not more
   registers: they are where money that was taken out of turnover is listed,
   and a flat row of six equals gave no way to know that. */
.main-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-right: auto;
  margin-left: 28px;
}

.main-nav a {
  color: var(--muted);
  font-weight: 650;
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}

.main-nav a:hover {
  color: var(--primary);
}

.main-nav a.active {
  color: var(--text);
  border-bottom-color: var(--primary);
}

.nav-group {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-left: 18px;
  border-left: 1px solid var(--line);
}

.nav-group-label {
  color: var(--placeholder);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.muted-line {
  color: var(--muted);
  font-weight: 500;
  font-size: 12px;
}

.txn-period {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.txn-period-label {
  color: var(--muted);
  font-weight: 650;
}

.txn-period .filter-input {
  width: auto;
  min-width: 132px;
  height: 34px;
}

.columns-menu {
  position: relative;
}

.columns-menu > .button {
  cursor: pointer;
}

.columns-popover,
.filter-popover {
  position: absolute;
  z-index: 60;
  display: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 50px var(--shadow-strong);
}

.columns-popover.open,
.filter-popover.open {
  display: block;
}

.columns-popover {
  top: calc(100% + 8px);
  right: 0;
  width: 240px;
  padding: 12px;
}

.columns-popover-title,
.filter-title {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 850;
}

.column-option,
.choice-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
}

.column-option input,
.choice-option input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

.columns-reset {
  width: 100%;
  margin-top: 10px;
  min-height: 36px;
  padding: 7px 10px;
  cursor: pointer;
}

.active-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -4px 0 14px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  padding: 0 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
}

.clear-chip {
  color: var(--muted);
}

.cards-results {
  transition: opacity 0.16s ease;
}

.cards-results.is-loading {
  opacity: 0.58;
}

.table-shell,
.detail-panel {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  overflow: hidden;
  min-width: 0;
}

.table-shell {
  overflow: visible;
}

/* The register, and only the register, sizes its columns to their contents.
   `table-layout: fixed` gives all fourteen the same width, and no width that
   divides evenly into a page fits "45 789 758.44" — the totals row has been
   quietly clipping every one of its figures. Natural widths let the money
   columns take what they need while Банк and Статус stay narrow, and the shell
   scrolls on the rare screen too small for the result.

   Scoped here because every other table on the site has a colgroup sized to
   its own content and would gain nothing but a scrollbar. */
.cards-results .table-shell {
  overflow-x: auto;
}

.cards-results .cards-table {
  table-layout: auto;
  width: max-content;
  min-width: 100%;
}

/* With room to spare they fit on one line again. */
.cards-results .column-sort {
  white-space: nowrap;
}

.cards-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.cards-table th,
.cards-table td {
  height: 46px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cards-table th {
  position: relative;
  height: auto;
  min-height: 46px;
  padding-top: 8px;
  padding-bottom: 8px;
  white-space: normal;
  overflow: visible;
  background: var(--surface-soft);
  color: var(--head-text);
  font-size: 13px;
  text-transform: none;
  font-weight: 800;
}

.column-head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* Headings wrap; the figures under them do not. `table-layout: fixed` divides
   the width equally whatever the labels say, so a long one truncated to
   "Комисс…" and no amount of shortening bought room for the others. Two lines
   costs a few pixels of header height and fits every column at once. */
.column-sort {
  min-width: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.sort-mark {
  color: var(--primary);
}

.filter-toggle {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--faint);
  font-weight: 850;
  cursor: pointer;
}

.filter-toggle.active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

.filter-popover {
  top: calc(100% + 8px);
  left: 10px;
  width: 260px;
  padding: 12px;
  text-align: left;
}

.filter-input {
  width: 100%;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  color: var(--text);
  font: inherit;
  font-weight: 650;
}

.choice-list {
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
}

.range-filter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.filter-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.compact-button {
  min-height: 36px;
  padding: 7px 10px;
  cursor: pointer;
}

/* Reads as part of the head rather than as a row of data: same tint, a firm
   rule under it, and no hover. */
.cards-table thead .totals-row td {
  height: 40px;
  background: var(--primary-soft);
  border-top: 1px solid var(--line);
  border-bottom: 2px solid var(--line);
  font-size: 14px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.totals-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.cards-table tbody tr {
  cursor: pointer;
}

.cards-table tbody tr:hover {
  background: var(--surface-raised);
}

.number {
  text-align: right !important;
}

/* table-layout: fixed splits the width evenly unless columns say otherwise, so
   a date and a sentence get the same room. Tables that carry prose declare
   widths in a colgroup and mark the prose cell to wrap rather than be clipped. */
.cards-table td.cell-wrap {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1.35;
}

.strong {
  font-weight: 750;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.empty {
  height: 90px !important;
  color: var(--muted);
  text-align: center !important;
}

.back-link {
  color: var(--primary);
  font-weight: 800;
  text-decoration: none;
  margin-top: 4px;
}

.detail-heading {
  justify-content: flex-start;
  align-items: center;
}

.detail-heading h1 {
  margin-bottom: 4px;
}

.detail-heading p {
  margin: 0;
  color: var(--muted);
  font-weight: 650;
}

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
}

.detail-panel {
  padding: 18px;
}

.panel-title {
  font-weight: 850;
  margin-bottom: 14px;
}

/* Qualifies the figure directly above it — how much of that total rests on
   something weaker than a record. */
.column-note {
  margin: -6px 0 12px;
  font-size: 12px;
  opacity: 0.75;
}

/* Says which period the figures beside it cover, so a narrowed page can never
   be mistaken for the whole history. */
.panel-note {
  font-weight: 500;
  opacity: 0.7;
  margin-left: 8px;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.compact-grid {
  grid-template-columns: repeat(2, minmax(220px, 1fr));
}

.field {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-raised);
}

.field span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 6px;
}

.field strong {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.field strong.amount-positive {
  color: var(--primary);
}

.field strong.amount-negative {
  color: var(--danger);
}

.field.stacked + .field.stacked {
  margin-top: 10px;
}

.note-panel {
  margin-top: 16px;
}

.note-text {
  margin: 0;
  line-height: 1.55;
  white-space: pre-wrap;
}

.transaction-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.transaction-column {
  min-width: 0;
}

.transaction-column-title {
  margin-bottom: 12px;
  color: var(--text);
  font-weight: 850;
}

.transaction-summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 14px;
}

.transaction-tabs {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  margin-bottom: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-soft);
}

.transaction-tab {
  min-width: 92px;
  padding: 9px 14px;
  border-radius: 6px;
  color: var(--muted);
  text-align: center;
  text-decoration: none;
  font-weight: 800;
}

.transaction-tab.active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: 0 1px 4px var(--shadow-soft);
}

.transaction-pane {
  display: none;
}

.transaction-pane.active {
  display: block;
}

.txn-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.txn-filter-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.txn-filters .filter-input {
  width: auto;
  height: 32px;
  padding: 0 8px;
  font-size: 13px;
  font-weight: 650;
}

.txn-filters input[type="date"] {
  width: 132px;
}

.txn-filters input[type="time"] {
  width: 88px;
}

.txn-filters .txn-amount {
  width: 92px;
}

.txn-filter-sep {
  color: var(--muted);
}

.txn-filter-reset {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.txn-filter-reset:hover {
  color: var(--text);
}

.transactions-table-shell {
  overflow-x: auto;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}

.transactions-table {
  min-width: 680px;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.transactions-table th,
.transactions-table td {
  height: 42px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.transactions-table th {
  background: var(--surface-soft);
  color: var(--head-text);
  font-size: 13px;
  font-weight: 800;
}

.transactions-table tr:last-child td {
  border-bottom: 0;
}

/* Pagination UI */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  margin-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 14px;
}

.pagination-info {
  color: var(--muted);
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pagination-ellipsis {
  padding: 0 8px;
  color: var(--muted);
  user-select: none;
}

.compact-button {
  padding: 6px 12px;
  font-size: 13px;
  min-width: 36px;
  text-align: center;
}

.compact-button.primary {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}

.badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.55;
  white-space: nowrap;
}

.badge-transfer {
  background: var(--primary-soft);
  color: var(--primary);
}

.badge-warn {
  background: var(--warn-soft);
  color: var(--warn-text);
}


/* The nav went from six flat links to seven plus a group label, which is more
   than the bar holds on a laptop: it ran under the account name at 840px. It
   wraps to its own line before that happens, and the group label — the one
   part that is explanation rather than destination — is the first thing to go. */
@media (max-width: 1180px) {
  .topbar {
    height: auto;
    flex-wrap: wrap;
    row-gap: 6px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .main-nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .user-nav {
    margin-left: auto;
  }
}

@media (max-width: 720px) {
  .nav-group-label {
    display: none;
  }

  .main-nav {
    gap: 14px;
  }

  .nav-group {
    gap: 14px;
    padding-left: 14px;
  }
}

@media (max-width: 900px) {
  .section-heading,
  .detail-layout {
    display: block;
  }

  .field-grid {
    grid-template-columns: 1fr;
  }

  .side-panel {
    margin-top: 16px;
  }

  .table-shell {
    overflow-x: auto;
  }

  .cards-table {
    min-width: 1120px;
  }

  .accounts-toolbar {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The figure over the chart rather than beside it: side by side, neither has
     room to be read. */
  .hero {
    grid-template-columns: 1fr;
  }

  .hero-value {
    font-size: 28px;
  }

  .period-bar {
    width: 100%;
    justify-content: flex-start;
  }

  .columns-popover {
    left: 0;
    right: auto;
  }

  .transaction-columns {
    grid-template-columns: 1fr;
  }

  .transaction-summary-grid {
    grid-template-columns: 1fr;
  }

  .excluded-summary,
  .excluded-row {
    grid-template-columns: 1fr auto;
  }

  .excluded-count {
    display: none;
  }
}