/* Single (dark) colour scheme. Axiom-inspired executive design tokens. */
:root {
  color-scheme: dark;
  /* Core surfaces */
  --bg: #0c0d0d;
  --surface: #141515;
  --surface-2: #1b1c1c;
  --surface-3: #242525;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --line-focus: rgba(255, 255, 255, 0.28);

  /* Typography */
  --text: #ececea;
  --text-2: #9e9e9c;
  --text-3: #6b6b69;

  /* Signals */
  --profit: #4ade80;
  --profit-soft: rgba(74, 222, 128, 0.10);
  --profit-border: rgba(74, 222, 128, 0.25);
  --loss: #f87171;
  --loss-soft: rgba(248, 113, 113, 0.10);
  --loss-border: rgba(248, 113, 113, 0.25);
  --warn: #f59e0b;
  --warn-soft: rgba(245, 158, 11, 0.10);

  /* Geometry & Timing */
  --r-sm: 6px;
  --r: 8px;
  --r-card: 8px;
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;

  /* Backward compatibility aliases */
  --paper: var(--bg);
  --card: var(--surface);
  --ink: var(--text);
  --muted: var(--text-2);
  --ui-bg: var(--bg);
  --ui-surface: var(--surface);
  --ui-soft: var(--surface-2);
  --ui-border: var(--line);
  --ui-border-light: rgba(255, 255, 255, 0.05);
  --ui-text: var(--text);
  --ui-muted: var(--text-2);
  --ui-accent: var(--text);
  --red: var(--loss);
  --ui-danger: var(--loss);
  --ui-focus: var(--line-focus);
  --ui-radius: 8px;
  --ui-radius-sm: 6px;
  --ui-radius-pill: 9999px;
  --ui-shadow: none;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  background: var(--ui-bg);
  color: var(--ui-text);
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0;
}

button,
input,
textarea,
select {
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: inherit;
}

button {
  touch-action: manipulation;
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ui-focus) 45%, transparent);
  outline-offset: 2px;
}

.app-shell {
  max-width: 1180px;
  margin: auto;
  padding: 32px 36px 80px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--ui-border);
}

.topbar .eyebrow {
  display: none;
}

.topbar h1 {
  margin: 0;
  font-size: 18px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--ui-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.round-button, .close-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--ui-border);
  border-radius: 9px;
  background: var(--ui-surface);
  color: var(--ui-text);
  box-shadow: none;
  font-size: 18px;
}

.round-button {
  border-radius: 50%;
  font-size: 25px;
  line-height: 1;
}


.text-button {
  border: 0;
  background: transparent;
  color: var(--ui-accent);
  padding: 4px 6px;
  font-size: 11px;
  font-weight: 700;
}

.tabs {
  display: flex;
  gap: 3px;
  margin: 18px 0 26px;
  border-bottom: 1px solid var(--ui-border);
}

.tab {
  flex: 1;
  min-height: 40px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--ui-muted);
  padding: 10px 13px;
  font-size: 12px;
  font-weight: 650;
}

.tab.active {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--text);
  font-weight: 600;
}

.screen {
  display: none;
  max-width: 1000px;
}

.screen.active {
  display: block;
  /* The switch between tabs used to be an instant repaint. A short fade-and-rise
     makes the change of context legible; it is disabled under reduced-motion. */
  animation: screen-enter 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.weekday-row,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.weekday-row {
  margin-bottom: 8px;
  color: var(--ui-muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.calendar-day:active {
  transform: scale(0.985);
}

.calendar-day.month-locked {
  opacity: 0.85;
}

/* Superseded: the canonical .calendar-day.closed rule now lives with the rest
   of the calendar styling (it sets its own muted number colour). */

.profit-text,
.calendar-day .amount.profit-text {
  color: var(--profit);
}

.loss-text,
.calendar-day .amount.loss-text {
  color: var(--loss);
}

.legend {
  display: flex;
  gap: 14px;
  margin-top: 12px;
  color: var(--ui-muted);
  font-size: 10px;
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--ui-border);
}

.dot.profit {
  background: var(--profit);
}

.dot.loss {
  background: var(--loss);
}

.dot.closed {
  border-radius: 2px;
  background: #9ca9a2;
}

.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.section-heading h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text);
}

.section-heading > span,
.helper,
.intro {
  color: var(--ui-muted);
  font-size: 12px;
  line-height: 1.5;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 16px 0;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.07);
}

.summary-card .summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.year-card .summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 18px;
}

.summary-grid > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 14px 16px;
  background: var(--ui-surface);
}

.summary-grid span,
.year-total span {
  display: block;
  color: var(--ui-muted);
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

.summary-grid strong,
.year-total strong {
  display: block;
  font-size: 18px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.progress-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}

.progress-label strong {
  font-size: 12px;
  font-weight: 700;
}

.progress-track {
  height: 8px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
}

.progress-track div {
  height: 100%;
  width: 0;
  border-radius: 4px;
  background: var(--profit);
  transform-origin: left center;
  animation: progress-fill 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: width 0.25s;
}

/* History heading: the year total below it is the subject of the screen, so the
   card header divider is dropped here. With it, the rule landed between
   "Actual profit this year" and the figure, splitting the one thing that should
   read as a single unit. */
.history-heading {
  align-items: center;
  padding-bottom: 0;
  border-bottom: 0;
  /* Generous gap to the figure below: the headline number needs air around it,
     and with no divider it would otherwise sit tight under the heading. */
  margin-bottom: 22px;
}

.year-picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ui-muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.year-picker select {
  margin-top: 0;
  min-height: 34px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

select,
input,
textarea {
  width: 100%;
  min-height: 40px;
  margin-top: 6px;
  padding: 9px 11px;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: var(--ui-surface);
  color: var(--ui-text);
}

select {
  width: auto;
  padding: 8px;
}

textarea {
  min-height: 70px;
  resize: vertical;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.months-list {
  display: grid;
  gap: 8px;
}

.year-total {
  margin-bottom: 18px;
}

.year-total span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ui-muted);
  font-weight: 650;
}

/* The headline figure for the screen. Sized and coloured to read as the subject
   rather than as a caption above the summary grid. */
.year-total strong {
  display: block;
  font-size: 34px;
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--profit);
  /* Breathing room under the label and above the summary grid, so the figure
     reads as a headline rather than sitting on the rule below it. */
  margin: 6px 0 0;
  padding-bottom: 2px;
}

