@import "tailwindcss";

@theme {
  --color-bg-primary: #1A1A2E;
  --color-bg-card: #16213E;
  --color-bg-card-hover: #1a2847;
  --color-bg-nav: #0F0F1A;
  --color-accent-forest: #2D6A4F;
  --color-accent-sage: #95D5B2;
  --color-accent-forest-light: #3a8563;
  --color-text-primary: #E0E0E0;
  --color-text-secondary: #B0B0B0;
  --color-text-muted: #7A7A8E;
  --color-status-healthy: #52B788;
  --color-status-due-soon: #F4A261;
  --color-status-overdue: #E76F51;
  --color-border-subtle: rgba(255, 255, 255, 0.08);
  --color-border-card: rgba(255, 255, 255, 0.12);
}

/* Dark botanical base */
body.tpt-body {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
}

/* Botanical wallpaper background */
.tpt-wallpaper {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--color-bg-primary);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

@media (max-width: 1024px), (hover: none) {
  .tpt-wallpaper {
    background-attachment: scroll;
  }
}

/* Overlay: light dimming so the botanical wallpaper is clearly visible */
.tpt-wallpaper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(13, 13, 26, 0.35);
}

/* Top navigation bar -- opaque enough for text readability */
.tpt-nav {
  background: rgba(15, 15, 26, 0.95);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* Semi-transparent card containers -- solid enough for content, wallpaper peeks at edges */
.tpt-card {
  background: rgba(22, 33, 62, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid var(--color-border-card);
  border-radius: 12px;
  transition: background 0.2s ease;
}

.tpt-card:hover {
  background: rgba(26, 40, 71, 0.88);
}

/* Green-accented buttons */
.tpt-btn-primary {
  background: var(--color-accent-forest);
  color: white;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tpt-btn-primary:hover {
  background: var(--color-accent-forest-light);
  box-shadow: 0 0 20px rgba(45, 106, 79, 0.3);
}

.tpt-btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-card);
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 500;
  font-size: 13px;
  transition: all 0.2s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tpt-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
}

.tpt-btn-danger {
  background: rgba(231, 111, 81, 0.15);
  color: var(--color-status-overdue);
  border: 1px solid rgba(231, 111, 81, 0.3);
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 500;
  font-size: 13px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.tpt-btn-danger:hover {
  background: rgba(231, 111, 81, 0.25);
}

/* Water button */
.water-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(45, 106, 79, 0.2);
  border: 1px solid rgba(45, 106, 79, 0.4);
  color: var(--color-accent-sage);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.water-btn:hover {
  background: var(--color-accent-forest);
  color: white;
  box-shadow: 0 0 16px rgba(45, 106, 79, 0.4);
  transform: scale(1.1);
}

/* Green-accented links */
a.tpt-link {
  color: var(--color-accent-sage);
  text-decoration: none;
  transition: color 0.2s ease;
}

a.tpt-link:hover {
  color: white;
}

/* User menu */
.tpt-user-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.tpt-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-accent-forest);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: white;
}

/* Status dots */
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.status-dot.healthy { background: var(--color-status-healthy); box-shadow: 0 0 6px rgba(82, 183, 136, 0.5); }
.status-dot.due-soon { background: var(--color-status-due-soon); box-shadow: 0 0 6px rgba(244, 162, 97, 0.5); }
.status-dot.overdue { background: var(--color-status-overdue); box-shadow: 0 0 6px rgba(231, 111, 81, 0.5); }
.status-dot.unknown { background: var(--color-text-muted); }

/* Status badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.healthy { background: rgba(82, 183, 136, 0.15); color: var(--color-status-healthy); }
.status-badge.due-soon { background: rgba(244, 162, 97, 0.15); color: var(--color-status-due-soon); }
.status-badge.overdue { background: rgba(231, 111, 81, 0.15); color: var(--color-status-overdue); }
.status-badge.unknown { background: rgba(255, 255, 255, 0.08); color: var(--color-text-muted); }
.status-badge.needs-attention { background: rgba(244, 162, 97, 0.15); color: var(--color-status-due-soon); }
.status-badge.dormant { background: rgba(255, 255, 255, 0.08); color: var(--color-text-muted); }
.status-badge.rip { background: rgba(231, 111, 81, 0.1); color: var(--color-text-muted); }

/* Flash messages */
.tpt-flash {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 16px;
}

