/* === Custom Bootstrap Theme: Sand / Amber / Olive / Aubergine === */
/* Palette
   Sand:      #F7F4EF
   Amber:     #FEAA00
   Olive:     #788402
   Aubergine: #342628
*/

/* Root variables override (Bootstrap 5.3+) */
:root {
  /* Core brand mapping */
  --bs-primary: #FEAA00;   /* Amber */
  --bs-success: #788402;   /* Olive */
  --bs-light:   #F7F4EF;   /* Sand */
  --bs-dark:    #342628;   /* Aubergine */

  /* Optional: map secondary to Olive too (or keep gray) */
  --bs-secondary: #788402;

  /* RGB for utilities that need opacity */
  --bs-primary-rgb: 254, 170, 0;
  --bs-success-rgb: 120, 132, 2;
  --bs-light-rgb:   247, 244, 239;
  --bs-dark-rgb:    52, 38, 40;
  --bs-secondary-rgb: 120, 132, 2;

  /* Body + links */
  --bs-body-bg:    #F7F4EF; /* Sand background */
  --bs-body-color: #342628; /* Aubergine text */
  --bs-link-color: #FEAA00; /* Amber links */
  --bs-link-hover-color: #e99a00;

  /* Borders and focus */
  --bs-border-color: rgba(52, 38, 40, 0.15);
  --bs-focus-ring-color: rgba(254, 170, 0, .25);

  /* Code colors if you use <code> etc. */
  --bs-code-color: #788402;
  --bs-highlight-bg: rgba(254, 170, 0, 0.1);
}

/* Buttons — ensure good contrast and custom hovers */
.btn-primary {
  --bs-btn-color: #342628;              /* text on amber */
  --bs-btn-bg: #FEAA00;
  --bs-btn-border-color: #FEAA00;
  --bs-btn-hover-color: #342628;
  --bs-btn-hover-bg: #e99a00;           /* ~10% darker */
  --bs-btn-hover-border-color: #e29300;
  --bs-btn-active-color: #342628;
  --bs-btn-active-bg: #d78f00;
  --bs-btn-active-border-color: #cc8800;
  --bs-btn-disabled-color: #342628;
  --bs-btn-disabled-bg: #ffbf40;        /* lighter amber */
  --bs-btn-disabled-border-color: #ffbf40;
}

.btn-secondary {
  --bs-btn-color: #F7F4EF;              /* text on olive */
  --bs-btn-bg: #788402;
  --bs-btn-border-color: #788402;
  --bs-btn-hover-color: #F7F4EF;
  --bs-btn-hover-bg: #6c7702;           /* slightly darker olive */
  --bs-btn-hover-border-color: #667002;
  --bs-btn-active-color: #F7F4EF;
  --bs-btn-active-bg: #5e6801;
  --bs-btn-active-border-color: #576101;
}

.btn-success {
  --bs-btn-color: #F7F4EF;
  --bs-btn-bg: #788402;
  --bs-btn-border-color: #788402;
  --bs-btn-hover-color: #F7F4EF;
  --bs-btn-hover-bg: #6c7702;
  --bs-btn-hover-border-color: #667002;
  --bs-btn-active-color: #F7F4EF;
  --bs-btn-active-bg: #5e6801;
  --bs-btn-active-border-color: #576101;
}

.btn-light {
  --bs-btn-color: #342628;              /* text on sand */
  --bs-btn-bg: #F7F4EF;
  --bs-btn-border-color: #F7F4EF;
  --bs-btn-hover-color: #342628;
  --bs-btn-hover-bg: #efeae1;           /* slightly darker sand */
  --bs-btn-hover-border-color: #e9e2d6;
  --bs-btn-active-color: #342628;
  --bs-btn-active-bg: #e3dbcd;
  --bs-btn-active-border-color: #ddd3c2;
}

.btn-dark {
  --bs-btn-color: #F7F4EF;              /* text on aubergine */
  --bs-btn-bg: #342628;
  --bs-btn-border-color: #342628;
  --bs-btn-hover-color: #F7F4EF;
  --bs-btn-hover-bg: #2c2022;
  --bs-btn-hover-border-color: #281d1f;
  --bs-btn-active-color: #F7F4EF;
  --bs-btn-active-bg: #251b1f;
  --bs-btn-active-border-color: #22181c;
}

/* Outline buttons keep the palette */
.btn-outline-primary {
  --bs-btn-color: #FEAA00;
  --bs-btn-border-color: #FEAA00;
  --bs-btn-hover-color: #342628;
  --bs-btn-hover-bg: #FEAA00;
  --bs-btn-hover-border-color: #FEAA00;
}

.btn-outline-secondary {
  --bs-btn-color: #788402;
  --bs-btn-border-color: #788402;
  --bs-btn-hover-color: #F7F4EF;
  --bs-btn-hover-bg: #788402;
  --bs-btn-hover-border-color: #788402;
}