/* The year-over-year delta follows the label on the same line, so it reads as
   context for the figure instead of competing with it. */
.year-total-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 0;
}

.month-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 13px 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  background: linear-gradient(180deg, #161717 0%, #141515 100%);
  cursor: pointer;
  animation: row-enter var(--motion-base) ease-out both;
  transition: transform var(--motion-fast) ease, border-color var(--motion-fast) ease, background-color var(--motion-fast) ease;
}

.month-row:nth-child(2n) {
  animation-delay: 35ms;
}

.month-row:nth-child(3n) {
  animation-delay: 70ms;
}

.month-row:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: #1b1c1c;
  transform: translateX(3px);
}

.month-row button {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 0;
  background: none;
  color: var(--ui-text);
  padding: 0;
  text-align: left;
  font-weight: 700;
  cursor: pointer;
}

.month-row small {
  display: block;
  margin-top: 3px;
  color: var(--text-3);
  font-weight: 400;
  font-size: 11.5px;
}

.month-row strong {
  font-size: 15px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.data-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 14px 0;
}

/* The main transfer action spans the row so intent is obvious. */
.data-actions .primary-button {
  grid-column: 1 / -1;
}
.charts-card {
  overflow: hidden;
}

.chart-block {
  margin: 10px 0 14px;
  padding: 13px;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  background: var(--ui-bg);
}

.chart-title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 7px;
  color: var(--ui-muted);
  font-size: 11px;
  font-weight: 650;
}
.chart-bar {
  width: 100%;
  max-width: 22px;
  min-height: 3px;
  border-radius: 4px 4px 0 0;
  background: var(--ui-accent);
  transform: scaleY(0);
  transform-origin: bottom center;
  animation: chart-rise 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.chart-bar.loss {
  background: var(--loss);
}
.cost-form {
  max-width: 760px;
}

.cost-form label,
.dialog-card label {
  display: block;
  margin: 13px 0;
  font-size: 12px;
  font-weight: 700;
}


.cost-row label {
  min-width: 0;
}

.cost-row input[type="number"] {
  text-align: right;
}

.primary-button,
.secondary-button {
  min-height: 34px;
  border-radius: var(--r-sm);
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease, color var(--motion-fast) ease;
}

.primary-button {
  border: 1px solid var(--text);
  background: var(--text);
  color: var(--bg);
}

.primary-button:hover {
  background: #ffffff;
  border-color: #ffffff;
}

.secondary-button {
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--text);
}

.secondary-button:hover {
  background: var(--surface-3);
  border-color: var(--line-focus);
}

.secondary-button.danger {
  color: var(--loss);
  border-color: var(--loss-border);
  background: var(--loss-soft);
}

.secondary-button.danger:hover {
  background: rgba(248, 113, 113, 0.18);
  border-color: rgba(248, 113, 113, 0.4);
}

.weekday-chip:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background: #202121;
}

.weekday-chip input {
  display: none;
}

/* A shop that closes on Sundays is a schedule, not an error — so this reads as
   an active amber toggle rather than a red one. */
.info-card {
  margin-top: 24px;
  font-size: 13px;
}

.info-card > strong {
  font-size: 13px;
  font-weight: 750;
}

.info-card p {
  margin: 4px 0 0;
}

.switch-label {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  margin-bottom: 14px !important;
  padding: 10px 12px;
  border: 1px solid var(--ui-border);
  border-radius: 11px;
  background: var(--ui-soft);
}

.switch-label input {
  display: none;
}

.switch {
  width: 42px;
  height: 24px;
  border-radius: 20px;
  background: #cdd3cf;
  position: relative;
}

.switch:after {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: 0.2s;
}

.switch-label input:checked + .switch {
  background: var(--ui-accent);
}

.switch-label input:checked + .switch:after {
  left: 21px;
}

.label-note {
  float: right;
  color: var(--ui-muted);
  font-size: 11px;
  font-weight: 400;
}

.result-box {
  margin: 2px 0 16px;
  padding: 14px 15px;
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  background: var(--ui-soft);
}

.result-box span {
  color: var(--ui-muted);
  font-size: 13px;
}

.result-box strong {
  display: block;
  margin: 4px 0;
  font-size: 23px;
  font-weight: 700;
}

.result-box p {
  margin: 0;
  color: var(--ui-muted);
  font-size: 12px;
}

dialog {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 32px);
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
}

dialog[open] {
  animation: dialog-enter var(--motion-base) cubic-bezier(0.22, 1, 0.36, 1) both;
}

.dialog-card {
  width: min(94vw, 460px);
  max-height: min(92vh, 800px);
  overflow: auto;
  padding: 20px 22px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
}

.dialog-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dialog-heading h2 {
  font-size: 18px;
  line-height: 1.2;
}

.close-button:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
}

.dialog-card label input,
.dialog-card label textarea {
  margin-top: 7px;
  background: #111212;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dialog-card label input:focus,
.dialog-card label textarea:focus {
  border-color: rgba(255, 255, 255, 0.3);
  outline: 0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
}

.dialog-card label input:disabled,
.dialog-card label textarea:disabled,
.switch-label input:disabled + .switch {
  opacity: 0.65;
  cursor: not-allowed;
}

.month-locked-notice {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  background: var(--ui-soft);
  color: var(--ui-muted);
}

.dialog-actions {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  margin: 0 -22px -22px;
  padding: 16px 22px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--ui-surface);
}

.dialog-actions .primary-button {
  margin-left: auto;
  min-width: 104px;
}

.dialog-actions .secondary-button.danger {
  border-color: transparent;
  background: transparent;
}

.dialog-actions .secondary-button.danger:hover {
  background: rgba(255, 81, 72, 0.12);
  border-color: rgba(255, 81, 72, 0.3);
}

/* Data / More Screen Enhancements */
.status-indicator-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(105, 211, 152, 0.12);
  border: 1px solid rgba(105, 211, 152, 0.28);
  color: #69d398;
  font-size: 12px;
  font-weight: 650;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #69d398;
  box-shadow: 0 0 8px rgba(105, 211, 152, 0.6);
}

.status-saved-label {
  color: var(--ui-muted);
  font-size: 12px;
}

.status-saved-label strong {
  color: var(--ui-text);
}

.data-record-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 13px 15px;
  border-radius: 10px;
  background: #111212;
  border: 1px solid rgba(255, 255, 255, 0.055);
}

.data-stat-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ui-muted);
  font-weight: 650;
}

