/* ─── Reset & Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0f1117;
  color: #e2e8f0;
  min-height: 100vh;
}

/* ─── Header ───────────────────────────────────────────────────────────────── */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: #1a1d27;
  border-bottom: 1px solid #2d3148;
}

header h1 { font-size: 1.4rem; color: #7c85ff; }

#user-info { display: flex; align-items: center; gap: 1rem; font-size: 0.85rem; color: #94a3b8; }

/* ─── Main Layout ──────────────────────────────────────────────────────────── */
main { max-width: 1200px; margin: 0 auto; padding: 1.5rem; }

.columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.5rem; }
@media (max-width: 768px) { .columns { grid-template-columns: 1fr; } }

/* ─── Overview Widget ──────────────────────────────────────────────────────── */
.widget-tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #2d3148;
  padding-bottom: 0.75rem;
}

.widget-tab {
  background: transparent;
  color: #64748b;
  border: none;
  padding: 0.35rem 0.85rem;
  font-size: 0.8rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  min-height: unset;
}
.widget-tab:hover { background: #2d3148; color: #e2e8f0; }
.widget-tab.active { background: #7c85ff; color: white; }

.stats-row { display: flex; justify-content: space-around; padding: 0.75rem 0; }

.stat { text-align: center; }
.stat label { display: block; font-size: 0.75rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; }
.stat span { font-size: 1.8rem; font-weight: 700; color: #7c85ff; }

.widget-panel { min-height: 8rem; }
.chart-empty { text-align: center; padding: 2rem 0; }

/* ─── Cards ────────────────────────────────────────────────────────────────── */
.card {
  background: #1a1d27;
  border: 1px solid #2d3148;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.card h2 { font-size: 1rem; color: #94a3b8; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.card h3 { font-size: 0.85rem; color: #64748b; margin: 1rem 0 0.5rem; }

/* ─── Buttons ──────────────────────────────────────────────────────────────── */
button {
  background: #7c85ff;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.15s;
}
button:hover { background: #6470ff; }
button.small { padding: 0.25rem 0.6rem; font-size: 0.75rem; }
button#logout-btn { background: transparent; color: #64748b; border: 1px solid #2d3148; }
button#logout-btn:hover { color: #e2e8f0; border-color: #64748b; }

/* ─── Forms ────────────────────────────────────────────────────────────────── */
form { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }

input, select {
  background: #0f1117;
  border: 1px solid #2d3148;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  color: #e2e8f0;
  font-size: 0.85rem;
  width: 100%;
}
input:focus, select:focus { outline: none; border-color: #7c85ff; }

#chat-form { flex-direction: row; }
#chat-input { flex: 1; }

/* ─── Account Lists ────────────────────────────────────────────────────────── */
.account-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid #2d3148;
  font-size: 0.875rem;
}
.account-row:last-child { border-bottom: none; }
.account-row .name { color: #e2e8f0; }
.account-row .balance { color: #7c85ff; font-weight: 600; }
.account-row .delete-btn { background: transparent; color: #ef4444; font-size: 0.75rem; padding: 0.2rem 0.4rem; }
.account-row .delete-btn:hover { background: #2d1a1a; }

.bill-row { align-items: flex-start; }
.bill-amounts { display: flex; gap: 1.5rem; }
.bill-col { display: flex; flex-direction: column; align-items: flex-end; font-size: 0.8rem; }
.bill-col small { font-size: 0.7rem; margin-bottom: 0.1rem; }
.editable-amount { color: #7c85ff; font-weight: 600; cursor: pointer; border-bottom: 1px dashed #7c85ff; }
.editable-amount:hover { color: #a5acff; }
.actual-amount { font-weight: 600; }
.actual-amount.over { color: #ef4444; }
.actual-amount.under { color: #22c55e; }
input.inline-edit { background: #1a1d27; border: 1px solid #7c85ff; border-radius: 4px; color: #e2e8f0; padding: 0.15rem 0.3rem; font-size: 0.875rem; }
.actual-empty { cursor: pointer; border-bottom: 1px dashed #64748b; }
.actual-empty:hover { color: #94a3b8; }
.updated-label { display: block; font-size: 0.65rem; color: #64748b; margin-top: 0.1rem; }

.regex-row { display: flex; gap: 0.5rem; }
.regex-row input { flex: 1; }
.regex-row button { white-space: nowrap; padding: 0.4rem 0.75rem; font-size: 0.8rem; }
.regex-results { margin-top: 0.4rem; font-size: 0.8rem; }
.regex-match { padding: 0.2rem 0; border-bottom: 1px solid #2d3148; display: flex; justify-content: space-between; }
.regex-error { color: #ef4444; }

/* ─── Transactions ─────────────────────────────────────────────────────────── */
.txn-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid #2d3148;
  font-size: 0.8rem;
  align-items: center;
}
.txn-row:last-child { border-bottom: none; }
.txn-row .desc { color: #e2e8f0; }
.txn-row .cat { color: #64748b; font-size: 0.7rem; }
.txn-row .amt { font-weight: 600; }
.txn-row .amt.expense { color: #ef4444; }
.txn-row .amt.income { color: #22c55e; }

/* ─── Chat ─────────────────────────────────────────────────────────────────── */
#chat-messages {
  max-height: 350px;
  overflow-y: auto;
  margin-bottom: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.chat-msg {
  padding: 0.6rem 0.9rem;
  border-radius: 10px;
  font-size: 0.85rem;
  line-height: 1.5;
  max-width: 90%;
}
.chat-msg.user { background: #2d3148; align-self: flex-end; color: #e2e8f0; }
.chat-msg.assistant { background: #1e2a1e; border: 1px solid #2d4a2d; color: #86efac; align-self: flex-start; }
.chat-msg.error { background: #2d1a1a; border: 1px solid #4a2d2d; color: #fca5a5; }

/* ─── Misc ─────────────────────────────────────────────────────────────────── */
.muted { color: #64748b; font-size: 0.85rem; }
hr { border: none; border-top: 1px solid #2d3148; margin: 1rem 0; }

.auth-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: #64748b;
}

#link-bank-btn { margin-top: 0.75rem; width: 100%; }

#chat-section { margin-top: 1.5rem; }
#chat-messages { min-height: 80px; }

/* ─── Mobile ────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  header {
    padding: 0.75rem 1rem;
    gap: 0.5rem;
  }

  header h1 { font-size: 1.1rem; }

  #user-info {
    gap: 0.5rem;
    font-size: 0.75rem;
  }

  /* Hide email, just show Sign Out on narrow screens */
  #user-email { display: none; }

  main { padding: 0.75rem; }

  .stats-row { flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; }
  .stat { flex: 1 1 calc(50% - 0.5rem); min-width: 0; }
  .stat span { font-size: 1.3rem; }
  .stat:first-child { flex: 1 1 100%; border-bottom: 1px solid #2d3148; padding-bottom: 0.75rem; }

  .widget-tab { min-height: unset; padding: 0.35rem 0.65rem; font-size: 0.75rem; }

  .card { padding: 1rem; }

  /* Tappable buttons */
  button { min-height: 44px; }
  button.small { min-height: 32px; }

  /* Chat input row — keep inline but size Send button properly */
  #chat-form { gap: 0.5rem; }
  #chat-form button { min-width: 64px; flex-shrink: 0; }
}