/* Farm-Like UI Stylesheet */

/* --- Google Font --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* --- CSS Variables for Theme --- */
:root {
  --primary-green: #4A7729; /* Deep, earthy green */
  --secondary-green: #89A865; /* Lighter, fresh green */
  --accent-yellow: #F1C40F; /* Sunlight yellow for highlights */
  --light-tan: #F5F1E9; /* Burlap/tan background */
  --dark-text: #3D3522; /* Rich brown for text */
  --danger-red: #C0392B;
  --border-color: #DCD0B9;
  --border-radius: 12px;
  --box-shadow: 0 5px 20px rgba(0,0,0,0.07);
}

/* --- General Body & Layout --- */
body { 
  font-family: 'Poppins', sans-serif; 
  background-color: var(--light-tan);
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23DCD0B9' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E"); /* Subtle pattern */
  color: var(--dark-text); 
  margin: 0; 
  padding: 20px; 
  line-height: 1.6;
}

.container { 
  max-width: 900px; 
  margin: 0 auto; 
}

/* --- Header --- */
header { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  margin-bottom: 2.5rem; 
  padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--border-color);
}
header h1 { 
  color: var(--primary-green); 
  margin: 0; 
  font-weight: 700; 
}

/* --- Cards --- */
.card { 
  background-color: #ffffff; 
  border-radius: var(--border-radius); 
  padding: 2rem 2.5rem; 
  box-shadow: var(--box-shadow);
  margin-bottom: 2rem; 
  border: 1px solid var(--border-color);
}

.auth-form { 
  max-width: 450px; 
  margin: 3rem auto; 
}

/* --- Typography --- */
h2 { 
  font-weight: 600; 
  color: var(--primary-green); 
  margin-bottom: 1.5rem; 
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.5rem;
}
h3 { 
  font-weight: 600; 
  color: #3D3522; 
  margin-top: 0; 
  margin-bottom: 1.5rem; 
}

/* --- Forms & Buttons --- */
input, select, button {
  width: 100%;
  padding: 15px;
  margin-bottom: 1rem;
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  font-size: 1rem;
  box-sizing: border-box;
  transition: all 0.2s ease-in-out;
  font-family: 'Poppins', sans-serif;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--secondary-green);
  box-shadow: 0 0 0 3px rgba(137, 168, 101, 0.2);
}
button { 
  background-color: var(--primary-green); 
  color: white; 
  border: none; 
  cursor: pointer; 
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
button:hover { 
  background-color: #3a5c20; 
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.logout-btn { background-color: var(--danger-red); }
.logout-btn:hover { background-color: #a52f22; }
.toggle-auth, .back-btn { 
  background: none; border: none; color: var(--primary-green);
  cursor: pointer; padding: 0.5rem 0; text-align: left; 
  width: auto; font-weight: 500;
}
.back-btn { font-size: 1.1rem; }

/* --- Messages --- */
.error { 
  color: var(--danger-red); 
  background-color: rgba(192, 57, 43, 0.1); 
  padding: 1rem; 
  border-radius: var(--border-radius); 
  margin-bottom: 1rem; 
  border-left: 5px solid var(--danger-red);
}
.status { 
  color: #6c757d; 
  font-style: italic; 
  margin-bottom: 1rem; 
}

/* --- Item Lists --- */
.item-list .item { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  padding: 1.2rem; 
  background-color: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
  transition: box-shadow 0.2s, transform 0.2s;
}
.item-list .item:hover { 
  transform: translateY(-2px);
  box-shadow: var(--box-shadow);
}
.item-list .item button { 
  width: auto; 
  padding: 10px 18px; 
  font-size: 0.9rem; 
  margin: 0 0 0 1rem; 
}
.item-info span { display: block; }
.item-info .item-name { font-weight: 600; color: var(--dark-text); font-size: 1.1rem; }
.item-info .item-details { font-size: 0.9rem; color: #7a7057; }
.item-actions .end-auction-btn { 
  background-color: var(--accent-yellow); 
  color: var(--dark-text); 
}
.item-actions .end-auction-btn:hover { background-color: #d1a70c; }
.price { 
  color: var(--secondary-green); 
  font-weight: 700; 
  font-size: 2.5rem; 
}