.data-stat-value {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ui-text);
}

.backup-note {
  margin-top: 10px;
}

.month-lock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.lock-status-text {
  font-weight: 700;
  margin: 0 0 4px;
}

.report-print-row {
  margin-top: 14px;
}
.hero-action-footer {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  justify-content: flex-end;
}

.hero-edit-btn {
  font-size: 12px;
  padding: 6px 14px;
  min-height: 34px;
}

.today-hero-card {
  margin-bottom: 16px;
  padding: 18px 20px;
  background: linear-gradient(150deg, #191a1a 0%, #131414 100%);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.hero-status-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hero-main-stat {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.hero-title {
  margin: 0 0 5px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-2);
}

.hero-subtitle {
  margin: 0;
  color: var(--text-3);
  font-size: 12.5px;
  max-width: 560px;
  line-height: 1.5;
}

/* The single number the whole screen exists to report. */
.hero-number {
  font-size: 38px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  line-height: 1.05;
  white-space: nowrap;
}

.hero-metrics-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.hero-metrics-strip div {
  min-width: 0;
  padding: 10px 13px;
  border-radius: 8px;
  background: #111212;
  border: 1px solid var(--ui-border);
}

.hero-metrics-strip span {
  display: block;
  color: var(--ui-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10.5px;
  font-weight: 600;
}

.hero-metrics-strip strong {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.hero-empty-state {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.hero-empty-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hero-cta {
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  background: #f4f4f2;
  color: #111111;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  cursor: pointer;
  transition: opacity 120ms ease;
}

.hero-cta:hover {
  opacity: 0.9;
  transform: none;
  box-shadow: none;
}

/* 2. Consolidated 4-Metric KPI Row */
.dashboard-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.kpi-card {
  padding: 18px 20px;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: var(--ui-surface);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.kpi-label {
  color: var(--ui-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.kpi-label-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kpi-badge {
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--ui-muted);
  font-size: 11px;
  font-weight: 600;
}

.kpi-value {
  display: block;
  margin: 8px 0 4px;
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

.kpi-sub {
  color: var(--ui-muted);
  font-size: 11.5px;
}

.kpi-progress-track {
  height: 4px;
  margin: 8px 0 6px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.kpi-progress-track div {
  height: 100%;
  background: #22c55e;
  border-radius: 2px;
  transition: width 200ms ease;
}

/* 3. Unified Interactive Trend Chart */
.dashboard-chart-section {
  margin-bottom: 20px;
  padding: 20px 22px 16px;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: var(--ui-surface);
  box-shadow: none;
}

.chart-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

.chart-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chart-header h2 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}

.chart-subtitle {
  margin: 3px 0 0;
  color: var(--ui-muted);
  font-size: 12px;
}

.chart-view-switcher {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 6px;
  background: #0d0e0e;
  border: 1px solid var(--ui-border);
}

.chart-tab-btn {
  padding: 5px 12px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ui-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease;
}

.chart-tab-btn:hover {
  color: var(--ui-text);
}

.chart-tab-btn.active {
  background: #222323;
  color: #ffffff;
  font-weight: 600;
  box-shadow: none;
}

/* 4. Dashboard Main Multi-Column Responsive Layout */
.dashboard-main-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dashboard-primary-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.dashboard-side-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.attention-card,
.recent-card {
  padding: 20px 22px;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: var(--ui-surface);
  box-shadow: none;
  min-height: 180px;
}

.attention-card .section-heading,
.recent-card .section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.attention-card h2,
.recent-card h2 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
}

@media (min-width: 1100px) {
  .dashboard-main-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 20px;
    align-items: start;
  }

  .dashboard-side-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 24px;
  }

  .dashboard-side-col .attention-card,
  .dashboard-side-col .recent-card {
    margin-bottom: 0;
  }
}

@media (min-width: 1400px) {
  .dashboard-main-layout {
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 24px;
  }
}
.recent-entry-btn {
  border: 0;
  background: transparent;
  color: var(--ui-text);
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.recent-entry-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.recent-entry-btn strong {
  font-size: 13px;
  font-weight: 700;
}

.dashboard-entry-sub {
  color: var(--ui-muted);
  font-size: 11px;
}

.chart-plot {
  position: relative;
  padding: 14px 14px 8px;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: #0f1011;
  overflow: visible;
}

.dashboard-chart {
  display: grid;
  grid-template-columns: repeat(31, minmax(4px, 1fr));
  align-items: end;
  gap: 3px;
  height: 150px;
  padding: 8px 4px 0;
  border-bottom: 1px solid var(--ui-border);
}

.dashboard-chart:has(.dashboard-svg-chart) {
  display: block;
  height: auto;
  padding: 0;
  border-bottom: 0;
  background: none;
}
.chart-tooltip {
  position: absolute;
  pointer-events: none;
  background: #18191a;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 11.5px;
  color: #f4f4f2;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65);
  transform: translate(-50%, -100%);
  margin-top: -12px;
  transition: opacity 80ms ease;
  opacity: 0;
  z-index: 50;
  white-space: nowrap;
}

.chart-tooltip.visible {
  opacity: 1;
}

.chart-tooltip-header {
  font-weight: 700;
  margin-bottom: 5px;
  color: #ffffff;
  font-size: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 4px;
}

.chart-tooltip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 3px;
  color: var(--ui-muted);
}

.chart-tooltip-row strong {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #f4f4f2;
}

.dashboard-svg-chart {
  display: block;
  width: 100%;
  height: 200px;
  overflow: visible;
}

/* The History chart carries more detail: taller plot, roomier gutter. */
.dashboard-svg-chart--history {
  height: 286px;
}

.dashboard-svg-chart .chart-grid-line {
  stroke: rgba(255, 255, 255, 0.055);
  stroke-width: 1;
}

/* The x-axis floor, drawn under the grid so the plot reads as a panel. */
.dashboard-svg-chart .chart-baseline {
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 1.2;
}

.dashboard-svg-chart .chart-zero,
.dashboard-svg-chart .chart-zero-line {
  stroke: rgba(255, 255, 255, 0.24);
  stroke-width: 1.2;
}

.dashboard-svg-chart .chart-average {
  stroke: #f59e0b;
  stroke-width: 1.2;
  stroke-dasharray: 4 3;
  opacity: 0.9;
}

.dashboard-svg-chart .chart-average-label {
  fill: #f59e0b;
  font: 600 11px ui-monospace, SFMono-Regular, monospace;
}

.dashboard-svg-chart .chart-avg-badge-rect {
  fill: #19160d;
  stroke: rgba(245, 158, 11, 0.6);
  stroke-width: 1;
}

.dashboard-svg-chart .chart-avg-badge-text {
  fill: #f59e0b;
  font: 600 11px ui-monospace, SFMono-Regular, monospace;
}
.dashboard-svg-chart .chart-empty-slot {
  fill: rgba(255, 255, 255, 0.13);
  pointer-events: none;
}

.dashboard-svg-chart .chart-bar-value {
  font: 600 11px ui-monospace, SFMono-Regular, monospace;
  fill: var(--text-2);
  pointer-events: none;
  paint-order: stroke;
  stroke: #0f1011;
  stroke-width: 2.5px;
  stroke-linejoin: round;
}

.dashboard-svg-chart .chart-bar-value.is-profit {
  fill: var(--profit);
}

.dashboard-svg-chart .chart-bar-value.is-loss {
  fill: var(--loss);
}

/* Inside-bar labels sit on coloured fill, so they drop the dark halo. */
.dashboard-svg-chart .chart-bar-value.is-inside {
  fill: #0f1011;
  stroke: none;
  font-weight: 700;
}
.dashboard-svg-chart .chart-axis-label {
  fill: #8e9490;
  font: 500 11px ui-monospace, SFMono-Regular, monospace;
}

.dashboard-svg-chart .chart-axis-label.zero {
  fill: var(--text-2);
  font-weight: 600;
}

.dashboard-svg-chart .chart-axis-label-x {
  fill: #8e9490;
  font: 500 11px ui-monospace, SFMono-Regular, monospace;
  transition: fill 120ms ease;
}

.dashboard-svg-chart .chart-axis-label-x.is-current {
  fill: #ffffff;
  font-weight: 700;
}

.dashboard-svg-chart .chart-axis-label-x.has-data {
  fill: #e2e8f0;
}

/* Marks the month currently being viewed on the x-axis. */
.dashboard-svg-chart .chart-current-tick {
  stroke: var(--profit);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.85;
}

.dashboard-svg-chart .history-bar {
  transition: opacity 120ms ease, filter 120ms ease;
  cursor: pointer;
}

.dashboard-svg-chart .history-bar:hover {
  filter: brightness(1.25);
}

.dashboard-svg-chart .history-bar.key-positive {
  fill: var(--profit);
}

.dashboard-svg-chart .history-bar.key-negative {
  fill: var(--loss);
}
.dashboard-svg-chart .chart-profit-bar {
  fill: #22c55e;
  transition: opacity 120ms ease;
  transform-origin: center;
}

.dashboard-svg-chart .chart-profit-bar:hover,
.dashboard-svg-chart .chart-profit-bar.selected {
  filter: brightness(1.2);
  cursor: pointer;
}

.dashboard-svg-chart .chart-profit-bar.loss {
  fill: #ef4444;
}

.dashboard-svg-chart .chart-profit-bar.best {
  fill: #22c55e;
}

.dashboard-svg-chart .chart-profit-bar.zero {
  fill: rgba(255, 255, 255, 0.2);
}

.dashboard-svg-chart .chart-profit-bar.current {
  stroke: #ffffff;
  stroke-width: 1.5;
}

.dashboard-svg-chart .chart-tick-notch {
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 1;
}

.dashboard-svg-chart .chart-crosshair {
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 1.2;
  pointer-events: none;
}

/* The bar or point the readout is describing. Mirrors the History chart's
   .is-active treatment so hover feedback is identical across the app. */
.dashboard-svg-chart .chart-profit-bar.is-active {
  filter: brightness(1.45);
  stroke: rgba(255, 255, 255, 0.7);
  stroke-width: 1.5;
}

.dashboard-svg-chart .chart-point-dot.is-active {
  r: 5.5;
}

.dashboard-svg-chart .chart-point-latest.is-active {
  r: 7;
}

.dashboard-svg-chart .chart-focus-dot {
  stroke: #ffffff;
  stroke-width: 2.5;
  pointer-events: none;
  transition: r 90ms ease;
}

.dashboard-svg-chart .chart-focus-dot.pos {
  fill: #22c55e;
}

.dashboard-svg-chart .chart-focus-dot.neg {
  fill: #ef4444;
}

.dashboard-svg-chart .chart-focus-dot.neutral {
  fill: #f59e0b;
}

.dashboard-svg-chart .chart-point-dot {
  stroke-width: 1.5;
  stroke: #0f1011;
}

.dashboard-svg-chart .chart-point-dot.pos {
  fill: #22c55e;
}

.dashboard-svg-chart .chart-point-dot.neg {
  fill: #ef4444;
}

.dashboard-svg-chart .chart-point-latest {
  fill: #ffffff;
  stroke: #22c55e;
  stroke-width: 2.5;
}

.dashboard-svg-chart .chart-point-latest.neg {
  stroke: #ef4444;
}

.dashboard-svg-chart .chart-trajectory-line {
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dashboard-svg-chart .chart-trajectory-area {
  pointer-events: none;
}

.dashboard-svg-chart .chart-projection {
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.dashboard-svg-chart .chart-interactive-overlay {
  fill: transparent;
  cursor: crosshair;
}

.chart-insight {
  margin: 10px 0 0;
  color: var(--ui-muted);
  font-size: 11.5px;
  line-height: 1.4;
}

.chart-key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--ui-muted);
  font-size: 11px;
}

.chart-zero-key,
.chart-average-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chart-zero-key:before,
.chart-average-key:before {
  content: "";
  display: inline-block;
  width: 14px;
}

.chart-zero-key:before {
  border-top: 1.5px solid rgba(255, 255, 255, 0.4);
}

.chart-average-key:before {
  border-top: 1.5px dashed #eab308;
}

.key-swatch {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-radius: 2px;
  background: var(--ui-muted);
}

.key-positive {
  background: var(--profit);
}

.key-negative {
  background: var(--loss);
}
/* Legend swatch for "no entry recorded" (used by the Daily sales chart). */
.key-muted {
  background: rgba(255, 255, 255, 0.16);
}
.attention-card,
.recent-card {
  min-height: 180px;
}

.dashboard-list-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 8px 10px;
  margin: 0 -10px;
  border-radius: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 13px;
  color: #d1d5db;
  transition: background 120ms ease;
}

.dashboard-list-item:hover {
  background: rgba(255, 255, 255, 0.035);
}

.recent-card .dashboard-list-item {
  justify-content: space-between;
}

.dashboard-list-item:first-child {
  border-top: 0;
}

.item-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.recent-entry-btn {
  border: 0;
  background: transparent;
  color: var(--ui-text);
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
}

.recent-entry-btn strong {
  font-size: 12.5px;
  font-weight: 600;
}

.dashboard-entry-sub {
  color: var(--ui-muted);
  font-size: 11px;
}
.dashboard-list-item button {
  border: 0;
  background: none;
  color: inherit;
  padding: 0;
  text-align: left;
}

.dashboard-list-item strong {
  font: 600 12px ui-monospace, SFMono-Regular, monospace;
  white-space: nowrap;
}

.dashboard-empty {
  color: var(--ui-muted);
  font-size: 13px;
}


body.dark .profit-text,
body.dark .calendar-day .amount.profit-text,
body.dark #summaryActual.profit-text,
body.dark #dashboardActual.profit-text {
  color: var(--profit);
}

body.dark .loss-text,
body.dark .calendar-day .amount.loss-text,
body.dark #summaryActual.loss-text,
body.dark #dashboardActual.loss-text {
  color: var(--loss);
}