.tpt-flash.notice { background: rgba(82, 183, 136, 0.15); border: 1px solid rgba(82, 183, 136, 0.3); color: var(--color-status-healthy); }
.tpt-flash.alert { background: rgba(231, 111, 81, 0.15); border: 1px solid rgba(231, 111, 81, 0.3); color: var(--color-status-overdue); }

/* Form inputs */
.tpt-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-border-card);
  color: var(--color-text-primary);
  font-size: 14px;
  transition: all 0.2s ease;
}

.tpt-input:focus {
  outline: none;
  border-color: var(--color-accent-forest);
  box-shadow: 0 0 0 2px rgba(45, 106, 79, 0.25);
}

.tpt-input::placeholder { color: var(--color-text-muted); }

.tpt-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}

.tpt-select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-border-card);
  color: var(--color-text-primary);
  font-size: 14px;
  transition: all 0.2s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%237A7A8E' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 8px center;
  background-repeat: no-repeat;
  background-size: 20px;
}

.tpt-select:focus {
  outline: none;
  border-color: var(--color-accent-forest);
  box-shadow: 0 0 0 2px rgba(45, 106, 79, 0.25);
}

.tpt-textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-border-card);
  color: var(--color-text-primary);
  font-size: 14px;
  resize: vertical;
  min-height: 80px;
  transition: all 0.2s ease;
}

.tpt-textarea:focus {
  outline: none;
  border-color: var(--color-accent-forest);
  box-shadow: 0 0 0 2px rgba(45, 106, 79, 0.25);
}

/* Login page styles */
.login-card {
  background: rgba(22, 33, 62, 0.90);
  backdrop-filter: blur(20px);
  border: 1px solid var(--color-border-card);
  border-radius: 16px;
  padding: 40px;
}

/* Decorative leaf accent */
.leaf-glow {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(45, 106, 79, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

/* Sign out button */
.tpt-sign-out {
  color: var(--color-text-secondary);
  font-size: 13px;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  transition: all 0.2s ease;
  border: none;
  background: none;
  cursor: pointer;
}

.tpt-sign-out:hover {
  color: var(--color-status-overdue);
  background: rgba(231, 111, 81, 0.1);
}

/* Watering timeline dots */
.timeline-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.timeline-dot:hover { transform: scale(1.3); }

.timeline-dot.watered { background: var(--color-status-healthy); box-shadow: 0 0 4px rgba(82, 183, 136, 0.4); }
.timeline-dot.dry { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); }
.timeline-dot.today { width: 16px; height: 16px; outline: 2px solid var(--color-accent-sage); outline-offset: 2px; }

/* Plant photo placeholder */
.plant-photo-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  background: rgba(45, 106, 79, 0.15);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}

/* Plant card thumbnail */
.plant-card-thumb {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
}

/* Filter bar */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.filter-bar .tpt-select,
.filter-bar .tpt-input {
  width: auto;
  min-width: 160px;
  padding: 8px 12px;
  font-size: 13px;
}

@media (max-width: 640px) {
  .filter-bar .tpt-select,
  .filter-bar .tpt-input {
    min-width: 0;
    flex: 1 1 100%;
  }
}

/* Birthday banner */
.birthday-banner {
  background:
    linear-gradient(135deg, rgba(45, 106, 79, 0.4) 0%, rgba(22, 33, 62, 0.9) 50%, rgba(45, 106, 79, 0.3) 100%);
  border: 1px solid rgba(149, 213, 178, 0.2);
  box-shadow:
    0 0 40px rgba(45, 106, 79, 0.15),
    inset 0 1px 0 rgba(149, 213, 178, 0.1);
}

/* Graveyard cards -- darker, desaturated */
.graveyard-card {
  background: rgba(12, 12, 20, 0.88) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

.graveyard-card:hover {
  background: rgba(16, 16, 26, 0.90) !important;
}

/* Mobile: water button minimum touch target */
@media (max-width: 640px) {
  .water-btn {
    width: 44px;
    height: 44px;
  }

  .water-btn svg {
    width: 20px;
    height: 20px;
  }
}

/* Mobile: timeline scrollable if needed */
@media (max-width: 480px) {
  .timeline-dot {
    width: 12px;
    height: 12px;
  }

  .timeline-dot.today {
    width: 14px;
    height: 14px;
  }
}