/* ── Variables ──────────────────────────────────────────────────────────── */
:root {
  --wine-red: #722F37;
  --wine-dark: #4a1e24;
  --wine-light: #f5eef0;
  --gold: #C4A35A;
  --cream: #faf8f5;
  --card-shadow: 0 2px 8px rgba(0,0,0,.08);
  --card-radius: .75rem;
}

/* ── Base ────────────────────────────────────────────────────────────────── */
body {
  background-color: var(--cream);
  color: #2c2c2c;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Navbar ──────────────────────────────────────────────────────────────── */
.navbar {
  background: linear-gradient(135deg, var(--wine-dark) 0%, var(--wine-red) 100%);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  padding: .6rem 1rem;
}
.navbar-brand {
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: .02em;
}
.navbar-brand i { margin-right: .3rem; }
.search-input {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.3);
  color: #fff;
  min-width: 200px;
}
.search-input::placeholder { color: rgba(255,255,255,.6); }
.search-input:focus {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.6);
  color: #fff;
  box-shadow: 0 0 0 .2rem rgba(255,255,255,.15);
}
.navbar .btn-outline-light { border-color: rgba(255,255,255,.4); }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}
.card-header {
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.07);
  padding: .7rem 1rem;
  font-size: .9rem;
}
.card-footer {
  background: #fafafa;
  border-top: 1px solid rgba(0,0,0,.07);
}

/* ── Page titles ─────────────────────────────────────────────────────────── */
.page-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--wine-dark);
}