body.dark .calendar-day.profit {
  background: var(--profit-soft);
  border-color: var(--profit-border);
}

body.dark .calendar-day.loss {
  background: var(--loss-soft);
  border-color: var(--loss-border);
}

body.dark .progress-track div {
  background: #69d398;
}

body.dark .primary-button {
  color: #111111;
}

body.dark .switch {
  background: #3b443e;
}

body.dark .switch-label input:checked + .switch {
  background: #f4f4f2;
}

body.dark .switch-label input:checked + .switch:after {
  background: #111111;
}

.chart-active-readout {
  display: inline-block;
  min-height: 1.4em;
  margin: 8px 0 0;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  color: #c9d1cc;
  font: 600 11px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.dashboard-svg-chart rect[tabindex="0"] {
  cursor: pointer;
  outline: none;
}

.dashboard-svg-chart rect.selected {
  stroke: #ffffff;
  stroke-width: 1.5;
}

body.dark dialog::backdrop {
  background: rgba(0, 0, 0, 0.68);
}

@keyframes screen-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes row-enter {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes progress-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes chart-rise {
  from {
    opacity: 0.35;
    transform: scaleY(0);
  }
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes dialog-enter {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

@media (min-width: 900px) {
  .app-shell {
    max-width: none;
    padding: 24px 44px 72px 182px;
  }

  .topbar {
    display: none;
  }

  .tabs {
    position: fixed;
    z-index: 4;
    left: 0;
    top: 0;
    bottom: 0;
    width: 156px;
    margin: 0;
    padding: 24px 14px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #0c0d0d;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    border-bottom: 0;
  }

  .tabs:before {
    display: none;
  }

  .tabs-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 4px 18px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--line);
  }

  /* A purpose-drawn ledger mark rather than a decorative dot or a symbol-font
     glyph: a page block with ruled lines, echoing the app's own icon. Stroke
     only, so it inherits colour and never looks like a pasted-in asset. */
  .brand-mark {
    display: inline-flex;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: #8e9490;
  }

  .brand-mark svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .brand-text {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.09em;
    color: #ffffff;
  }

  .tabs-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
  }

  .tab {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #8e9490;
    font-size: 12.5px;
    font-weight: 550;
    text-align: left;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  }

  .tab:hover:not(.active) {
    background: rgba(255, 255, 255, 0.04);
    color: #ffffff;
  }

  /* The active tab is marked by a rule at the rail edge plus a lifted surface —
     no bullet, no icon. It reads as the page you are on. */
  .tab.active {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.10);
    color: #ffffff;
    font-weight: 650;
  }

  .tab.active:before {
    content: "";
    position: absolute;
    left: -14px;
    top: 7px;
    bottom: 7px;
    width: 2px;
    border-radius: 0 2px 2px 0;
    background: #ffffff;
  }
.screen,
  .calendar-card,
  .summary-card,
  .year-card,
  .info-card,
  .charts-card,
  .dashboard-card,
  .dashboard-heading,
  .month-heading {
    max-width: none;
    width: 100%;
  }

  .summary-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .chart-block {
    display: inline-block;
    vertical-align: top;
    width: calc(50% - 7px);
    margin: 0;
  }

  .chart-block + .chart-block {
    margin-left: 10px;
  }

  .calendar-day {
    min-height: 78px;
    padding: 10px;
  }
}

