/* Dark theme styling for DOORS Item Tracker */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  /* Use the uploaded image as the page background. The image will cover the entire
     viewport and stay fixed while scrolling. */
  /* Adjusted background positioning to ensure the image isn't offset at the bottom.
     Position the image at the top center so it aligns neatly without a visible gap. */
  background: url('background.png') no-repeat center top fixed;
  background-size: cover;
  color: #c9d1d9;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

header {
  background-color: #161b22;
  padding: 24px 20px;
  text-align: center;
  border-bottom: 1px solid #30363d;
}

header h1 {
  margin: 0;
  font-size: 2rem;
}

header .subtitle {
  margin-top: 6px;
  font-size: 1rem;
  color: #8b949e;
}

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.info p {
  background-color: #161b22;
  padding: 16px;
  border: 1px solid #30363d;
  border-radius: 8px;
  font-size: 0.95rem;
  color: #c9d1d9;
  margin-bottom: 20px;
}

.countdown-section {
  margin-bottom: 20px;
}

.countdown-section h2 {
  margin-bottom: 8px;
  font-size: 1.2rem;
  color: #c9d1d9;
}

.countdown {
  background-color: #161b22;
  padding: 12px;
  border: 1px solid #30363d;
  border-radius: 6px;
  font-weight: bold;
  font-size: 1.1rem;
  color: #58a6ff;
  text-align: center;
}

.controls-section {
  margin-bottom: 20px;
}

#searchInput {
  width: 100%;
  padding: 10px 12px;
  font-size: 1rem;
  background-color: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #c9d1d9;
  outline: none;
  margin-bottom: 12px;
}

/* Style for the filter dropdown.  Match the search input styling so
   controls appear cohesive.  The dropdown spans the full width on
   narrow layouts and includes a subtle accent color when focused. */
.filter-select {
  width: 100%;
  padding: 10px 12px;
  font-size: 1rem;
  background-color: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #c9d1d9;
  outline: none;
  margin-bottom: 12px;
  appearance: none;
}

/* Style for the sort dropdown. Match the filter select styling so that
   both controls appear cohesive. This dropdown also spans the full
   width of the controls section on narrow layouts and uses the same
   dark background, border and arrow indicator. */
.sort-select {
  width: 100%;
  padding: 10px 12px;
  font-size: 1rem;
  background-color: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #c9d1d9;
  outline: none;
  margin-bottom: 12px;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #c9d1d9 50%),
    linear-gradient(135deg, #c9d1d9 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% - 3px), calc(100% - 15px) calc(50% - 3px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.sort-select:focus {
  border-color: #58a6ff;
}

.filter-select:focus {
  border-color: #58a6ff;
}

/* Style for the filter dropdown.  Match the dimensions and colours of the
   search input for a cohesive look.  The dropdown spans the full width of
   the controls section and uses the same dark background and border
   treatment. */
#filterSelect {
  width: 100%;
  padding: 10px 12px;
  font-size: 1rem;
  background-color: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #c9d1d9;
  outline: none;
  margin-bottom: 12px;
  appearance: none;
  /* Add a subtle down-arrow indicator via a gradient so the user knows this is
     a select element.  The transparent area ensures it doesn't clash with
     text on different themes. */
  background-image: linear-gradient(45deg, transparent 50%, #c9d1d9 50%), linear-gradient(135deg, #c9d1d9 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% - 3px), calc(100% - 15px) calc(50% - 3px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

#filterSelect:focus {
  border-color: #58a6ff;
}

#searchInput::placeholder {
  color: #6e7681;
}

#searchInput:focus {
  border-color: #58a6ff;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  padding: 6px 12px;
  border: 1px solid #30363d;
  border-radius: 20px;
  background-color: #161b22;
  color: #c9d1d9;
  font-size: 0.9rem;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.chip:hover {
  background-color: #21262d;
}

.chip.active {
  background-color: #2ea043;
  border-color: #2ea043;
  color: #fff;
}

.items-container {
  margin-top: 10px;
  /* Apply a semi‑transparent backdrop and blur to improve readability against the page background */
  backdrop-filter: blur(5px);
  background-color: rgba(13, 17, 23, 0.7);
  padding: 16px;
  border-radius: 12px;
}

.category {
  margin-top: 24px;
}

/*
 * Section headings for each item category.  Increase the font size and
 * add a subtle letter‑spacing and weight to make these labels stand
 * out visually.  These tweaks help visitors quickly scan the page
 * and distinguish between different item types.  The color remains
 * consistent with the overall palette.
 */
.category-title {
  /* Increase the category title size for better readability */
  font-size: 1.8rem;
  margin-bottom: 16px;
  /* Use a warm accent color similar to the in‑game UI for category labels */
  color: #f2d3a0;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  /* Add a subtle background bar behind the label and round the corners.  The
     linear gradient and padding mirror the aesthetic shown in the provided
     screenshot, giving each section header a distinct, polished look. */
  display: inline-block;
  padding: 6px 12px;
  background: linear-gradient(90deg, rgba(79, 49, 36, 0.9) 0%, rgba(48, 29, 23, 0.9) 100%);
  border-radius: 10px;
}

.item-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.item-card {
  display: flex;
  flex-direction: column;
  background-color: #161b22;
  border: 1px solid #30363d;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.1s ease;
}

.item-card:hover {
  transform: translateY(-4px);
}

.card-image {
  flex: 1 0 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top left, #21262d, #0d1117);
  color: #6e7681;
  font-size: 0.9rem;
  user-select: none;
}

/* When an image is present, ensure it fills the card area gracefully */
.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-content {
  padding: 12px;
  background-color: #161b22;
  border-top: 1px solid #30363d;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-category {
  font-size: 0.75rem;
  color: #8b949e;
}

.card-name {
  font-size: 1rem;
  font-weight: bold;
  color: #c9d1d9;
}

.card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: #c9d1d9;
}

/* Styling for the small currency icon used in price displays. The icon is
   sized consistently and aligned with the surrounding text. */
/* Currency icon used next to the price. Reduce size and remove extra margin */
/* Currency icon used next to the price. Reduce size and provide a small right margin */
.price-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  vertical-align: middle;
}

/* Wrap the icon and price text together so there is no extra gap (icon margin handles spacing) */
.price-wrap {
  display: inline-flex;
  align-items: center;
}

.price-icon {
  margin-right: 4px;
}

.days-badge {
  position: absolute;
  top: -10px;
  right: 10px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #c9d1d9;
  background-color: #30363d;
}

.days-badge.today {
  background-color: #2ea043;
  color: #fff;
}

/* Note text for items that are permanently gone (e.g., 3rd Anniversary items). */
.card-note {
  font-size: 0.75rem;
  color: #e5534b; /* subtle red/orange to call attention */
  margin-top: 4px;
}


footer {
  text-align: center;
  padding: 20px;
  font-size: 0.8rem;
  color: #8b949e;
  background-color: #161b22;
  border-top: 1px solid #30363d;
}