/* Same visual family as super.css / transactions.css (base, links, footer),
   kept as a near-copy for the reason transactions.css's header gives. The
   block grid and KPI tiles below are what's new. */

* {
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 16px 40px;
  color: #1b1b1b;
  font-size: 14px;
}

h1 {
  font-size: 18px;
  margin: 0;
}

a {
  color: #6b2c81;
}

.hidden {
  display: none !important;
}

.muted {
  color: #777;
  font-weight: normal;
}

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

#refresh-btn {
  background: none;
  border: 1px solid #ddd;
  border-radius: 5px;
  width: 32px;
  height: 32px;
  font-size: 16px;
  cursor: pointer;
  color: #444;
}

#refresh-btn:hover:not(:disabled) {
  border-color: #6b2c81;
  color: #6b2c81;
}

#refresh-btn:focus-visible {
  outline: 2px solid #6b2c81;
  outline-offset: 2px;
}

#refresh-btn.refreshing {
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #refresh-btn.refreshing {
    animation: none;
    opacity: 0.5;
  }
}

.state {
  padding: 40px 0;
  text-align: center;
  color: #777;
}

/* Blocks sit on a 12-column grid so later stages can size them in columns;
   at this stage each KPI takes 3 (four across), and the whole row stacks on
   a phone. */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}