@media (max-width: 899px) {
  .app-shell {
    padding: 20px 16px 60px;
  }

  .tabs-brand {
    display: none;
  }

  /* The rail collapses to a horizontal strip on small screens; the active marker
     moves from the rail edge to the bottom of the tab. */
  .tab.active:before {
    left: 8px;
    right: 8px;
    top: auto;
    bottom: -1px;
    width: auto;
    height: 2px;
    border-radius: 2px 2px 0 0;
  }

  .tabs-list {
    display: flex;
    gap: 3px;
    width: 100%;
  }

  .tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tabs::-webkit-scrollbar {
    display: none;
  }

  .tab {
    flex: 0 0 auto;
    min-width: 74px;
  }

  .topbar:after {
    display: none;
  }
}

@media (max-width: 720px) {
  .dashboard-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
.dashboard-month-actions {
    align-self: stretch;
    justify-content: space-between;
  }

  .dashboard-kpi-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .hero-main-stat {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .hero-metrics-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-empty-state {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .chart-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .chart-view-switcher {
    overflow-x: auto;
  }

  .dashboard-side-col {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .dashboard-svg-chart {
    height: 160px;
  }

  .recent-card {
    min-height: 0;
  }

  .summary-card .summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .year-card .summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .weekday-toggles {
    grid-template-columns: repeat(4, 1fr);
  }

  .status-indicator-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .month-lock-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

@media (max-width: 520px) {
  .app-shell {
    padding: 16px 12px 48px;
  }

  .calendar-card {
    padding: 10px;
  }

  .calendar-grid {
    gap: 3px;
  }

  .calendar-day {
    min-height: 59px;
    padding: 6px 5px;
  }

  .calendar-day .amount {
    margin-top: 7px;
    font-size: 9px;
  }

  .summary-grid strong {
    font-size: 15px;
  }

  .cost-row {
    grid-template-columns: minmax(0, 1fr) 105px 30px;
  }

  .remove-cost {
    width: 30px;
  }

  .data-actions {
    grid-template-columns: 1fr;
  }

  .dialog-card {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    padding: 18px;
    border-radius: 17px;
  }

  .dialog-actions {
    margin: 0 -18px -18px;
    padding: 12px 18px 18px;
    flex-wrap: wrap;
  }

  .label-note {
    float: none;
    display: block;
    margin-top: 3px;
  }
}

.year-total strong.is-loss {
  color: var(--loss);
}



/* ==========================================================
 * VISUAL OVERHAUL: Daily, Costs, Data & Layout Enhancements
 * ========================================================== */

/* Month Heading & Actions */
.month-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 20px;
}

.month-heading h2 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}

.month-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.month-actions .round-button {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-size: 14px;
}

.month-actions .round-button:hover {
  background: var(--surface-3);
  color: var(--text);
}

.month-actions .text-button {
  height: 28px;
  padding: 0 10px;
  font-size: 11.5px;
  font-weight: 600;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text);
}

.month-actions .text-button:hover {
  background: var(--surface-3);
}

/* Daily Summary Strip */
.daily-summary-strip {
  margin-bottom: 16px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.daily-summary-strip .summary-grid {
  margin: 0 0 14px;
}

.daily-progress-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0 0;
  border-top: 1px solid var(--line);
}

.daily-progress-row .progress-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
}

