/* Mobile-first — primary use is a phone (SPEC.md §4). */
:root {
  --bg: #fff;
  --bg-2: #f5f5f6;
  --fg: #1a1a1a;
  --fg-2: #6b6b70;
  --line: #e3e3e6;
  --accent: #ee4d2d; /* Shopee orange */
  --green: #1a9e4b;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --bg-2: #1e1e20;
    --fg: #ececec;
    --fg-2: #9a9aa0;
    --line: #2c2c30;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--fg);
}

header {
  padding: 0.8rem 1rem 0.2rem;
  max-width: 560px;
  margin: 0 auto;
}

h1 { color: var(--accent); font-size: 1.15rem; margin: 0; }
h2 { font-size: 0.95rem; margin: 1.2rem 0 0.5rem; color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.04em; }

#view {
  max-width: 560px;
  margin: 0 auto;
  padding: 0.6rem 1rem 5.5rem; /* room for tab bar */
}

.loading, .empty { color: var(--fg-2); padding: 2rem 0; text-align: center; }
.row { display: flex; gap: 0.5rem; align-items: center; }

/* Inputs */
input, select, textarea, button {
  font: inherit;
  color: inherit;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.6rem 0.7rem;
}
textarea { width: 100%; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
label { display: block; margin: 0.7rem 0; font-size: 0.9rem; }
label input { width: 100%; margin-top: 0.3rem; }
label small { color: var(--fg-2); }

button { cursor: pointer; }
button.primary {
  background: var(--accent);
  color: #fff;
  border: none;
  font-weight: 600;
  width: 100%;
  padding: 0.75rem;
  margin-top: 0.6rem;
}
button:disabled { opacity: 0.5; }

/* Dashboard cards */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 0.8rem; }
.card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.8rem;
}
.card.accent { grid-column: 1 / -1; border-color: var(--accent); }
.card-label { font-size: 0.78rem; color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.04em; }
.card-value { font-size: 1.45rem; font-weight: 700; margin: 0.15rem 0; }
.card.accent .card-value { color: var(--accent); }
.card-sub { font-size: 0.78rem; color: var(--fg-2); }

.month-select { font-weight: 600; }

/* Type breakdown */
.type-grid { display: flex; flex-direction: column; gap: 0.35rem; }
.type-row {
  display: flex; justify-content: space-between;
  background: var(--bg-2); border-radius: 10px; padding: 0.55rem 0.7rem;
}
.type-row small { color: var(--fg-2); }

/* Merchant bars */
.bars { display: flex; flex-direction: column; gap: 0.45rem; }
.bar-row { display: grid; grid-template-columns: 7.5rem 1fr auto; gap: 0.5rem; align-items: center; font-size: 0.85rem; }
.bar-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { background: var(--bg-2); border-radius: 6px; height: 0.8rem; }
.bar-fill { background: var(--accent); border-radius: 6px; height: 100%; min-width: 2px; }
.bar-value { font-variant-numeric: tabular-nums; }

/* Transactions */
.filters { display: flex; gap: 0.5rem; margin: 0.7rem 0; }
.filters input { flex: 1; min-width: 0; }
.tx-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.tx {
  display: flex; align-items: center; gap: 0.6rem;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 0.6rem 0.7rem;
}
.tx-main { flex: 1; min-width: 0; }
.tx-merchant { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-meta { font-size: 0.78rem; color: var(--fg-2); }
.tx-amount { font-variant-numeric: tabular-nums; font-weight: 600; }
.tx-amount.pos { color: var(--green); }
.tx-del { background: none; border: none; color: var(--fg-2); padding: 0.3rem; }

/* Add view */
.preview-table { width: 100%; border-collapse: collapse; margin: 0.7rem 0; font-size: 0.85rem; }
.preview-table th, .preview-table td { text-align: left; padding: 0.35rem 0.4rem; border-bottom: 1px solid var(--line); }
.preview-table .r { text-align: right; white-space: nowrap; }
.warn {
  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
  border: 1px solid var(--accent);
  border-radius: 10px; padding: 0.6rem 0.7rem; margin: 0.7rem 0; font-size: 0.85rem;
}
#manual select, #manual input { width: 100%; margin-bottom: 0.5rem; }
#manual .row > * { flex: 1; min-width: 0; }

hr { border: none; border-top: 1px solid var(--line); margin: 1.2rem 0; }

/* Trend chart */
.trend-svg { width: 100%; height: auto; }
.trend-svg .axis { stroke: var(--line); stroke-width: 1; }
.trend-svg .bar-charges { fill: var(--accent); }
.trend-svg .bar-payments { fill: var(--fg-2); opacity: 0.55; }
.trend-svg .trend-label { font-size: 10px; fill: var(--fg-2); text-anchor: middle; }
.trend-svg .trend-net { font-size: 9px; fill: var(--green); text-anchor: middle; }
.trend-svg .trend-net.owe { fill: var(--accent); }
.trend-legend { display: flex; gap: 1rem; font-size: 0.75rem; color: var(--fg-2); margin-top: 0.3rem; flex-wrap: wrap; }
.trend-legend .sw { display: inline-block; width: 0.7em; height: 0.7em; border-radius: 2px; margin-right: 0.3em; }
.trend-legend .sw-charges { background: var(--accent); }
.trend-legend .sw-payments { background: var(--fg-2); opacity: 0.55; }

/* Error state */
.error-state { text-align: center; padding: 2.5rem 1rem; color: var(--fg-2); }
.error-state button { margin-top: 0.6rem; width: 100%; }

/* Tab bar */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex;
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  flex: 1; background: none; border: none; border-radius: 0;
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
  padding: 0.5rem 0 0.6rem; font-size: 1.1rem; color: var(--fg-2);
}
.tab span { font-size: 0.65rem; }
.tab.active { color: var(--accent); }

/* Toast */
#toast {
  position: fixed; left: 50%; bottom: 4.5rem; transform: translateX(-50%) translateY(20px);
  background: var(--fg); color: var(--bg);
  border-radius: 10px; padding: 0.6rem 1rem; font-size: 0.9rem;
  opacity: 0; pointer-events: none; transition: all 0.25s; max-width: 90vw;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.error { background: #c0392b; color: #fff; }