:root {
  --color-bg: #f7f7f5;
  --color-surface: #ffffff;
  --color-border: #e3e1db;
  --color-text: #262420;
  --color-muted: #7a766c;
  --color-primary: #b5511a;
  --color-primary-dark: #8f3f14;
  --color-success-bg: #e9f3ea;
  --color-success-text: #2c5e33;
  --color-error-bg: #fbe9e6;
  --color-error-text: #9a2b17;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
}

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 8px;
  padding: 10px 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-primary-dark);
  text-decoration: none;
}

.brand-logo {
  height: 150px;
  width: 150px;
  display: block;
}

.nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.nav a {
  color: var(--color-text);
  text-decoration: none;
}

.nav a:hover { color: var(--color-primary); }

.nav-user { color: var(--color-muted); font-size: 0.9rem; }

@media (max-width: 640px) {
  .container { padding: 0 14px; }
  .header-inner { padding: 8px 14px; }
  .brand { font-size: 1.1rem; }
  .brand-logo { height: 90px; width: 90px; }
  .nav { gap: 6px 12px; font-size: 0.9rem; }
}

.link-button {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-muted);
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
}

main.container { padding-top: 32px; padding-bottom: 64px; min-height: 60vh; }

h1 { margin-top: 0; }

.flash {
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-size: 0.95rem;
}