.daily-progress-row .progress-label strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.daily-progress-row .progress-track {
  flex: 1;
  margin-top: 0;
}

.open-days-pill {
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* Calendar Card & Grid */
.calendar-card {
  padding: 16px 18px 14px;
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--r);
  box-shadow: none;
}

.calendar-day {
  min-height: 82px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}

.calendar-day:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
  transform: none;
  box-shadow: none;
}

/* --- Closed days: a hatched "shutters down" treatment ---
   The diagonal lines read as deliberately closed rather than simply empty or
   disabled, and they apply to every closed day consistently (the old opacity
   rule never did, because the base and hover rules reset it). */
.calendar-day.closed {
  background-color: #101111;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.055) 0,
    rgba(255, 255, 255, 0.055) 1px,
    transparent 1px,
    transparent 6px
  );
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.05);
  color: var(--text-3);
}

.calendar-day.closed:hover {
  background-color: #141515;
  border-color: rgba(255, 255, 255, 0.12);
}

.calendar-day.closed .number {
  color: #5b5f5d;
}

/* A reopened day carries an entry, so it keeps its profit/loss colour. */
.calendar-day.closed.profit,
.calendar-day.closed.loss {
  border-style: solid;
}

.calendar-day.closed.profit {
  background-color: rgba(74, 222, 128, 0.12);
  border-color: rgba(74, 222, 128, 0.32);
}

.calendar-day.closed.loss {
  background-color: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.32);
}

/* --- Profitable and loss-making days: strong enough tint to scan at a glance --- */
.calendar-day.profit {
  background: linear-gradient(158deg, rgba(74, 222, 128, 0.20) 0%, rgba(74, 222, 128, 0.09) 100%);
  border-color: rgba(74, 222, 128, 0.34);
}

.calendar-day.profit .number {
  color: #a7f3c4;
}

.calendar-day.profit .amount,
.calendar-day .amount.profit-text {
  color: var(--profit);
}

.calendar-day.loss {
  background: linear-gradient(158deg, rgba(248, 113, 113, 0.20) 0%, rgba(248, 113, 113, 0.09) 100%);
  border-color: rgba(248, 113, 113, 0.34);
}

.calendar-day.loss .number {
  color: #f6b8b8;
}

.calendar-day.loss .amount,
.calendar-day .amount.loss-text {
  color: var(--loss);
}

/* --- Today: unmistakable, and it must survive the profit/loss tint --- */
.calendar-day.today {
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
}

.calendar-day.today .number {
  color: #ffffff;
  font-weight: 750;
}

.calendar-day .number {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}

.calendar-day .amount {
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: right;
  margin-top: auto;
  letter-spacing: -0.01em;
}

/* Costs Two-Column Layout */
.costs-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 16px;
}

@media (min-width: 1050px) {
  .costs-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    align-items: start;
    gap: 24px;
  }
}

.cost-form-col {
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.costs-table-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px 36px;
  gap: 12px;
  padding: 0 4px 8px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
}

.cost-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px 36px;
  gap: 12px;
  align-items: center;
  padding: 4px 0;
  border-radius: var(--r-sm);
  transition: background var(--motion-fast) ease;
}

.cost-row:hover {
  background: rgba(255, 255, 255, 0.02);
}

.cost-row + .cost-row {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.cost-name-input {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 13px;
}

.cost-name-input:focus {
  border-color: var(--line-strong);
  outline: none;
}

.cost-amount-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.cost-currency-prefix {
  position: absolute;
  left: 10px;
  max-width: 26px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 600;
  pointer-events: none;
}

.cost-amount-input {
  width: 100%;
  height: 36px;
  padding: 0 10px 0 32px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.cost-amount-input:focus {
  border-color: var(--line-strong);
  outline: none;
}

.remove-cost {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-3);
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 0;
  align-self: center;
}

.remove-cost:hover {
  background: var(--loss-soft);
  border-color: var(--loss-border);
  color: var(--loss);
}

.cost-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 4px;
  margin-top: 10px;
  border-top: 1px solid var(--line);
}

.total-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--text-2);
}

.total-row strong {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.daily-share-card {
  padding: 14px 16px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
  margin: 12px 0 16px;
}

.daily-share-card .share-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  font-weight: 600;
}

.daily-share-card .share-value {
  display: block;
  margin: 4px 0 2px;
  font-size: 16px;
  font-weight: 700;
  color: var(--profit);
  font-variant-numeric: tabular-nums;
}

.daily-share-card .share-helper {
  margin: 0;
  font-size: 11.5px;
  color: var(--text-3);
}

.cost-save-main {
  width: 100%;
  height: 38px;
}

.costs-settings-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.settings-card {
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

/* Stacked settings cards get their own rhythm, including .closed-settings. */
.settings-card + .settings-card {
  margin-top: 16px;
}

/* The yearly-comparison / insights cards sit in the History column. */
.insights-card {
  margin-top: 18px;
}

.setting-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}

.setting-field input {
  height: 36px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 0 12px;
  color: var(--text);
  font-size: 13px;
}