.block {
  grid-column: span var(--span, 3);
  min-width: 0;
  background: #fafafa;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  padding: 12px 14px 14px;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Narrow blocks widen to half the row on a tablet, everything to the full
   row on a phone; wider saved sizes are kept as they are on a tablet. */
@media (max-width: 900px) {
  .block[data-span="3"],
  .block[data-span="4"] {
    grid-column: span 6;
  }
}

@media (max-width: 520px) {
  .block,
  .block[data-span] {
    grid-column: span 12;
  }
}

.block header {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.block h2 {
  font-size: 13px;
  margin: 0;
  font-weight: 600;
  white-space: nowrap;
}

.block-note {
  font-size: 11px;
  color: #888;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.block-body {
  flex: 1;
}

.block-fail {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  color: #777;
  font-size: 12px;
}

.block-fail::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c0392b;
}

.block[data-state="error"] .block-body {
  display: none;
}

.block[data-state="error"] .block-fail {
  display: flex;
}

/* Skeleton while a block's first load is in flight. */
.block[data-state="loading"] .block-body:empty {
  min-height: 60px;
  border-radius: 6px;
  background: linear-gradient(90deg, #eee 25%, #f6f6f6 50%, #eee 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}

@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .block[data-state="loading"] .block-body:empty {
    animation: none;
  }
}

/* While a refresh re-runs a block that already has content, dim it rather
   than blanking it. */
.block[data-state="loading"] .block-body:not(:empty) {
  opacity: 0.5;
}

.kpi-value {
  font-size: 28px;
  line-height: 1.15;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}

.kpi-line {
  font-size: 12px;
  color: #666;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

.kpi-line.tone-bad {
  color: #c0392b;
}

.kpi-line.tone-warn {
  color: #b9770e;
}

.kpi-link {
  color: #6b2c81;
}

.updated {
  font-size: 12px;
  margin-top: 12px;
}

.page-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 28px;
  font-size: 12px;
}

.app-version {
  font-size: 11px;
}

/* ---- dashboard tabs and management (stage 2) ---- */

.tabs-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.tabs {
  display: flex;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 2px;
}

.tab {
  flex: none;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  color: #555;
  cursor: pointer;
}

.tab:hover {
  background: #f2eaf5;
}

.tab[aria-selected="true"] {
  background: #6b2c81;
  color: #fff;
}

.tab:focus-visible,
.icon-btn:focus-visible,
.menu button:focus-visible,
.template-option input:focus-visible + span {
  outline: 2px solid #6b2c81;
  outline-offset: 2px;
}

.icon-btn {
  flex: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
  color: #444;
  cursor: pointer;
  list-style: none;
  padding: 0;
}

.icon-btn:hover {
  border-color: #6b2c81;
  color: #6b2c81;
}

.manage {
  position: relative;
  flex: none;
}

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

.menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 10;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  padding: 4px;
}

.menu button {
  text-align: left;
  background: none;
  border: 0;
  border-radius: 5px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.menu button:hover:not(:disabled) {
  background: #f2eaf5;
}

.menu button:disabled {
  color: #aaa;
  cursor: default;
}

.menu .danger {
  color: #c0392b;
}

.notice {
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 6px;
  background: #fdf3e1;
  color: #8a5a00;
  font-size: 12px;
}

.dlg {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 18px 20px;
  width: min(420px, calc(100vw - 32px));
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.dlg::backdrop {
  background: rgba(0, 0, 0, 0.35);
}

.dlg h2 {
  font-size: 16px;
  margin: 0 0 10px;
}

.dlg-text {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #444;
}

.field {
  display: block;
  border: 0;
  padding: 0;
  margin: 0 0 12px;
}

.field span,
.field legend {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #555;
  margin-bottom: 4px;
  padding: 0;
}

.field input[type="text"] {
  width: 100%;
  font: inherit;
  padding: 7px 9px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.templates {
  display: grid;
  gap: 6px;
}

.template-option {
  display: block;
  cursor: pointer;
}

.template-option input {
  position: absolute;
  opacity: 0;
}

.template-option span {
  display: block;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 8px 10px;
  font-weight: 600;
  font-size: 13px;
  color: #1b1b1b;
  margin: 0;
}

.template-option small {
  display: block;
  font-weight: 400;
  font-size: 11px;
  color: #777;
}

.template-option input:checked + span {
  border-color: #6b2c81;
  background: #f7f0fa;
}

.dlg-error {
  min-height: 16px;
  margin: 0 0 8px;
  font-size: 12px;
  color: #c0392b;
}

.dlg-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.dlg-actions button {
  font: inherit;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 5px;
  border: 1px solid #6b2c81;
  background: #6b2c81;
  color: #fff;
  cursor: pointer;
}

.dlg-actions button.secondary {
  background: #fff;
  color: #6b2c81;
}

.dlg-actions button.danger {
  background: #c0392b;
  border-color: #c0392b;
}

/* ---- layout editor (stage 3) ---- */

.head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.edit-toggle {
  font: inherit;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 5px;
  border: 1px solid #6b2c81;
  background: #fff;
  color: #6b2c81;
  cursor: pointer;
}

.edit-toggle[aria-pressed="true"] {
  background: #6b2c81;
  color: #fff;
}

.edit-toggle:focus-visible,
.edit-bar button:focus-visible,
.grip:focus-visible,
.remove-btn:focus-visible,
.catalog-item:focus-visible,
.block:focus-visible {
  outline: 2px solid #6b2c81;
  outline-offset: 2px;
}

.edit-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 8px 10px;
  background: #f7f0fa;
  border: 1px solid #e0cfe8;
  border-radius: 8px;
}

.edit-bar button {
  font: inherit;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 5px;
  border: 1px solid #cdb5d8;
  background: #fff;
  color: #1b1b1b;
  cursor: pointer;
}

.edit-bar button:hover:not(:disabled) {
  border-color: #6b2c81;
}

.edit-bar button:disabled {
  color: #aaa;
  cursor: default;
}

.edit-bar button.danger:not(:disabled) {
  color: #c0392b;
}

.edit-sep {
  width: 1px;
  align-self: stretch;
  background: #e0cfe8;
  margin: 0 2px;
}

.sel-info {
  font-size: 12px;
  color: #6b2c81;
  min-width: 8em;
}

.empty {
  margin: 24px 0;
  text-align: center;
  color: #777;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.grip,
.remove-btn {
  display: none;
  flex: none;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: 4px;
  color: #777;
  cursor: pointer;
  padding: 0;
  font-size: 16px;
  line-height: 1;
}

.grip {
  cursor: grab;
  touch-action: none;
  font-size: 18px;
}

.grip:active {
  cursor: grabbing;
}

.grip:hover,
.remove-btn:hover {
  background: #eee;
  color: #1b1b1b;
}

.block header h2 {
  flex: 0 0 auto;
}

.block-note {
  flex: 1 1 0;
  min-width: 0;
}

.block header {
  min-height: 26px;
}

.editing .grip,
.editing .remove-btn {
  display: inline-flex;
}

/* The handle and the x need the room, and the title matters more than the
   subtitle while arranging. */
.editing .block-note {
  display: none;
}

.editing .block header {
  justify-content: space-between;
}

.editing .block header h2 {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

.editing .block {
  cursor: default;
  border-style: dashed;
  border-color: #cdb5d8;
}

/* A tap on a link inside a block selects the block instead of leaving the
   page while arranging. */
.editing .block-body a {
  pointer-events: none;
}

.editing .block.selected {
  border-style: solid;
  border-color: #6b2c81;
  box-shadow: 0 0 0 2px #6b2c81;
}

.editing .block.dragging {
  opacity: 0.55;
}

.catalog-list {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

.catalog-item {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 11px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.catalog-item:hover {
  border-color: #6b2c81;
  background: #f7f0fa;
}

.catalog-item small {
  display: block;
  font-weight: 400;
  font-size: 11px;
  color: #777;
}

@media (prefers-reduced-motion: reduce) {
  .editing .block {
    transition: none;
  }
}

/* ---- data blocks (stage 4) ---- */

.block-setting {
  flex: none;
  max-width: 11em;
  font: inherit;
  font-size: 11px;
  padding: 2px 4px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  color: #444;
}

.block-setting:focus-visible,
.table-search:focus-visible,
.table-scroll th button:focus-visible,
.chart-host rect:focus-visible {
  outline: 2px solid #6b2c81;
  outline-offset: 1px;
}

.bars,
.flag-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bars {
  display: grid;
  gap: 9px;
  max-height: 340px;
  overflow: auto;
  padding-right: 4px;
}

.bars-empty {
  margin: 8px 0;
  font-size: 12px;
  color: #777;
}

.bar-row {
  display: grid;
  grid-template-columns: minmax(70px, 36%) 1fr auto;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}

.bar-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar-label a {
  color: inherit;
  text-decoration: none;
}

.bar-label a:hover {
  text-decoration: underline;
  color: #6b2c81;
}

.bar-tag {
  font-style: normal;
  font-size: 10px;
  color: #777;
  border: 1px solid #ddd;
  border-radius: 999px;
  padding: 0 6px;
  margin-left: 6px;
}

.bar-track {
  position: relative;
  height: 10px;
  border-radius: 5px;
  background: #ececec;
}

.bar-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 5px;
  background: #2a78d6;
}

.bar-fill.tone-over {
  background: #c0392b;
}

.bar-fill.tone-good {
  background: #22875a;
}

.bar-fill.tone-muted {
  background: #b8b8b8;
}

.bar-fill.tone-debt {
  background: #e08a2e;
}

.bar-zero {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 1px;
  background: #999;
}

.bar-value {
  white-space: nowrap;
  text-align: right;
  color: #555;
  font-variant-numeric: tabular-nums;
}

.bar-value.tone-over,
.flag-list .tone-over,
td.tone-bad {
  color: #c0392b;
}

td.tone-good {
  color: #22875a;
}

td.tone-debt {
  color: #b9770e;
}

.flag-list {
  margin-top: 8px;
  font-size: 12px;
  color: #555;
  display: grid;
  gap: 4px;
}

.table-search {
  display: block;
  width: 100%;
  margin-bottom: 6px;
  font: inherit;
  font-size: 12px;
  padding: 6px 9px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.table-scroll {
  overflow: auto;
  max-height: 320px;
  border-top: 1px solid #e6e6e6;
}

.table-scroll table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.table-scroll th {
  position: sticky;
  top: 0;
  background: #fafafa;
  text-align: left;
  font-weight: 600;
  color: #666;
  padding: 6px 8px;
  white-space: nowrap;
  border-bottom: 1px solid #e6e6e6;
}

.table-scroll th button {
  all: unset;
  cursor: pointer;
}

.table-scroll th[aria-sort="ascending"] button::after {
  content: " ↑";
}

.table-scroll th[aria-sort="descending"] button::after {
  content: " ↓";
}

.table-scroll th.r,
.table-scroll td.r {
  text-align: right;
}

.table-scroll td {
  padding: 6px 8px;
  border-bottom: 1px solid #eee;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-scroll td a {
  color: #6b2c81;
}

@media (max-width: 520px) {
  .hide-narrow {
    display: none;
  }
}

.chart-wrap {
  position: relative;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 11px;
  color: #666;
  margin-bottom: 6px;
}

.chart-legend span::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: -1px;
}

.legend-income::before {
  background: #2a78d6;
}

.legend-expenses::before {
  background: #e08a2e;
}

.legend-budget::before {
  height: 2px !important;
  background: #52514e;
  vertical-align: 3px !important;
}

.chart-host {
  min-height: 220px;
}

.chart-tooltip {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  padding: 6px 9px;
  font-size: 11px;
  display: grid;
  gap: 2px;
  max-width: 240px;
}

.chart-tooltip.hidden {
  display: none;
}

.flag-list li,
.kpi-line {
  overflow-wrap: anywhere;
}

.kpi-line + .bars-host,
.kpi-line + .flag-list {
  margin-top: 8px;
}

.bars-host + .kpi-line {
  margin-top: 10px;
}

/* ---- month review (stage 5b) ---- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0;
}

.chip {
  border: 1px solid #e0e0e0;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  background: #fff;
  font-variant-numeric: tabular-nums;
}

.chip.tone-over b {
  color: #c0392b;
}

.section-label {
  margin: 10px 0 6px;
  font-size: 11px;
  font-weight: 600;
  color: #777;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---- import / export and lazy loading (stage 6) ---- */

.menu hr {
  border: 0;
  border-top: 1px solid #eee;
  margin: 4px 2px;
}

/* A block below the fold that hasn't been asked for its data yet. */
.block[data-state="idle"] .block-body:empty {
  min-height: 60px;
  border-radius: 6px;
  background: #f1f1f1;
}

.block[data-state="idle"] .block-body:not(:empty) {
  opacity: 0.5;
}

/* Wide blocks (tables, charts) hold roughly their drawn height while empty,
   so the page doesn't jump when they fill in, and so the lazy loader judges
   what is below the fold from something close to the real layout. */
.block:not([data-span="3"]):not([data-span="4"])[data-state="loading"] .block-body:empty,
.block:not([data-span="3"]):not([data-span="4"])[data-state="idle"] .block-body:empty {
  min-height: 220px;
}