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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f5f5f5;
  color: #222;
  line-height: 1.5;
}

header {
  background: #1a1a2e;
  color: #fff;
  padding: 1rem 1.5rem;
}
header h1 { font-size: 1.25rem; }

main {
  max-width: 700px;
  margin: 1.5rem auto;
  padding: 0 1rem;
}

/* ─── Calendar ─────────────────────────────────── */
.calendar {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  overflow: hidden;
}

.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: #1a1a2e;
  color: #fff;
}
.cal-title { font-size: 1.1rem; font-weight: 600; }
.cal-nav {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.75rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 0.25rem;
  opacity: 0.8;
}
.cal-nav:hover { opacity: 1; }

.cal-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.cal-dow-row {
  background: #f0f0f5;
}
.cal-dow {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #888;
  padding: 0.4rem 0;
}
/* Sunday red, Saturday blue */
.cal-dow:first-child { color: #c0392b; }
.cal-dow:last-child  { color: #2980b9; }

.cal-cell {
  border-top: 1px solid #eee;
  border-right: 1px solid #eee;
  min-height: 72px;
  padding: 0.35rem 0.45rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.cal-cell:nth-child(7n) { border-right: none; }
.cal-empty { background: #fafafa; }

.cal-day { cursor: pointer; transition: background 0.15s; }
.cal-day:hover { background: #f0f4ff; }

.cal-day-num {
  font-size: 0.85rem;
  font-weight: 500;
  color: #444;
  align-self: flex-start;
}
/* Color weekends */
.cal-row .cal-day:nth-child(7n+1) .cal-day-num { color: #c0392b; }
.cal-row .cal-day:nth-child(7n)   .cal-day-num { color: #2980b9; }

.today { background: #fffbea; }
.today .cal-day-num {
  background: #1a1a2e;
  color: #fff !important;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

.has-amount { background: #f0f7ff; }
.has-amount:hover { background: #deeeff; }

.cal-amount {
  font-size: 0.72rem;
  font-weight: 700;
  color: #c0392b;
  word-break: break-all;
}

/* ─── Detail view ───────────────────────────────── */
.detail-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.detail-header h2 { font-size: 1.1rem; color: #1a1a2e; }
#btn-back {
  padding: 0.35rem 0.9rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 0.875rem;
  white-space: nowrap;
}
#btn-back:hover { background: #f0f0f0; }

/* Filter bar */
#filter-bar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
#filter-bar input {
  flex: 1;
  min-width: 140px;
  padding: 0.4rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 0.875rem;
}
#filter-bar button {
  padding: 0.4rem 0.9rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 0.875rem;
}
#filter-bar button:hover { background: #f0f0f0; }

/* Mail cards */
.mail-card {
  background: #fff;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  margin-bottom: 0.5rem;
}
.mail-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.mail-card .subject { font-weight: 600; font-size: 0.95rem; }
.mail-card .amount { font-weight: 700; color: #c0392b; white-space: nowrap; }
.mail-card .meta { font-size: 0.8rem; color: #888; margin-top: 0.25rem; }
.mail-card .snippet { font-size: 0.85rem; color: #555; margin-top: 0.4rem; }

/* Pagination */
#pagination {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1rem;
}
#pagination button {
  padding: 0.5rem 1.25rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 0.875rem;
}
#pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
#pagination button:not(:disabled):hover { background: #f0f0f0; }

/* Utility */
.hidden { display: none !important; }
#loading {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  background: #1a1a2e;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.875rem;
}
#error-msg {
  background: #fdecea;
  border: 1px solid #f5c6cb;
  color: #c0392b;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin: 1rem auto;
  max-width: 700px;
}

@media (max-width: 500px) {
  .cal-cell { min-height: 56px; padding: 0.25rem; }
  .cal-amount { font-size: 0.65rem; }
  .mail-card .card-header { flex-direction: column; }
}