.setting-field input:focus {
  border-color: var(--line-strong);
  outline: none;
}

.weekday-toggles {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 12px 0 14px;
}

.weekday-chip {
  padding: 6px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--motion-fast) ease;
}

.weekday-chip.is-closed {
  background: var(--loss-soft);
  border-color: var(--loss-border);
  color: var(--loss);
}

.local-storage-note {
  font-size: 12px;
  color: var(--text-3);
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.local-storage-note strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text-2);
}

.local-storage-note p {
  margin: 0;
  line-height: 1.4;
}

/* Data Screen Grid Layout */
.data-status-strip {
  margin-bottom: 16px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r);
}

/* Connection badge on the left, last-saved time on the right. */
.data-status-strip .status-indicator-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.data-status-strip .status-badge {
  padding: 4px 10px;
  border-radius: var(--r-sm);
  background: var(--profit-soft);
  border: 1px solid var(--profit-border);
  color: var(--profit);
  font-size: 12px;
  font-weight: 600;
}

.data-grid-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

@media (min-width: 900px) {
  .data-grid-layout {
    grid-template-columns: 1fr 1fr;
  }
}

.data-card-item {
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* ==========================================================
 * Yearly Comparison & Annual Highlights Styling
 * ========================================================== */

/* .year-total-header is defined with the base year-card rules above; the later
   duplicate that pushed the delta badge to the far right was removed. */

.year-diff-badge {
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.yearly-comparison-card {
  margin-top: 16px;
  overflow: hidden;
}

.yearly-comparison-table-wrap {
  overflow-x: auto;
  margin-top: 14px;
}

.yearly-comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.yearly-comparison-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-2);
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  background: var(--surface);
}

.yearly-comparison-table th:not(:first-child) {
  text-align: right;
}

.yearly-comparison-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.yearly-comparison-table td.num-cell {
  text-align: right;
}

.yearly-comparison-table .yearly-row {
  cursor: pointer;
  transition: background var(--motion-fast) ease;
}

.yearly-comparison-table .yearly-row:hover {
  background: var(--surface-2);
}

.yearly-comparison-table .yearly-row.active-year-row {
  background: rgba(255, 255, 255, 0.04);
}

.yearly-comparison-table .active-year-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 9999px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.yearly-comparison-table .yoy-baseline {
  color: var(--text-3);
  font-size: 11px;
}

/* Annual Insights Highlights Grid */
.insights-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 14px;
}

@media (max-width: 900px) {
  .insights-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.insight-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 15px 16px 14px 18px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(160deg, var(--surface-2) 0%, #171818 100%);
  transition: border-color var(--motion-fast) ease;
}

.insight-tile:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

/* Accent bar so the tiles read as a set rather than plain boxes. */
.insight-tile:before {
  content: "";
  position: absolute;
  top: 15px;
  bottom: 14px;
  left: 0;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--profit);
  opacity: 0.55;
}

.insight-tile-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-2);
  font-weight: 600;
}

.insight-tile-value {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.insight-tile-sub {
  font-size: 12px;
  color: var(--text-3);
}

.insight-year-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface-2);
  padding: 2px 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
}

/* --- Year-over-year comparison chart (History · Yearly Net Profit tab) ---
 * One bar per calendar year, every bar carrying the same meaning, so the
 * comparison is like-for-like. The year currently being viewed is marked. */
.dashboard-svg-chart .history-bar.year-bar {
  transition: opacity 120ms ease, filter 120ms ease;
}

.dashboard-svg-chart .history-bar.year-bar:hover {
  filter: brightness(1.3);
}

/* The bar the hover readout is describing. This is the visual guarantee that the
   number on screen belongs to the bar you are pointing at. */
.dashboard-svg-chart .history-bar.is-active {
  filter: brightness(1.45);
  stroke: rgba(255, 255, 255, 0.7);
  stroke-width: 1.5;
}

/* The year being viewed gets a subtle outline rather than a colour change,
   so profit/loss colour still reads correctly at a glance. */
.dashboard-svg-chart .history-bar.year-bar.is-viewing {
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1.5;
}

/* Secondary line inside a chart tooltip. */
.chart-tooltip-note {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-3);
  font-size: 10.5px;
  line-height: 1.3;
}

/* ==========================================================
 * Phase 0 — shared primitives
 * One consistent card header, stat tile, empty state and
 * table treatment across every screen. Additive: the existing
 * class names keep working, these just unify their appearance.
 * ========================================================== */

/* --- Card headers, stat tiles and info cards ---
       The canonical definitions live with the base components above
       (.section-heading line ~453, .summary-grid line ~467, .info-card line ~971)
       so there is exactly ONE rule each. The History block only styles
       History-specific parts. This block adds what those did not cover. */

/* Section headings that are purely a label opt out of the divider. */
/* --- Empty states: same treatment wherever a list has nothing to show --- */
.dashboard-empty,
.empty-state {
  display: block;
  margin: 0;
  padding: 18px 4px;
  color: var(--text-3);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
}

.dashboard-list-item + .dashboard-empty {
  padding-top: 14px;
}

/* --- Tables: consistent header weight, alignment and row rhythm --- */
.yearly-comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.yearly-comparison-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-2);
  background: #101111;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.yearly-comparison-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.yearly-comparison-table tbody tr:hover td {
  background: var(--surface-2);
}

/* --- Focus: one visible ring for every interactive element --- */
.tab:focus-visible,
.chart-tab-btn:focus-visible,
.weekday-chip:focus-visible,
.month-row:focus-visible,
.recent-entry-btn:focus-visible,
.dashboard-list-item button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ==========================================================
 * Overhaul phase 1 — Dashboard
 * The hero card edits live on the base .today-hero-card / .hero-* rules above.
 * What remains here are the hooks markup used but nothing styled.
 * ========================================================== */

/* Date eyebrow above the headline (was unstyled). */
.hero-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}

.hero-date-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 9999px;
  background: var(--profit-soft);
  border: 1px solid var(--profit-border);
  color: var(--profit);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* --- Needs attention: the dot should not be the only signal ---
   .dashboard-list-item itself is defined with the base components above. */
/* ==========================================================
 * Overhaul phases 2-4 — Daily, Costs, Data
 * All refinements are folded into the canonical base rules for
 * .calendar-day / .result-box / .cost-row / .weekday-chip /
 * .daily-share-card / .data-status-strip / .data-record-stat.
 * Only genuinely new hooks are declared here.
 * ========================================================== */

