/* Native main-app screens (Tracker, tabs). Token-driven like the shell — see
   theme.css. Kept separate from index.css (the auth/setup shell) for clarity. */

.app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  background: var(--color-bg);
  color: var(--color-text);
}

/* ── Top bar ─────────────────────────────────────────────────────── */
.app-topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  padding-top: max(var(--space-3), env(safe-area-inset-top));
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

.app-topbar .logo-mark {
  width: 30px;
  height: 30px;
}

.app-topbar__word {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.app-topbar__word b { color: var(--color-primary); }

.app-topbar__spacer { flex: 1; }

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-primary-tint);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

/* ── Scroll region ───────────────────────────────────────────────── */
.app-main {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-4) var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ── Tracker: month header ───────────────────────────────────────── */
.tracker-kicker {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.tracker-title {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-top: 2px;
}
.tracker-range {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* ── Stat tiles ──────────────────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.stat {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.stat__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.stat__label::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-text-faint);
}
.stat__value {
  font-size: 1.4rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.stat--paid { border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border)); }
.stat--paid .stat__label { color: var(--color-primary); }
.stat--paid .stat__label::before { background: var(--color-primary); }
.stat--warn { border-color: color-mix(in srgb, var(--color-warn) 40%, var(--color-border)); }
.stat--warn .stat__label { color: var(--color-warn); }
.stat--warn .stat__label::before { background: var(--color-warn); }
.stat--warn .stat__value { color: var(--color-warn); }

/* ── Month nav + add ─────────────────────────────────────────────── */
.month-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.month-nav__pager {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.55rem 0.75rem;
  font-size: 0.95rem;
  font-weight: 700;
}
.month-nav__pager button {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 1.2rem;
  line-height: 1;
  padding: 0 0.5rem;
  cursor: pointer;
}
.month-nav__pager button:disabled { opacity: 0.35; }
.icon-btn {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.icon-btn--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  font-size: 1.5rem;
  font-weight: 700;
}
.icon-btn--primary:active { background: var(--color-primary-active); }
.icon-btn--ghost {
  background: transparent;
  color: var(--color-text-dim);
  border: 1px solid var(--color-border);
  font-size: 0.8rem;
  font-weight: 700;
}

/* ── Bill rows ───────────────────────────────────────────────────── */
.bill-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.bill {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-text-faint);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--color-surface);
}
.bill--paid { border-left-color: var(--color-primary); }
.bill--overdue { border-left-color: var(--color-warn); }

.bill__toggle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  cursor: pointer;
  border: 1.6px solid var(--color-border-strong);
  background: transparent;
  color: transparent;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.bill__toggle svg { width: 16px; height: 16px; }
.bill--paid .bill__toggle {
  background: var(--color-primary-tint);
  border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
  color: var(--color-primary);
}
.bill__toggle:disabled { opacity: 0.5; }

.bill__body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bill__name {
  font-size: 0.95rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bill__meta { font-size: 0.75rem; color: var(--color-text-muted); }
.bill__right { margin-left: auto; text-align: right; flex: 0 0 auto; }
.bill__amount {
  font-size: 0.95rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.bill__status {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bill--paid .bill__status { color: var(--color-primary); }
.bill--overdue .bill__status { color: var(--color-warn); }
.bill--upcoming .bill__status { color: var(--color-text-faint); }

/* ── States ──────────────────────────────────────────────────────── */
.app-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--space-5);
}
.app-state h2 { font-size: 1.05rem; font-weight: 700; color: var(--color-text); }
.app-state p { font-size: 0.875rem; max-width: 34ch; }

.placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-5);
}
.placeholder__icon {
  width: 48px;
  height: 48px;
  color: var(--color-text-faint);
}
.placeholder h2 { font-size: 1.1rem; font-weight: 700; color: var(--color-text); }
.placeholder p { font-size: 0.875rem; max-width: 30ch; }

/* ── Bottom tab bar ──────────────────────────────────────────────── */
.tabbar {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0.55rem 0.25rem;
  background: none;
  border: none;
  color: var(--color-text-faint);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tab svg { width: 22px; height: 22px; }
.tab.is-active { color: var(--color-primary); }
.tab:focus-visible { outline: 2px solid var(--color-ring); outline-offset: -2px; }