/* ── Stat cards (dashboard) ──────────────────────────────────────────────── */
.stat-card {
  border-left: 4px solid var(--wine-red);
  transition: transform .15s;
}
.stat-card:hover { transform: translateY(-2px); }
.stat-icon { font-size: 1.6rem; }
.stat-value {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--wine-dark);
}
.stat-label { font-size: .8rem; color: #888; text-transform: uppercase; letter-spacing: .05em; }
.text-wine { color: var(--wine-red) !important; }
.text-secondary-accent { color: var(--gold) !important; }

/* ── Wine cards (list view) ──────────────────────────────────────────────── */
.wine-card {
  border-left: 4px solid var(--wine-red);
  transition: box-shadow .15s, transform .15s;
}
.wine-card:hover {
  box-shadow: 0 4px 16px rgba(114,47,55,.15);
  transform: translateY(-2px);
}

/* Category color strips */
.wine-card[class*="chardonnay"],
.wine-card[class*="sauvignon-blanc"],
.wine-card[class*="riesling"],
.wine-card[class*="pinot-grigio"],
.wine-card[class*="pinot-gris"],
.wine-card[class*="gewürztraminer"],
.wine-card[class*="viognier"],
.wine-card[class*="albariño"],
.wine-card[class*="grüner-veltliner"],
.wine-card[class*="vermentino"],
.wine-card[class*="chenin-blanc"] {
  border-left-color: var(--gold);
}
.wine-card[class*="rosé"],
.wine-card[class*="provence"] { border-left-color: #e8829a; }
.wine-card[class*="champagne"],
.wine-card[class*="prosecco"],
.wine-card[class*="cava"] { border-left-color: #a89060; }

/* ── Stars ───────────────────────────────────────────────────────────────── */
.stars-sm { font-size: .85rem; letter-spacing: -.1em; color: var(--wine-red); }
.stars-lg { font-size: 1.4rem; letter-spacing: -.1em; }
.star-label { color: #ccc; transition: color .1s; }
.star-label:hover { cursor: pointer; }

/* ── Detail page ─────────────────────────────────────────────────────────── */
.detail-stat { padding: .5rem; }
.detail-stat-value { font-size: 1.4rem; font-weight: 700; color: var(--wine-dark); }
.detail-stat-label { font-size: .75rem; color: #888; text-transform: uppercase; letter-spacing: .05em; }
.detail-dl dt { font-weight: 600; color: #666; }
.detail-dl dd { color: #333; }

.rating-chip {
  background: var(--wine-light);
  border: 1px solid rgba(114,47,55,.15);
}
.display-rating { font-size: 1.4rem; font-weight: 800; color: var(--wine-red); }

.pairing-badge {
  background: var(--wine-light);
  color: var(--wine-dark);
  border: 1px solid rgba(114,47,55,.2);
  font-size: .85rem;
  font-weight: 500;
}

/* ── Bottle badge ────────────────────────────────────────────────────────── */
.bottle-badge { font-size: .75rem; }

/* ── Peak-center badge (bright green) ───────────────────────────────────── */
.bg-peak { background-color: #00e676 !important; color: #000 !important; }

/* ── Filter bar ──────────────────────────────────────────────────────────── */
.filter-bar { border-radius: var(--card-radius); }

/* ── Cabinet map view ────────────────────────────────────────────────────── */
.cabinet-wrap {
  background: #3a1e0a;
  border-radius: 10px;
  padding: 10px 14px 14px;
  border: 3px solid #6b3a18;
}
.cabinet-title {
  color: #c9a96e;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.cabinet-shelf {
  display: flex;
  align-items: stretch;
  margin-bottom: 4px;
}
.shelf-num {
  color: #a07040;
  font-size: 1.1rem;
  font-weight: 700;
  width: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shelf-body {
  flex: 1;
  background: #5a2e10;
  border-radius: 4px;
  border-top: 3px solid #a0622a;
  padding: 4px 8px;
  overflow-x: auto;
}
.shelf-single-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  align-items: flex-end;
  min-height: 58px;
  padding: 3px 0;
}
.shelf-section-label {
  color: #c9a96e;
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
  align-self: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  line-height: 1;
}
.shelf-section-sep {
  display: block;
  width: 1px;
  align-self: stretch;
  background: #4d2e12;
  flex-shrink: 0;
  margin: 4px 2px;
}
.map-bottle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  position: relative;
  transition: transform 0.1s;
}
.map-bottle:hover { transform: translateY(-4px); }
.map-bottle img {
  width: 20px;
  height: 48px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}
.map-bottle-dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-top: 2px;
  flex-shrink: 0;
}
.map-bottle-dot.dot-peak    { background: #00e676; }
.map-bottle-dot.dot-window  { background: #198754; }
.map-bottle-dot.dot-early   { background: #ffc107; }
.map-bottle-dot.dot-soon    { background: #fd7e14; }
.map-bottle-dot.dot-develop { background: #0dcaf0; }
.map-bottle-dot.dot-none    { background: transparent; }

/* ── Login page ──────────────────────────────────────────────────────────── */
.login-page {
  background: linear-gradient(135deg, var(--wine-dark) 0%, var(--wine-red) 60%, #a04050 100%);
  min-height: 100vh;
}
.login-card {
  width: 100%;
  max-width: 400px;
  border-radius: 1rem;
}
.login-icon {
  font-size: 3rem;
  color: var(--wine-red);
}

/* ── Primary button ──────────────────────────────────────────────────────── */
.btn-primary {
  background-color: var(--wine-red);
  border-color: var(--wine-red);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--wine-dark);
  border-color: var(--wine-dark);
}
.btn-outline-primary { color: var(--wine-red); border-color: var(--wine-red); }
.btn-outline-primary:hover { background-color: var(--wine-red); border-color: var(--wine-red); color: #fff; }

/* ── Dashboard recent wine grid ──────────────────────────────────────────── */
.recent-wine-item {
  color: inherit;
  transition: background .1s;
}
.recent-wine-item:hover { background: var(--wine-light); }

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */
.breadcrumb { font-size: .85rem; }

/* ── Cursor ──────────────────────────────────────────────────────────────── */
.cursor-pointer { cursor: pointer; }

/* ── Details/summary ─────────────────────────────────────────────────────── */
details summary { cursor: pointer; user-select: none; }

/* ── Mobile tweaks ───────────────────────────────────────────────────────── */
@media (max-width: 576px) {
  .page-title { font-size: 1.3rem; }
  .stat-value { font-size: 1.6rem; }
  .detail-stat-value { font-size: 1.1rem; }
  main { padding-left: .75rem !important; padding-right: .75rem !important; }
}