.btn-outline-dark {
  --bs-btn-color: #342628;
  --bs-btn-border-color: #342628;
  --bs-btn-hover-color: #F7F4EF;
  --bs-btn-hover-bg: #342628;
  --bs-btn-hover-border-color: #342628;
}

/* Alerts */
.alert-primary {
  --bs-alert-color: #3d2c00;
  --bs-alert-bg: rgba(254, 170, 0, 0.12);
  --bs-alert-border-color: rgba(254, 170, 0, 0.3);
}

.alert-success {
  --bs-alert-color: #2a2f00;
  --bs-alert-bg: rgba(120, 132, 2, 0.12);
  --bs-alert-border-color: rgba(120, 132, 2, 0.3);
}

.alert-dark {
  --bs-alert-color: #F7F4EF;
  --bs-alert-bg: #342628;
  --bs-alert-border-color: #2c2022;
}

/* Badges */
.badge.bg-primary { background-color: #FEAA00 !important; color: #342628; }
.badge.bg-success { background-color: #788402 !important; color: #F7F4EF;  }
.badge.bg-dark    { background-color: #342628 !important; color: #F7F4EF;  }
.badge.bg-light   { background-color: #F7F4EF !important; color: #342628; }

/* Navs / Pills */
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  background-color: #FEAA00;
  color: #342628;
}
.nav-link { color: #FEAA00; }
.nav-link:hover, .nav-link:focus { color: #e99a00; }

/* Navbar presets */
.navbar.bg-light { background-color: #F7F4EF !important; }
.navbar.bg-dark  { background-color: #342628 !important; }
.navbar .navbar-brand,
.navbar .nav-link { color: inherit; }

/* Form controls focus ring */
.form-control:focus, .form-select:focus {
  border-color: rgba(254, 170, 0, 0.5);
  box-shadow: 0 0 0 .25rem rgba(254, 170, 0, .25);
}

/* Cards */
.card {
  background-color: #ffffff;
  border-color: rgba(52, 38, 40, 0.12);
}
.card .card-header {
  background-color: #F7F4EF;
  border-bottom-color: rgba(52, 38, 40, 0.12);
}

/* Progress bars */
.progress-bar {
  background-color: #FEAA00;
  color: #342628;
}

/* List groups */
.list-group-item {
  background-color: #fff;
  color: #342628;
  border-color: rgba(52, 38, 40, 0.12);
}
.list-group-item.active {
  background-color: #FEAA00;
  border-color: #FEAA00;
  color: #342628;
}

/* Utilities based directly on your 4 swatches */
.bg-sand    { background-color: #F7F4EF !important; }
.bg-amber   { background-color: #FEAA00 !important; }
.bg-olive   { background-color: #788402 !important; }
.bg-auber   { background-color: #342628 !important; }

.text-sand  { color: #F7F4EF !important; }
.text-amber { color: #FEAA00 !important; }
.text-olive { color: #788402 !important; }
.text-auber { color: #342628 !important; }

/* Tables */
.table thead th {
  border-bottom-color: rgba(52, 38, 40, 0.25);
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: rgba(52, 38, 40, 0.025);
}

/* Tooltips / Popovers */
.tooltip-inner { background-color: #342628; color: #F7F4EF; }
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before { border-top-color: #342628; }

.popover { --bs-popover-border-color: rgba(52, 38, 40, 0.2); }
.popover-header { background-color: #F7F4EF; }
/* Custom styles for the pantry app */
/* Global background and text */
html, body {
  background-color: #F7F4EF; /* Sand */
  color: #342628;           /* Aubergine text */
  min-height: 100%;
  margin: 0;
}

/* Override Bootstrap's dark navbar to use Aubergine */
.navbar.bg-dark {
  background-color: #342628 !important; /* Aubergine */
}

/* Navbar brand */
.navbar-dark .navbar-brand {
  color: #FEAA00 !important; /* Amber */
  font-weight: bold;
}
.navbar-dark .navbar-brand:hover {
  color: #e99a00 !important; /* Slightly darker amber */
}

/* Navbar links */
.navbar-dark .nav-link {
  color: #F7F4EF !important; /* Sand */
}
.navbar-dark .nav-link:hover {
  color: #FEAA00 !important; /* Amber on hover */
}

/* Buttons */
.btn-primary {
  background-color: #FEAA00;
  border-color: #FEAA00;
  color: #342628;
}
.btn-primary:hover {
  background-color: #e99a00;
  border-color: #e99a00;
  color: #342628;
}

/* Utility background colors */
.bg-auber { background-color: #342628 !important; }
.bg-amber { background-color: #FEAA00 !important; }
.bg-olive { background-color: #788402 !important; }
.bg-sand  { background-color: #F7F4EF !important; }

/* Utility text colors */
.text-auber { color: #342628 !important; }
.text-amber { color: #FEAA00 !important; }
.text-olive { color: #788402 !important; }
.text-sand  { color: #F7F4EF !important; }
.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px;
}

.card {
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    margin-bottom: 20px;
}

.card img {
    max-width: 100%;
    height: auto;
}

.alert {
    margin-bottom: 20px;
}