/* ============================
   ReLeaf — Pastel Green Theme
   Glassmorphism + Responsive UI
   Files: index.html, style.css, app.js
   ============================ */

/* CSS variables (central theme) */
:root{
  --bg-light: #edf9ef;                   /* very light pastel green */
  --bg-gradient: linear-gradient(135deg,#edf9ef 0%, #e0f6df 45%, #d2f0d2 100%);
  --glass: rgba(255,255,255,0.6);
  --card-border: rgba(255,255,255,0.45);
  --text: #1f3a2d;
  --muted: #5b7a63;
  --primary: #67c089;
  --primary-strong: #4aa36a;
  --success: #7dd399;
  --shadow: 0 12px 30px rgba(77, 160, 106, 0.12);
  --radius: 14px;
  --max-width: 1100px;
  --gap: 16px;
}

/* Global reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  background:var(--bg-gradient);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:28px;
  gap:var(--gap);
}

/* Views layout */
.view{width:100%;max-width:var(--max-width);margin:0 auto;display:grid;place-items:center;min-height:80vh}
.hidden{display:none}

/* Splash */
.splash-view{align-items:center}
.splash-inner{text-align:center;padding:40px}
.logo{font-weight:800;font-size:clamp(2.5rem,6vw,4.5rem);letter-spacing:0.04em;color:var(--primary);display:inline-block}
.logo span{display:inline-block;opacity:0;transform:translateY(18px) scale(.98);animation:popIn .55s cubic-bezier(.2,.85,.25,1) forwards}
.logo span:nth-child(1){animation-delay:.05s}
.logo span:nth-child(2){animation-delay:.10s}
.logo span:nth-child(3){animation-delay:.15s}
.logo span:nth-child(4){animation-delay:.20s}
.logo span:nth-child(5){animation-delay:.25s}
.logo span:nth-child(6){animation-delay:.30s}
.logo span:nth-child(7){animation-delay:.35s}
.logo span:nth-child(8){animation-delay:.40s}
.logo span:nth-child(9){animation-delay:.45s}
.tagline{margin-top:10px;color:var(--muted);font-weight:500}
@keyframes popIn{to{opacity:1;transform:none}}

/* Card / Glass Styles */
.card {
  background: rgba(255, 255, 255, 0.15); /* translucent white */
  backdrop-filter: blur(15px) saturate(180%);
  -webkit-backdrop-filter: blur(15px) saturate(180%);
  border-radius: var(--radius, 16px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(200, 240, 200, 0.4); /* pastel green border */
  padding: 24px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Hover animation for subtle depth */
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
  border-color: rgba(180, 230, 180, 0.8); /* brighter green on hover */
}

/* Login Card Specific */
.login-card {
  width: min(460px, 95%);
  margin: auto;
  background: rgba(230, 250, 230, 0.25); /* gentle pastel green tint */
}

/* Container for overall alignment */
.container {
  width: 100%;
  max-width: var(--max-width, 1200px);
  padding: 16px;
}

/* Optional: Highlight form elements */
.login-card input[type="text"],
.login-card input[type="password"] {
  border: 1px solid rgba(180, 230, 180, 0.6);
  background: rgba(255, 255, 255, 0.4);
  padding: 10px;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.login-card input[type="text"]:focus,
.login-card input[type="password"]:focus {
  border-color: rgba(140, 210, 140, 0.9);
  box-shadow: 0 0 8px rgba(140, 210, 140, 0.6);
}

/* Optional: Pastel green login button */
.login-card button {
  background: linear-gradient(135deg, #a8e6a1, #b9f6ca);
  color: #2e5d30;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.3s ease, transform 0.2s ease;
}

.login-card button:hover {
  background: linear-gradient(135deg, #98d991, #a8e6a1);
  transform: scale(1.03);
}

/* Topbar */
.topbar{width:100%;display:flex;justify-content:space-between;align-items:center;padding:10px 0}
.brand{font-weight:800;font-size:1.1rem;color:var(--primary)}
.top-actions{display:flex;gap:10px;align-items:center}

/* Buttons */
.btn{border:none;cursor:pointer;padding:10px 14px;border-radius:12px;font-weight:700}
.btn.primary{background:var(--primary);color:#fff}
.btn.primary:hover{background:var(--primary-strong)}
.btn.subtle{background:rgba(255,255,255,0.65);color:var(--text);border:1px solid rgba(255,255,255,0.6)}
.btn.success{background:var(--success);color:#053017}
.btn.subtle:hover{transform:translateY(-2px);box-shadow:var(--shadow)}

/* Forms */
.form{display:flex;flex-direction:column;gap:12px}
.form label{font-weight:700}
.form input[type="text"], .form input[type="password"], input[type="number"], select{
  padding:10px;border-radius:10px;border:1px solid rgba(0,0,0,0.06);background:rgba(255,255,255,0.9);outline:none
}
.input-inline{display:flex;gap:8px;align-items:center}
.form-row{display:flex;gap:12px;align-items:center}

/* Cards grid on dashboard */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.card-link{text-align:left;cursor:pointer;transition:transform .18s ease, box-shadow .18s ease}
.card-link:hover{transform:translateY(-6px);box-shadow:var(--shadow)}

/* Panel / sections */
.section{width:100%;max-width:var(--max-width);margin:20px auto}
.panel-inner{padding:14px;display:flex;flex-direction:column;gap:12px}
.panel-head{display:flex;align-items:center;gap:12px;justify-content:space-between}
.back-btn{background:transparent;border-radius:10px;padding:8px 12px;border:1px solid rgba(0,0,0,0.06)}
.grid-two{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.card-inner{padding:12px;background:rgba(255,255,255,0.55);border-radius:10px;border:1px solid rgba(255,255,255,0.5)}

/* Toolbar & items */
.toolbar{display:flex;gap:12px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.items{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.item{padding:12px;background:rgba(255,255,255,0.6);border-radius:12px;border:1px solid rgba(255,255,255,0.5);display:flex;flex-direction:column;gap:6px}
.item-head{display:flex;justify-content:space-between;align-items:center}
.badge{padding:6px 10px;border-radius:999px;background:rgba(103,192,137,0.12);border:1px solid rgba(103,192,137,0.25)}

/* Empty state */
.empty{padding:18px;text-align:center;color:var(--muted)}

/* Small utilities */
.center{text-align:center}
.muted{color:var(--muted)}
.hint-row{margin-top:6px}
.full-row{grid-column:1/-1;display:flex;gap:12px;align-items:center}

/* Responsive */
@media (max-width:980px){
  .cards{grid-template-columns:1fr}
  .grid-two{grid-template-columns:1fr}
  body{padding:18px}
}


/* Common Card / Glass Styles for All Sections */
.card {
  background: rgba(255, 255, 255, 0.15); /* translucent white */
  backdrop-filter: blur(15px) saturate(180%);
  -webkit-backdrop-filter: blur(15px) saturate(180%);
  border-radius: var(--radius, 16px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(200, 240, 200, 0.4); /* pastel green border */
  padding: 24px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Hover animation */
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
  border-color: rgba(180, 230, 180, 0.8); /* brighter green on hover */
}

/* Login Card */
.login-card {
  width: min(460px, 95%);
  margin: auto;
  background: rgba(230, 250, 230, 0.25); /* pastel green tint */
}

/* Container Layout */
.container {
  width: 100%;
  max-width: var(--max-width, 1200px);
  padding: 16px;
}

/* Inputs (for Buyer & Seller forms too) */
.card input[type="text"],
.card input[type="password"],
.card input[type="number"],
.card input[type="email"] {
  border: 1px solid rgba(180, 230, 180, 0.6);
  background: rgba(255, 255, 255, 0.4);
  padding: 10px;
  border-radius: 8px;
  outline: none;
  width: 100%;
  margin-bottom: 12px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.card input:focus {
  border-color: rgba(140, 210, 140, 0.9);
  box-shadow: 0 0 8px rgba(140, 210, 140, 0.6);
}

/* Buttons */
.card button {
  background: linear-gradient(135deg, #a8e6a1, #b9f6ca);
  color: #2e5d30;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.3s ease, transform 0.2s ease;
}

.card button:hover {
  background: linear-gradient(135deg, #98d991, #a8e6a1);
  transform: scale(1.03);
}

/* Dashboard Cards (Buyer, Seller, Available Items) */
.dashboard-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  height: 180px;
  background: rgba(230, 250, 230, 0.25);
}

.dashboard-card h2 {
  color: #2e5d30;
  font-size: 1.4rem;
  margin-bottom: 10px;
}

.dashboard-card:hover {
  background: rgba(230, 250, 230, 0.4);
}


#about {
  background: var(--glass);
  backdrop-filter: blur(10px);
  padding: 20px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  animation: fadeIn 0.5s ease-in-out;
}