@import "./design-system.css";

/* Layout for the three screens. Every colour, size, spacing and duration below
   is a design-system token; nothing here invents a value. */

html, body, #root { height: 100%; }

/* The app IS the window. --surface-desk is the prototype's fake desktop behind
   a floating window frame, so nothing here paints it; the OS supplies the
   border and shadow that the prototype had to draw itself. */
body {
  user-select: none;
  overflow: hidden;
  background: var(--surface-window);
}

/* ── Titlebar ─────────────────────────────────────────────────────────── */

.titlebar {
  height: var(--titlebar-h);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* The macOS traffic lights float over this bar, so the wordmark is inset past
     them rather than sitting on the 20px window gutter. */
  padding: 0 var(--gutter-window) 0 76px;
  --wails-draggable: drag;
}

.wordmark {
  font: var(--type-label);
  font-family: var(--font-core);
  letter-spacing: var(--ls-brand);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-primary);
}
.wordmark .why { color: var(--signal); }

.titlebar-status {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  font: var(--type-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--n-600);
}
.status-dot[data-live="true"] { background: var(--positive); animation: var(--pulse-live); }
@media (prefers-reduced-motion: reduce) { .status-dot { animation: none; } }

/* ── Body ─────────────────────────────────────────────────────────────── */

.body { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.hero {
  border-top: var(--border-rule);
  padding: var(--pad-hero-y) var(--gutter-window) var(--sp-10);
}

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font: var(--type-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.section-header .meta { color: var(--text-signal); }

.amount {
  margin-top: var(--sp-5);
  font: var(--type-amount);
  letter-spacing: var(--ls-amount);
  font-variant-numeric: tabular-nums;
  color: var(--text-money);
}
.amount .cents, .amount .tail { color: var(--text-money-cents); }
.amount[data-dim="false"] .cents { color: inherit; }

.meter {
  margin-top: var(--sp-10);
  display: flex;
  gap: 2px;
}
.meter > span { flex: 1; height: 8px; background: var(--meter-track); }
.meter > span[data-fill="fill"] { background: var(--meter-fill); }
.meter > span[data-fill="tip"] { background: var(--meter-tip); }

/* ── Week strip ───────────────────────────────────────────────────────── */

.week {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: var(--border-hairline);
  border-bottom: var(--border-hairline);
}
.week > .day {
  padding: var(--sp-8) var(--sp-6) var(--sp-9);
  border-right: var(--border-hairline);
}
.week > .day:last-child { border-right: none; }

.day .label {
  font: var(--type-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.day[data-state="today"] .label { color: var(--text-signal); }

.day .value {
  margin-top: var(--sp-5);
  font: var(--type-value);
  letter-spacing: var(--ls-value);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.day[data-state="future"] .value { color: var(--text-disabled); }

/* ── Server rows ──────────────────────────────────────────────────────── */

.rows { flex: 1; min-height: 0; overflow-y: auto; }

.row {
  display: grid;
  grid-template-columns: var(--bw-marker) 44px 1fr auto;
  align-items: center;
  gap: var(--sp-8);
  width: 100%;
  padding: var(--pad-row-y) var(--pad-row-x) var(--pad-row-y) 0;
  background: transparent;
  border: none;
  border-bottom: var(--border-row);
  text-align: left;
  cursor: pointer;
  transition: var(--transition-control);
}
.row:hover { background: var(--n-900); }

/* The marker is a fixed 26px stub, not a full-height rule. */
.row .marker { height: 26px; background: var(--bar-idle); }
.row[data-state="active"] .marker { background: var(--signal); }
.row[data-state="paused"] .marker { background: var(--warn); }

.row .id {
  font: var(--type-value);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-value);
  color: var(--text-primary);
}

.row .meta {
  font: var(--type-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Row amounts are primary ink at value size, and never dim their cents —
   the held-back cents belong to the hero alone. */
.row .amount-sm {
  font: var(--type-value);
  letter-spacing: var(--ls-value);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

/* ── Empty state ──────────────────────────────────────────────────────── */

.empty {
  flex: 1;
  border-top: var(--border-hairline);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-11);
}
.empty .title { font: var(--type-title); letter-spacing: var(--ls-title); color: var(--text-primary); }

/* ── Footer ───────────────────────────────────────────────────────────── */

.footer {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-6) var(--gutter-window);
  border-top: var(--border-hairline);
  font: var(--type-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.footer .totals { font-variant-numeric: tabular-nums; }
.footer .totals b { font-weight: var(--fw-semibold); color: var(--text-primary); }
.footer .sep { color: var(--line-strong); margin: 0 var(--sp-3); }

/* ── Controls ─────────────────────────────────────────────────────────── */

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-h-sm);
  height: var(--control-h-sm);
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-control);
}
.icon-button:hover { color: var(--text-primary); }
/* Pulled left so the glyph optically aligns to the window gutter. */
.footer-actions { display: flex; align-items: center; gap: var(--sp-2); margin-left: -10px; }

.button {
  height: var(--control-h);
  padding: 0 var(--sp-9);
  border: var(--border-strong);
  background: transparent;
  color: var(--text-primary);
  font: var(--type-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition-control);
}
.button:hover { background: var(--surface-control-hover); }
.button[data-variant="primary"] { background: var(--n-050); color: var(--text-inverse); border-color: var(--n-050); }
.button[data-variant="primary"]:hover { background: var(--n-200); }
.button[data-variant="danger"] { color: var(--danger); border-color: var(--line-strong); }
.button:disabled { color: var(--text-disabled); border-color: var(--line-hairline); cursor: not-allowed; background: transparent; }

.back-row {
  display: flex;
  align-items: center;
  gap: var(--sp-9);
  padding: var(--sp-6) var(--gutter-window);
  border-top: var(--border-hairline);
  border-bottom: var(--border-hairline);
  font: var(--type-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.back-row .back {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  padding: 0;
  transition: var(--transition-control);
}
.back-row .back:hover { color: var(--text-primary); }
.back-row .title { color: var(--text-primary); }

.form {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--sp-10) var(--gutter-window) var(--sp-11);
  display: grid;
  align-content: start;
  gap: var(--sp-11);
}
.form > section { display: grid; gap: var(--sp-9); }
.form > section + section { border-top: var(--border-hairline); padding-top: var(--sp-10); }
.form > section[data-gap="tight"] { gap: var(--sp-8); }

.field { display: grid; gap: var(--sp-3); }
.field > .label {
  font: var(--type-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.field > .hint { font: var(--type-meta); color: var(--text-tertiary); }
.field > .error { font: var(--type-meta); color: var(--danger); }
.field[data-inline="true"] {
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-3) var(--sp-9);
}
.field[data-inline="true"] > .label { color: var(--text-primary); font: var(--type-body); text-transform: none; letter-spacing: 0; }
.field[data-inline="true"] > .hint { grid-column: 1 / -1; }

.input {
  height: var(--control-h);
  padding: 0 var(--sp-6);
  background: var(--surface-inset);
  border: var(--border-strong);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  user-select: text;
}
.input:focus { outline: none; border-color: var(--n-050); }
.input[data-invalid="true"] { border-color: var(--danger); }

/* A native time field brings its own metrics. These nudge it onto the design's
   grid without touching -webkit-appearance, which is what summons the picker on
   a phone — the whole reason the field is type="time" in the first place. The
   page declares color-scheme: dark, so the browser draws the picker's own
   chrome dark and no filter hack is needed. */
.input[type="time"] { font: inherit; min-width: 0; }
.input[type="time"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.input[type="time"]::-webkit-calendar-picker-indicator { opacity: 0.45; cursor: pointer; }
.input[type="time"]:focus::-webkit-calendar-picker-indicator { opacity: 0.8; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-9); }

.segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  height: var(--control-h);
  border: var(--border-strong);
}
.segmented > button {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font: var(--type-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition-control);
}
.segmented > button[aria-pressed="true"] { background: var(--n-050); color: var(--text-inverse); }

.select {
  height: var(--control-h);
  padding: 0 var(--sp-6);
  background: var(--surface-inset);
  border: var(--border-strong);
  color: var(--text-primary);
  appearance: none;
}

.switch {
  width: 38px;
  height: 20px;
  padding: 2px;
  background: var(--surface-inset);
  border: var(--border-strong);
  cursor: pointer;
  display: flex;
  transition: var(--transition-control);
}
.switch > span {
  width: 14px;
  height: 14px;
  background: var(--n-600);
  transition: var(--transition-control), margin-left var(--dur-fast) var(--ease-standard);
}
.switch[aria-checked="true"] { background: var(--n-050); border-color: var(--n-050); }
.switch[aria-checked="true"] > span { background: var(--n-950); margin-left: 16px; }

.screen { background: var(--surface-window); animation: screen-in var(--dur-base) var(--ease-standard); height: 100%; display: flex; flex-direction: column; }
@keyframes screen-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .screen { background: var(--surface-window); animation: none; } }