/* =========================
   Global Reset & Base
   ========================= */
* { margin:0; padding:0; box-sizing:border-box; }
html, body {
  height: 100%;                 /* ensures body fills the viewport */
  margin: 0;
  font-family: Arial, sans-serif;
}

body::before {
  content: "";
  position: fixed;       /* stays in place */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('wildflower-1582625_1280.jpg');
  background-repeat: no-repeat;
  background-size: cover;        /* fill screen */
  background-position: center -25%;
  z-index: -1;                   /* behind everything */
}


input, textarea, select {
  width: 100%;
  padding: 0.5rem;
  margin: 0.25rem 0;
  border-radius: 5px;
  border: 1px solid #1f3a2c;  
  background-color: #0f1a14;
  color: #e6eae6;
}
input:focus, textarea:focus, select:focus { border-color: #2f6f4e; outline:none; }
button { cursor:pointer; border:none; border-radius:5px; padding:0.5rem 1rem; background-color:#2f6f4e; color:#e9f4ee; transition:0.2s; }
button:hover { background-color:#3e8b63; }

/* =========================
   Header
   ========================= */
header { background:#13251c; color:#e6f2ea; padding:1rem 2rem; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #1f3a2c; }
header h1 { font-size:1.5rem; }
#toggleAdminBtn {
  display: none;
}


/* =========================
   Main Content
   ========================= */
main { padding:1rem 2rem; }
h2,h3 { color:#e6f2ea; margin-bottom:0.5rem; }

/* =========================
   Job Grid & Cards
   ========================= */
.job-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1rem; }
.job-card { background:#13251c; padding:1rem; border-radius:8px; box-shadow:0 3px 6px rgba(0,0,0,0.35); cursor:pointer; transition:0.2s; }
.job-card:hover { transform:translateY(-5px); box-shadow:0 10px 20px rgba(0,0,0,0.45); }
.job-card img { width:100%; height:150px; object-fit:cover; border-radius:5px; margin-top:0.5rem; }
.job-card h3 { color:#9fe0b8; margin:0.5rem 0; }
.job-card p { color:#cfe6da; font-size:0.9rem; }

/* =========================
   Modal
   ========================= */
.modal { display:none; position:fixed; z-index:999; left:0; top:0; width:100%; height:100%; overflow-y:auto; background-color:rgba(0,0,0,0.6); }
.modal-content { background:#13251c; margin:3% auto; padding:1rem 1.5rem; border-radius:8px; max-width:700px; position:relative; border:1px solid #1f3a2c; color:#e6f2ea; }
.modal-images img { width:100%; margin-top:0.5rem; border-radius:5px; border:1px solid #1f3a2c; }
.close { position:absolute; top:0.5rem; right:1rem; font-size:1.5rem; color:#e6f2ea; cursor:pointer; }

/* =========================
   Admin Job List
   ========================= */
#admin-job-list .admin-job-card { background:#0f1a14; border:1px solid #1f3a2c; padding:0.5rem 1rem; border-radius:5px; margin-bottom:0.5rem; }
#admin-job-list h4 { color:#9fe0b8; margin-bottom:0.25rem; }
#admin-job-list p { color:#cfe6da; margin-bottom:0.25rem; }

/* =========================
   Tree / Deadline Entries
   ========================= */
.tree-entry,.task-entry, .deadline-entry { border:1px solid #1f3a2c; padding:0.5rem; border-radius:5px; margin-bottom:0.5rem; }
.highlight { background:#2f6f4e33; }

/* =========================
   Resource Entries
   ========================= */
.resource-entry { display:flex; align-items:center; gap:0.5rem; margin:0.5rem 0; }

/* =========================
   Footer
   ========================= */
footer { background:#13251c; color:#cfe6da; text-align:center; padding:2rem 1rem; font-size:0.9rem; border-top:1px solid #1f3a2c; }
footer a { color:#9fe0b8; }
footer a:hover { text-decoration:underline; }


.toggle-option {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  background: #2f6f4e44;
  color: #e6f2ea;
  cursor: pointer;
  margin: 0.25rem;
  user-select: none;
  transition: 0.2s;
}
.toggle-option.active-pill {
  background: #3e8b63;
  color: #fff;
}

.photo-scroll-container {
  display: flex;
  overflow-x: auto;
  gap: 8px;
  margin-top: 10px;
  padding-bottom: 4px;
}

.photo-scroll-container img {
  height: 80px;
  cursor: pointer;
  border: 2px solid #ddd;
  border-radius: 4px;
}

.main-photo {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 6px;
}

#modal-map button {
  position: relative;
  z-index: 1000;
  margin-top: 0.5rem;
}

/* =========================
   Nested Pills for Trees, Deadlines, Resources
   ========================= */
.trees-container,
.task-container,
.deadlines-container,
.resources-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 25px;
  background: #2f6f4e44;
  margin-bottom: 1rem;
}

.tree-entry,
.task-entry,
.deadline-entry,
.resource-entry {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.3rem 0.6rem;
  border-radius: 15px;
  background: #3e8b6344;
  border: 1px solid #1f3a2c;
  font-size: 0.9rem;
  color: #e6f2ea;
}

.tree-entry input,
.task-entry input,
.deadline-entry input,
.resource-entry input {
  margin: 0.1rem 0;
  font-size: 0.85rem;
  width: auto;
}

.tree-entry button,
.task-entry button,
.deadline-entry button {
  margin-top: 0.25rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  background-color: #2f6f4e;
}

.title-item-for-funsies{
  background-color: black; 
  max-width: 175px; 
  padding:0.5rem 1rem;
  border-radius: 12px;
}

.trees-container h4,
.task-container h4,
.deadlines-container h4,
.resources-container h4 {
  width: 100%;
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
  color: #9fe0b8;
}

/* Optional: hover effect for inner pills */
.tree-entry:hover,
.task-entry:hover,
.deadline-entry:hover,
.resource-entry:hover {
  background: #3e8b63;
  color: #fff;
}


/* Modal Photos: consistent aspect ratio for all images */
.modal-images {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.modal-images img {
  object-fit: contain; /* keeps aspect ratio */
  width: 150px;        /* fixed width */
  height: 150px;       /* fixed height */
  background: #1f3a2c; /* background for padding */
  border-radius: 6px;
  border: 1px solid #1f3a2c;
  cursor: pointer;
}

/* Pill colors for tree, deadline, resource */
.tree-entry { background: #3e8b4f; color: #000000; }
.task-entry { background: #57054f; color: #fff; }
.deadline-entry { background: #3b6ca5; color: #fff; }
.resource-entry { background: #d99e45; color: #000000; cursor: pointer; }

/* Hover effect */
.tree-entry:hover,
.task-entry:hover,
.deadline-entry:hover,
.resource-entry:hover { opacity: 0.8; }

/* Admin job card buttons */
.admin-job-card button {
  margin: 0.25rem 0.25rem 0 0;
  padding: 0.3rem 0.6rem;
  background: #2f6f4e;
  color: #fff;
  border-radius: 4px;
  font-size: 0.85rem;
}

.mobile-toggle { display: none; background: none; border: none; font-size: 1.8rem; color: #fff; cursor: pointer; }

nav {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
nav a {
  color: #fff; text-decoration: none; font-weight: 500;
  padding: 0.4rem 0.6rem; border-radius: 6px; transition: all 0.25s ease;
}
nav a:hover { background-color: #1f3a27; color: #9ce3b0; }

.user-menu {
  position: relative; /* dropdown positioned relative to this */
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}
.user-photo {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  border: 2px solid #fff; transition: transform 0.2s, box-shadow 0.2s;
}
.user-photo:hover { transform: scale(1.1); box-shadow: 0 0 8px #9ce3b0; }

/* DROPDOWN ANIMATION FROM USER-MENU */
.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: #1f3a27;
  border-radius: 8px;
  overflow: hidden;
  transform-origin: top;
  transform: scaleY(0);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
  z-index: 1000;
}
.dropdown-menu.visible {
  transform: scaleY(1);
  opacity: 1;
}
.dropdown-menu button {
  width: 100%; background: none; border: none; color: #fff;
  padding: 0.6rem 1rem; text-align: left; font-size: 0.95rem; cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.dropdown-menu button.hidden { display: none; }
.dropdown-menu button:hover { background-color: #2f6f4e; color: #e9f4ee; }

/* RESPONSIVE */
@media(max-width: 768px) {
  .mobile-toggle { display: block; }
  nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, #13251c, #0d1f14);
    flex-direction: column;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
  }
  nav.show { max-height: 500px; padding: 1rem 0; }
  nav a { padding: 0.8rem 1.5rem; width: 100%; }
  .user-menu { justify-content: flex-start; padding: 0.5rem 1.5rem; }
  .user-photo { width: 32px; height: 32px; }
}

/* =========================
   Job Card Resource Pill
   ========================= */
.resource-pill {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 20px;
  background-color: #d99e45; /* orange */
  color: #000000;
  font-size: 0.85rem;
  margin-top: 0.5rem;
  margin-right: 0.25rem;
  cursor: default;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: 0.2s;
}
.resource-pill:hover {
  background-color: #c68434;
}

.profile-status-message {
  margin-bottom: 1rem;
  padding: 0.5rem;
  border-radius: 5px;
}
.info-message {
  background: #1e2a3a;
  color: #b0c4de;
}
.success-message {
  background: #1a3b2e;
  color: #8bc34a;
}
.warning-message {
  background: #3a2a1e;
  color: #ffb74d;
}
/* Task checkboxes inside signup gate */
.signup-gate .signup-tasks {
  margin: 1rem 0 1rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.signup-gate .signup-tasks p {
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cream-dim);
  margin-bottom: 0.75rem;
}

.signup-gate .signup-tasks label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0.25rem 0;
  cursor: pointer;
  transition: background 0.1s;
  border-radius: 4px;
}

.signup-gate .signup-tasks label:hover {
  background: rgba(255, 255, 255, 0.05);
}

.signup-gate .signup-tasks input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--forest-bright);
  margin: 0;
  cursor: pointer;
}

.signup-gate .signup-tasks span {
  font-size: 0.9rem;
  color: var(--cream);
}