.flash-success { background: var(--color-success-bg); color: var(--color-success-text); }
.flash-error { background: var(--color-error-bg); color: var(--color-error-text); }
.flash-warning { background: #fdf3e0; color: #8a5a12; }
.flash-warning .inline-form { display: inline; }
.flash-warning .link-button { color: #8a5a12; font-weight: 600; }

.field-errors {
  background: var(--color-error-bg);
  color: var(--color-error-text);
  border-radius: var(--radius);
  padding: 12px 24px;
  margin-bottom: 16px;
}

/* Cascade bidding page */
.cascade-lot { margin-bottom: 20px; }
.cascade-lot h2 { margin-top: 0; }
.cascade-item-list { margin: 12px 0; }
.cascade-item-list summary { cursor: pointer; color: var(--color-primary); font-weight: 600; }
.cascade-item-list ul { margin: 8px 0 0; padding-left: 20px; font-size: 0.9rem; color: var(--color-muted); }
.cascade-item-list li { margin-bottom: 4px; }
.cascade-bid-form { display: flex; flex-direction: column; gap: 4px; max-width: 420px; margin-top: 16px; }
.cascade-bid-form label { font-weight: 600; margin-top: 8px; }
.cascade-bid-form input { padding: 9px 12px; border: 1px solid var(--color-border); border-radius: 6px; font: inherit; }
.cascade-bid-form small { color: var(--color-muted); }
.cascade-results { margin: 16px 0; padding: 12px 16px; background: var(--color-bg); border-radius: var(--radius); }
.cascade-results h3 { margin-top: 0; }
.cascade-results ul { padding-left: 20px; margin: 8px 0 0; }
.cascade-results li { margin-bottom: 4px; }
.cascade-outcome-failed { color: var(--color-error-text); }
.cascade-outcome-skipped, .cascade-outcome-stopped, .cascade-outcome-auction-funded { color: var(--color-muted); }

.import-help-list {
  font-size: 0.9rem;
  color: var(--color-muted);
  margin: 12px 0;
  padding-left: 20px;
}
.import-help-list li { margin-bottom: 4px; }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px;
  display: block;
  margin: 0px auto;
  color: inherit;
  text-decoration: none;
}

.card.narrow { max-width: 420px; margin: 0 auto; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

/* Same shrink-to-fit-and-center bug as .item-card (see below) — .card's
   `margin: 0px auto` fights CSS Grid's default stretch. Also: grid items default
   to `min-width: auto`, which lets an unbreakable long string (e.g. a raw URL in
   the description) force the grid track wider than its column, overlapping the
   next card — min-width: 0 plus the description's word-break fix closes that off. */
.auction-card {
  position: relative;
  margin: 0;
  min-width: 0;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.auction-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); transform: translateY(-2px); }

/* Item cards run smaller/tighter than the general .card default.

   Root cause of "cards come out different sizes": the base .card class sets
   `margin: 0px auto`. On a CSS Grid item, auto margins on the inline axis
   override the default "stretch to fill the grid column" behavior and make the
   item shrink-to-fit its own content instead, centered within its cell — that's
   exactly why cards (grid view) and rows (list view) were coming out different
   widths from each other. Overriding margin back to 0 here fixes it for both. */
.item-card {
  padding: 14px;
  margin: 0;
  min-width: 0;
}

/* Grid view: natural, content-based height — NOT forced equal (that was tried
   and reverted; see list view below for where uniform sizing actually belongs). */
.item-title {
  margin: 0 0 4px;
  font-size: 1rem;
}

.item-description {
  margin: 6px 0;
  font-size: 0.9rem;
  color: var(--color-muted);
}

.item-card-footer p { margin: 6px 0; font-size: 0.9rem; }

/* A long unbroken URL in a description (auction or item) was overflowing its
   card and overlapping the next one — this forces any long word/URL to wrap
   inside the card instead of stretching it. Also styles the safe auto-linked
   URLs from utils/linkify (see auctions/show.ejs) so they read as links. */
.auction-description,
.item-description {
  overflow-wrap: break-word;
  word-break: break-word;
}
.auction-header .auction-description { margin: 8px 0; }
.auction-description a,
.item-description a {
  color: var(--color-primary);
  text-decoration: underline;
}
.auction-description a:hover,
.item-description a:hover {
  color: var(--color-primary-dark);
}

/* List view: every row stretches to fill the single 1fr column, so all rows end
   up the same width — effectively sized to whichever row content needs the most
   space, since they all share that one column's width. (padding for this state
   is set later, alongside the rest of the list-mode rules.) */
.item-list.list-mode .item-card {
  width: 100%;
  box-sizing: border-box;
}

.item-image {
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 10px;
  background: var(--color-bg);
  display: block;
  margin-left: auto;
  margin-right: auto;
  flex-shrink: 0;
}

.badge {
  display: inline-block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}

.badge-live { background: #e6f4ea; color: #22743a; }
.badge-upcoming { background: #eef1fb; color: #364fc7; }
.badge-ended { background: #f1f1ef; color: #6b675f; }
.badge-funded { background: #e6f4ea; color: #1a5c2a; font-weight: 700; }
.badge-unfunded { background: #fbe9e6; color: #9a2b17; }
.badge-charity { background: #f3e8fb; color: #6a2fa8; }

/* Item category badge (admin item cards) — deliberately neutral, not reusing the
   auction-status badge colors above, since a category (Premium, Trade, etc.)
   isn't a status with inherent good/bad semantics the way live/funded/ended are. */
.category-badge { background: var(--color-bg); color: var(--color-muted); border: 1px solid var(--color-border); }

/* Auction tag badges (Augmented, Onyx, Lightning/Fixed Date Close) — purely
   descriptive, not a status, so deliberately understated/neutral like
   .category-badge rather than colored like the auction-status badges above.
   The "true" state (Augmented/Onyx/Lightning) gets a slightly stronger border
   so it's still easy to scan at a glance; the "false" state (Non-Augmented/
   Non-Onyx/Fixed Date Close) stays fully neutral. */
.tag-badge-group { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.tag-badge { background: var(--color-bg); color: var(--color-muted); border: 1px solid var(--color-border); font-size: 0.78rem; }
.tag-badge.tag-badge-active { border-color: var(--color-primary); color: var(--color-text); }

.meta { list-style: none; padding: 0; margin: 12px 0; color: var(--color-muted); font-size: 0.9rem; }
.meta li { margin-bottom: 4px; }

.leading-bid { font-size: 1rem; }
.my-bid { color: var(--color-muted); font-size: 0.9rem; }
.muted { color: var(--color-muted); }

form { display: flex; flex-direction: column; gap: 6px; }
form.inline-form { display: inline; }
form.bid-form { flex-direction: row; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
form.bid-form input[type="number"] { width: auto; flex: 1 1 150px; min-width: 0; }

/* Screen-reader-only: keeps the bid input labeled for accessibility without taking
   up visible space in the (now more compact) item card. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

label { font-weight: 600; font-size: 0.9rem; margin-top: 10px; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="datetime-local"],
input[type="file"],
textarea {
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font: inherit;
  width: 100%;
}

small { color: var(--color-muted); }

.btn {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  margin-top: 12px;
}

.btn:hover { background: var(--color-primary-dark); }
.btn-small { padding: 8px 14px; font-size: 0.9rem; margin-top: 0; }
.btn-danger { background: #9a2b17; }
.btn-danger:hover { background: #7a2110; }
.btn-secondary { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); }
.btn-secondary:hover { background: var(--color-bg); }

/* "Submit All Bids" confirm/progress/results panel */
.submit-all-panel { margin: 12px 0; }
.submit-all-panel h3 { margin-top: 0; }
.submit-all-panel ul { padding-left: 20px; margin: 8px 0; }
.submit-all-panel li { margin-bottom: 4px; }
.submit-all-actions { display: flex; gap: 8px; margin-top: 12px; }

.delete-item-form { margin-top: 12px; }

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.page-header-actions { display: flex; gap: 8px; align-items: center; }
.item-admin-actions { display: flex; gap: 8px; margin-top: 12px; align-items: center; }
.item-admin-actions .delete-item-form { margin-top: 0; }
.auction-admin-actions { display: flex; gap: 8px; margin: 16px 0; }
.extend-auction-status { margin-bottom: 16px; }
.extend-auction-status p { margin: 6px 0; }

.bid-log-actions { display: flex; gap: 8px; align-items: center; }
.bid-edit-form { display: flex; gap: 6px; align-items: center; margin-top: 0; }
.bid-edit-input { width: 90px; padding: 6px 8px; }

.admin-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.admin-table th, .admin-table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
}

.admin-table th { background: var(--color-bg); font-size: 0.85rem; text-transform: uppercase; color: var(--color-muted); }

/* Breaks a specific page's content out of the site-wide 1080px .container (see
   partials/layout.ejs) without changing that width globally — every other page
   stays exactly as it was. Used by the bid audit log, whose bidder-email and
   multi-form action columns get cramped at the standard content width once
   bid amounts or emails run long. The 100vw + negative-margin technique lets
   this element ignore its parent's max-width/centering and span (up to) the
   full viewport, then re-centers itself independently via its own max-width. */
.wide-content {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  padding: 0 20px;
  box-sizing: border-box;
}
.wide-content > .admin-table { max-width: 1500px; margin: 16px auto 0; }

/* Safety net for narrow/mobile viewports — lets the table scroll horizontally
   within its own area instead of breaking the page layout if it still doesn't
   fully fit. */
.table-scroll { overflow-x: auto; }

.site-footer {
  border-top: 1px solid var(--color-border);
  padding: 20px 0;
  color: var(--color-muted);
  font-size: 0.85rem;
}

/* Progress bar */
.progress-block { margin-top: 16px; max-width: 480px; }
.progress-labels {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.9rem;
  color: var(--color-muted);
  margin-bottom: 6px;
}
.progress-pct { font-weight: 700; color: var(--color-text); }
.progress-bar {
  height: 10px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.charity-raised-block { margin-top: 16px; max-width: 480px; }
.charity-raised-amount {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 4px;
}

/* Grid/list view toggle */
.view-toggle { display: inline-flex; gap: 4px; margin: 20px 0 4px; }
.view-toggle-btn {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
}
.view-toggle-btn.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 4px;
}
.filter-search {
  flex: 1 1 240px;
  padding: 9px 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font: inherit;
}
.filter-select {
  flex: 0 0 auto;
  padding: 9px 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font: inherit;
  background: var(--color-surface);
}
.filter-checkbox {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  font: inherit;
  cursor: pointer;
  user-select: none;
}
.filter-checkbox input[type="checkbox"] { cursor: pointer; }

.section-heading { margin-top: 28px; margin-bottom: 4px; font-size: 1.1rem; color: var(--color-muted); }

/* Leading-bidder styling */
.bid-mine { color: #22743a; }
.you-tag { font-weight: 700; margin-left: 4px; }

/* List view mode: hide the grid card body, show a condensed row instead */
.item-card-list-view { display: none; }
.item-list.list-mode { grid-template-columns: 1fr; gap: 0; }
.item-list.list-mode .item-card {
  padding: 12px 20px;
}
.item-list.list-mode .item-card-grid-view { display: none; }
.item-list.list-mode .item-card-list-view {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.list-item-name { font-weight: 600; flex: 1 1 140px; }
.list-item-bid {
  font-size: 0.95rem;
  text-align: right;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.3;
}
.list-item-max-bid {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--color-muted);
}
.list-item-bid-form { flex: 0 0 auto; }
.list-item-bid-form form.bid-form { margin-top: 0; }
.list-item-bid-form input[type="number"] { width: 170px; flex: none; }

.profile-auction-group { margin-top: 16px; }
.profile-auction-group h3 { display: flex; align-items: center; gap: 10px; margin-top: 0; }
.profile-auction-sponsor { margin: -4px 0 8px; font-size: 0.88rem; }
.profile-auction-group table { margin-top: 12px; }

.profile-bid-form {
  margin-top: 0;
  flex-wrap: nowrap;
}
.profile-bid-form input[type="number"] {
  width: 170px;
}