/* Summary strip: the four figures should carry equal weight. */
.daily-summary-strip .summary-grid strong {
  font-size: 18px;
}

/* Save row: the primary action for this screen gets its own line. */
.cost-save-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

/* ==========================================================
 * Shared book (Data screen)
 * Two states in one card: a connect form, and a status panel.
 * ========================================================== */

#syncCard {
  margin-top: 16px;
}

.sync-form {
  margin-top: 14px;
}

.sync-form .setting-field {
  margin-top: 10px;
}

.sync-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 16px;
}

.sync-form-actions .primary-button {
  min-width: 132px;
}

/* The label/value pairs mirror the status strip above for consistency. */
.sync-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 4px 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.07);
}

.sync-status-grid > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px;
  background: var(--surface);
}

.sync-status-grid span {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
}

.sync-status-grid strong {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.sync-message {
  margin-top: 12px;
  color: var(--loss);
}

@media (max-width: 520px) {
  .sync-status-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Pairing -------------------------------------------------------------
 * A shortcut past retyping the passphrase on a phone keyboard, so it is
 * collapsed by default and never competes with the primary Connect path. */

.sync-pair-details {
  margin-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 14px;
}

.sync-pair-details > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  list-style: none;
}

.sync-pair-details > summary::-webkit-details-marker {
  display: none;
}

/* A drawn chevron rather than a text glyph, so it does not depend on a symbol
   font being installed. */
.sync-pair-details > summary:before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-1px) rotate(-45deg);
  transition: transform 0.18s ease;
}

.sync-pair-details[open] > summary:before {
  transform: translateY(-2px) rotate(45deg);
}

.sync-pair-details > summary:hover {
  color: var(--text);
}

.sync-code-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  background: #0d0e0f;
}

.sync-code-row code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: 0.09em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.sync-pair-code {
  margin-top: 14px;
}

/* --- Conflicts -----------------------------------------------------------
 * A decision, not an alarm: neutral frame, both versions side by side, and the
 * figures shown so the choice can actually be made. */

.sync-conflicts {
  margin-top: 16px;
  padding: 14px 15px 4px;
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 12px;
  background: var(--warn-soft);
}

.sync-conflicts-title {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: #f3c07a;
}

.conflict-row {
  padding: 12px 0 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.conflict-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.conflict-head {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

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

.conflict-side {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 9px;
  background: var(--surface);
}

.conflict-side span {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
}

.conflict-side strong {
  font-size: 13px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.conflict-side em {
  font-style: normal;
  font-size: 11.5px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.conflict-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 11px;
}

@media (max-width: 520px) {
  .conflict-sides {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
 * History tab enhancements
 * Additive layer: same dark palette and single-column layout,
 * tightened data presentation. Loaded last so these win.
 * ========================================================== */

/* --- Chart card: calmer frame, wider breathing room --- */
.history-charts-card {
  padding-bottom: 18px;
}

.history-charts-card .chart-plot {
  background: #0d0e0f;
  border-color: rgba(255, 255, 255, 0.07);
  padding: 10px 12px 6px;
}

.history-charts-card .chart-footer-row {
  align-items: flex-start;
  gap: 20px;
}

/* --- Year summary card --- */
.year-card {
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.year-card .summary-grid > div {
  padding: 13px 16px;
}

.year-card .summary-grid strong {
  font-size: 19px;
}

.year-diff-badge.profit-text,
.year-diff-badge.loss-text {
  padding: 3px 9px;
  border-radius: 9999px;
  font-size: 11.5px;
  font-weight: 700;
}

.year-diff-badge.profit-text {
  background: var(--profit-soft);
  border: 1px solid var(--profit-border);
}

.year-diff-badge.loss-text {
  background: var(--loss-soft);
  border: 1px solid var(--loss-border);
}

/* --- Yearly comparison table --- */
.yearly-comparison-card {
  border-color: rgba(255, 255, 255, 0.07);
}

/* Small pill beside a card title, e.g. "Multi-year ledger performance". */
.helper-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 9999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Container hook for a chart plus its tooltip; layout is inherited. */
.shared-chart {
  position: relative;
  width: 100%;
}

.yearly-comparison-table th {
  background: #101111;
  border-bottom-color: rgba(255, 255, 255, 0.12);
  padding: 11px 14px;
}

.yearly-comparison-table tbody tr + tr td {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.yearly-comparison-table .yearly-row {
  transition: background var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}

.yearly-comparison-table .yearly-row:hover {
  background: var(--surface-2);
}

.yearly-comparison-table .yearly-row:hover .year-cell strong {
  color: #ffffff;
}

.yearly-comparison-table .yearly-row.active-year-row {
  background: rgba(74, 222, 128, 0.045);
  box-shadow: inset 3px 0 0 var(--profit);
}

.yearly-comparison-table .year-cell strong {
  font-size: 14px;
  letter-spacing: -0.01em;
}

.yearly-comparison-table .num-cell {
  font-variant-numeric: tabular-nums;
}

.yearly-comparison-table .num-cell.profit-text,
.yearly-comparison-table .num-cell.loss-text {
  font-weight: 700;
}

.yearly-comparison-table .text-sub {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 500;
}

.yearly-comparison-table .yoy-baseline,
.yearly-comparison-table .num-cell .profit-text,
.yearly-comparison-table .num-cell .loss-text {
  font-weight: 650;
}

/* --- Annual insight tiles: styles folded into the base .insight-tile rule --- */

.insight-tile-value {
  font-size: 17.5px;
  letter-spacing: -0.015em;
}

.insight-year-badge {
  font-variant-numeric: tabular-nums;
}

/* Month rows: refinements folded into the base .month-row rule above. */

.badge-closed {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.32);
  color: #f0b45e;
}

/* --- Charts card header/insight polish --- */
.history-charts-card .chart-insight {
  margin-top: 12px;
  padding-left: 10px;
  border-left: 2px solid rgba(255, 255, 255, 0.14);
  font-size: 12px;
}

@media (max-width: 720px) {
  .dashboard-svg-chart--history {
    height: 240px;
  }

  .history-charts-card .chart-plot {
    padding: 6px 2px 2px;
  }

  .yearly-comparison-table th,
  .yearly-comparison-table td {
    padding: 10px 8px;
    font-size: 12px;
  }

  .insight-tile-value {
    font-size: 16px;
  }
}