/* ========================================================================== 
   style.css: “Farmy” Theme with Updated Button Colors 
   ========================================================================== */

/* 1) Root variables */
:root {
  --farm-green-dark:    #2e7d32;  /* Dark green (hover state) */
  --farm-green-light:   #a5d6a7;  /* Light green (default state) */
  --farm-light-red:     #ffcdd2;  /* Light red (default state for Sell) */
  --farm-dark-red:      #d32f2f;  /* Dark red (hover state for Sell) */
  --farm-earth:         #8d6e63;  /* Brownish accent */
  --farm-text-dark:     #2e2e2e;  /* Black‐ish for all text */
  --farm-danger:        #d32f2f;  /* Darker red for general danger */
  --farm-warning:       #f57c00;  /* Darker orange for warning */
}

/* 2) Base styles */
body {
  background-color: var(--farm-green-light);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--farm-text-dark);
  margin: 0;
  padding: 0;
}

/* 3) Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: Georgia, "Times New Roman", Times, serif;
  color: var(--farm-text-dark);
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

/* 4) Navbar */
.navbar {
  background-color: var(--farm-green-dark) !important;
}
.navbar .navbar-brand,
.navbar .nav-link {
  color: var(--farm-text-dark) !important;
  font-weight: 600;
}
.navbar .nav-link:hover {
  color: var(--farm-green-light) !important;
}

/* 5) Unified primary‐style buttons: light green default, dark green on hover */
.btn-primary,
.btn-secondary,
.btn-info,
.btn-dark,
.btn-light {
  background-color: var(--farm-green-light) !important;
  border-color: var(--farm-green-light) !important;
  color: var(--farm-text-dark) !important;
}
.btn-primary:hover,
.btn-secondary:hover,
.btn-info:hover,
.btn-dark:hover,
.btn-light:hover,
.btn-primary:focus,
.btn-secondary:focus,
.btn-info:focus,
.btn-dark:focus,
.btn-light:focus {
  background-color: var(--farm-green-dark) !important;
  border-color: var(--farm-green-dark) !important;
  color: var(--farm-text-dark) !important;
}

/* 6) “Approve” or Success buttons: light green default, darker green on hover */
.btn-success {
  background-color: var(--farm-green-light) !important;
  border-color: var(--farm-green-light) !important;
  color: var(--farm-text-dark) !important;
}
.btn-success:hover,
.btn-success:focus {
  background-color: var(--farm-green-dark) !important;
  border-color: var(--farm-green-dark) !important;
  color: var(--farm-text-dark) !important;
}

/* 7) “Sell” button (using .btn-danger): light red default, dark red on hover */
.btn-danger {
  background-color: var(--farm-light-red) !important;
  border-color: var(--farm-light-red) !important;
  color: var(--farm-text-dark) !important;
}
.btn-danger:hover,
.btn-danger:focus {
  background-color: var(--farm-dark-red) !important;
  border-color: var(--farm-dark-red) !important;
  color: var(--farm-text-dark) !important;
}

/* 8) “Warning” buttons (e.g., Clear Flag) */
.btn-warning {
  background-color: #ff9800 !important;  /* Base orange */
  border-color: #ff9800 !important;
  color: var(--farm-text-dark) !important;
}
.btn-warning:hover,
.btn-warning:focus {
  background-color: var(--farm-warning) !important;
  border-color: var(--farm-warning) !important;
  color: var(--farm-text-dark) !important;
}

/* 9) Cards */
.card {
  border: 1px solid var(--farm-green-dark) !important;
  border-radius: 0.5rem !important;
  background-color: #ffffff !important;
  color: var(--farm-text-dark) !important;
}
.card h5.card-title {
  color: var(--farm-text-dark) !important;
  font-weight: 600;
}
.card-body {
  background-color: #ffffff !important;
  color: var(--farm-text-dark) !important;
}

/* 10) Tables */
.table {
  background-color: #ffffff !important;
  border-radius: 0.5rem !important;
  overflow: hidden !important;
  color: var(--farm-text-dark) !important;
}
.table thead {
  background-color: var(--farm-green-light) !important;
}
.table thead th {
  color: var(--farm-text-dark) !important;
}
.table tbody tr:nth-child(odd) {
  background-color: #f1f8e9 !important;
}

/* 11) Forms */
.form-control {
  border: 1px solid var(--farm-green-dark) !important;
  border-radius: 0.25rem !important;
  color: var(--farm-text-dark) !important;
  background-color: #ffffff !important;
}
.form-control:focus {
  border-color: var(--farm-green-dark) !important;
  box-shadow: 0 0 0 0.2rem rgba(46,125,50,0.25) !important;
  color: var(--farm-text-dark) !important;
}

/* 12) Alerts */
.alert {
  background-color: var(--farm-green-light) !important;
  border-color: var(--farm-green-light) !important;
  color: var(--farm-text-dark) !important;
}

/* 13) Footer */
footer {
  background-color: var(--farm-green-dark) !important;
  color: var(--farm-text-dark) !important;
  padding: 1rem 0;
  text-align: center;
  margin-top: 2rem;
}

/* 14) Links */
a {
  color: var(--farm-text-dark) !important;
}
a:hover {
  color: var(--farm-green-dark) !important;
}

/* 15) Container styling */
.container {
  box-shadow: 0 0 15px rgba(0,0,0,0.1) !important;
  background-color: #ffffff !important;
  padding: 1.5rem !important;
  border-radius: 0.5rem !important;
  margin: 20px auto !important;
  color: var(--farm-text-dark) !important;
}

/* 16) Existing custom rules */
.btn-lg {
  font-size: 1.25rem !important;
}

.card-img-top {
  object-fit: cover !important;
  height: 200px !important;
}

/* 17) Mobile tweaks */
@media (max-width: 576px) {
  .navbar .navbar-brand {
    font-size: 1.25rem !important;
  }
  h2 {
    font-size: 1.25rem !important;
  }
}

/* 18) Form-validation highlights */
.is-invalid {
  border-color: red !important;
}
.is-valid {
  border-color: var(--farm-text-dark) !important;
}

/* 19) list-group items */
.list-group-item {
  background-color: #ffffff !important;
  color: var(--farm-text-dark) !important;
}