/* ==========================================================================
   Friendly, non-corporate look. Warm, rounded, big tap targets.
   Deliberately avoids the dense/grey "accounting software" feel.
   ========================================================================== */

:root {
  --brand: #2f9e6f;
  --brand-dark: #24805a;
  --brand-soft: #eaf7f1;
  --ink: #253238;
  --muted: #6b7a80;
  --radius: 16px;
}

body {
  background: #f7f9f8;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
}

.text-primary, .navbar-brand { color: var(--brand) !important; }
.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}
.btn-outline-primary { color: var(--brand); border-color: var(--brand); }
.btn-outline-primary:hover { background: var(--brand); border-color: var(--brand); }

/* Big, obviously-tappable buttons everywhere */
.btn {
  border-radius: 12px;
  padding: .65rem 1.1rem;
  font-weight: 600;
}
.btn-lg { padding: .9rem 1.4rem; font-size: 1.05rem; }

.btn-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: 1.25rem .75rem;
  border-radius: var(--radius);
  min-height: 96px;
  text-decoration: none;
  font-weight: 700;
  font-size: .95rem;
  background: #fff;
  color: var(--ink);
  border: 1px solid #e6ebe9;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.btn-tile i { font-size: 1.6rem; color: var(--brand); }
.btn-tile:hover { border-color: var(--brand); color: var(--ink); background: var(--brand-soft); }

.card {
  border: 1px solid #e6ebe9;
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.card-title { font-weight: 700; }

.badge { border-radius: 8px; font-weight: 600; padding: .45em .7em; }

.todo-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1rem;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e6ebe9;
  margin-bottom: .5rem;
  text-decoration: none;
  color: var(--ink);
}
.todo-item:hover { background: var(--brand-soft); color: var(--ink); }
.todo-item .todo-icon { font-size: 1.3rem; color: var(--brand); }
.todo-item .todo-count { font-weight: 700; }

.section-heading {
  font-weight: 800;
  font-size: 1.1rem;
  margin: 1.5rem 0 .75rem;
}

.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--muted);
}
.empty-state i { font-size: 2.5rem; color: var(--brand); display: block; margin-bottom: .75rem; }

/* Mobile bottom tab bar */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex;
  background: #fff;
  border-top: 1px solid #e6ebe9;
  z-index: 1030;
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: .5rem 0 .4rem;
  font-size: .68rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
}
.bottom-nav-item i { font-size: 1.25rem; }
.bottom-nav-item.active { color: var(--brand); }

.app-main.has-bottom-nav { padding-bottom: 4.5rem; }
@media (min-width: 768px) { .app-main.has-bottom-nav { padding-bottom: 0; } }

/* Auth screens */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: linear-gradient(180deg, var(--brand-soft), #f7f9f8);
}
.auth-card { max-width: 420px; width: 100%; }

/* Print stylesheet hooks used on printable pages (also see PDF templates) */
@media print {
  .no-print { display: none !important; }
}