:root {
  --background: hsl(40, 56%, 93%);
  --foreground: hsl(34, 25%, 20%);
  --card: hsl(40, 50%, 96%);
  --card-foreground: hsl(34, 25%, 20%);
  --primary: hsl(140, 29%, 30%);
  --primary-foreground: hsl(40, 56%, 93%);
  --secondary: hsl(34, 30%, 75%);
  --secondary-foreground: hsl(34, 25%, 20%);
  --muted: hsl(40, 40%, 88%);
  --muted-foreground: hsl(34, 25%, 35%);
  --accent: hsl(34, 25%, 52%);
  --accent-foreground: hsl(40, 56%, 93%);
  --border: hsl(34, 25%, 70%);
  --input: hsl(40, 30%, 89%);
  --ring: hsl(34, 25%, 52%);
  --radius: 0.5rem;
  --font-headline: "PT Sans", sans-serif;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-headline);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-headline);
}

/* Optional accent icons */
.icon-custom-color {
  color: var(--accent);
}

html,
body {
  height: 100%;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

.tree-icon-badge {
  width: 48px;
  height: 48px;
  border: 3px solid #ffffff;
  box-shadow: 0 0 8px rgba(0, 128, 0, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: linear-gradient(145deg, #28a745, #218838);
}

.tree-icon-badge:hover {
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(0, 128, 0, 0.6);
}

.tree-card:focus-within,
.tree-card:hover {
  transform: scale(1.03);
  z-index: 5;
  box-shadow: 0 0 15px rgba(34, 139, 34, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card {
  background-color: #e6f4ea !important;
  border: 1px solid #ddd;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  cursor: pointer;
  background-color: #e0f2e9; /* slightly darker green */
  border-color: #b2dfdb;
}

.login-card {
  max-width: 450px;
  margin: 5rem auto;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.social-icon {
  font-size: 1.2rem;
}

.btn-google {
  background-color: #db4437;
  color: white;
}

.btn-yahoo {
  background-color: #6001d2;
  color: white;
}

.btn-github {
  background-color: #24292e;
  color: white;
}

.btn-microsoft {
  background-color: #2f2f2f;
  color: white;
}

/* For prominent error messages */
.error {
  background-color: #f8d7da; /* light red background */
  border: 1px solid #f5c2c7; /* slightly darker border */
  color: #842029; /* dark red text */
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 20px;
  font-weight: 600;
}

/* For introductory/lead text above the form */
.lead {
  font-size: 1.25rem; /* larger than normal text */
  font-weight: 300; /* lighter weight for elegance */
  margin-bottom: 1rem;
  color: #444; /* subtle gray */
  line-height: 1.6;
}

/* CTA Card (call-to-action cards on location pages) */
.cta-card {
  background-color: #e8f5e9 !important;
}

/* Dark mode overrides */
[data-bs-theme="dark"] {
  --background: hsl(34, 25%, 12%);
  --foreground: hsl(40, 56%, 90%);
  --card: hsl(34, 20%, 16%);
  --card-foreground: hsl(40, 56%, 90%);
  --muted: hsl(34, 15%, 25%);
  --muted-foreground: hsl(40, 30%, 65%);
  --border: hsl(34, 15%, 30%);
  --input: hsl(34, 15%, 20%);
}

[data-bs-theme="dark"] body {
  background-color: var(--background);
  color: var(--foreground);
}

[data-bs-theme="dark"] .card {
  background-color: var(--card) !important;
  border-color: var(--border);
  color: var(--card-foreground);
}

[data-bs-theme="dark"] .card-hover:hover {
  background-color: hsl(34, 20%, 20%);
  border-color: hsl(34, 20%, 35%);
}

[data-bs-theme="dark"] .lead {
  color: hsl(40, 30%, 70%);
}

[data-bs-theme="dark"] .error {
  background-color: hsl(0, 50%, 20%);
  border-color: hsl(0, 40%, 30%);
  color: hsl(0, 70%, 80%);
}

[data-bs-theme="dark"] .bg-light {
  background-color: var(--muted) !important;
}

[data-bs-theme="dark"] .text-muted {
  color: var(--muted-foreground) !important;
}

[data-bs-theme="dark"] .upload-zone {
  background-color: var(--muted) !important;
  border-color: var(--border) !important;
}

[data-bs-theme="dark"] .upload-zone .text-muted {
  color: var(--muted-foreground) !important;
}

/* Dark mode - buttons */
[data-bs-theme="dark"] .btn-outline-dark {
  color: hsl(40, 56%, 90%);
  border-color: hsl(34, 15%, 50%);
}

[data-bs-theme="dark"] .btn-outline-dark:hover {
  background-color: hsl(34, 15%, 25%);
  border-color: hsl(34, 15%, 60%);
  color: hsl(40, 56%, 95%);
}

/* Dark mode - form controls */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: hsl(34, 15%, 18%);
  border-color: var(--border);
  color: var(--foreground);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: hsl(34, 15%, 20%);
  border-color: hsl(140, 29%, 40%);
  color: var(--foreground);
}

[data-bs-theme="dark"] .form-control::placeholder {
  color: var(--muted-foreground);
}

/* Dark mode - form labels */
[data-bs-theme="dark"] .form-label {
  color: var(--foreground);
}

/* Dark mode - alerts */
[data-bs-theme="dark"] .alert-danger {
  background-color: hsl(0, 50%, 18%);
  border-color: hsl(0, 40%, 30%);
  color: hsl(0, 70%, 80%);
}

[data-bs-theme="dark"] .alert-success {
  background-color: hsl(140, 40%, 15%);
  border-color: hsl(140, 30%, 25%);
  color: hsl(140, 50%, 75%);
}

[data-bs-theme="dark"] .alert-warning {
  background-color: hsl(45, 50%, 15%);
  border-color: hsl(45, 40%, 25%);
  color: hsl(45, 70%, 75%);
}

/* Dark mode - links */
[data-bs-theme="dark"] a {
  color: hsl(140, 40%, 60%);
}

[data-bs-theme="dark"] a:hover {
  color: hsl(140, 45%, 70%);
}

/* Dark mode - bg-white elements */
[data-bs-theme="dark"] .bg-white {
  background-color: var(--card) !important;
}

/* Dark mode - text-dark on dark backgrounds */
[data-bs-theme="dark"] .text-dark {
  color: var(--foreground) !important;
}

/* Dark mode - warning badges (keep yellow bg, but ensure readable) */
[data-bs-theme="dark"] .badge.bg-warning {
  background-color: hsl(45, 80%, 45%) !important;
  color: hsl(34, 25%, 10%) !important;
}

/* Dark mode - light badges */
[data-bs-theme="dark"] .badge.bg-light {
  background-color: var(--muted) !important;
  color: var(--foreground) !important;
}

/* Dark mode - table rows with bg-light */
[data-bs-theme="dark"] tr.bg-light,
[data-bs-theme="dark"] .table .bg-light {
  background-color: hsl(34, 15%, 18%) !important;
}

/* Dark mode - card headers with bg-light */
[data-bs-theme="dark"] .card-header.bg-light {
  background-color: hsl(34, 15%, 20%) !important;
  border-color: var(--border);
}

/* Dark mode - alert-light */
[data-bs-theme="dark"] .alert-light {
  background-color: var(--muted) !important;
  border-color: var(--border) !important;
  color: var(--foreground) !important;
}

/* Dark mode - shadow adjustments */
[data-bs-theme="dark"] .shadow,
[data-bs-theme="dark"] .shadow-sm,
[data-bs-theme="dark"] .shadow-md {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.4) !important;
}

/* Dark mode - modal close buttons */
[data-bs-theme="dark"] .btn-close.bg-white {
  background-color: var(--muted) !important;
}

/* Dark mode - bordered elements */
[data-bs-theme="dark"] .border {
  border-color: var(--border) !important;
}

/* Dark mode - card with success header */
[data-bs-theme="dark"] .card-header.bg-success {
  background-color: hsl(140, 35%, 25%) !important;
}

/* Dark mode - secondary badges */
[data-bs-theme="dark"] .badge.bg-secondary {
  background-color: hsl(34, 15%, 35%) !important;
}

/* Dark mode - info badges */
[data-bs-theme="dark"] .badge.bg-info {
  background-color: hsl(190, 60%, 35%) !important;
}

/* Dark mode - CTA card */
[data-bs-theme="dark"] .cta-card {
  background-color: hsl(140, 25%, 18%) !important;
}