/* =============================================================================
   Fluxology Deals — app-specific styling
   -----------------------------------------------------------------------------
   The shell, cards, badges, controls and dialog all come from the shared
   design-system layer (ds-tokens.css + ds-dashboard.css). Only what is unique
   to the deals dashboard lives here.
   ============================================================================= */

/* Deals runs five filter selects plus the active-only checkbox. The search box
   gets the larger share: it is the primary control, and at the old 1.4fr its
   placeholder truncated mid-word on a 1440px screen. */
.controls {
  grid-template-columns: minmax(240px, 1.8fr) repeat(5, minmax(124px, 1fr)) auto;
}

/* --- Listing media --------------------------------------------------------- */

.image {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--dash-sunken);
  border-bottom: var(--border-width-hairline) solid var(--dash-border);
}

.image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Badges float over the photo, so they need their own backing to stay legible
   against arbitrary listing imagery instead of the card surface. */
.image .badges {
  position: absolute;
  inset: var(--spacing-sm) var(--spacing-sm) auto var(--spacing-sm);
  justify-content: flex-start;
}

.image .badges .badge {
  background: rgba(4, 10, 16, 0.72);
  backdrop-filter: blur(4px);
  border-color: rgba(242, 233, 214, 0.4);
  color: #FFFFFF;
}

/* Most curated listings carry no imageUrl. Rendering .image anyway left a large
   empty slot on every card, so an image-less card gets a plain badge strip
   instead — the same text-first card Jobs and Office Scout use. */
.badges.nomedia {
  justify-content: flex-start;
  padding: var(--spacing-lg) var(--spacing-lg) 0;
}

/* Retained-but-closed listings read as archived, not as live inventory. */
.card.inactive { opacity: 0.72; }
.card.inactive:hover { opacity: 1; }
.card.inactive .image { opacity: 0.62; }

/* --- Deals badge tones ------------------------------------------------------ */

/* Price/diversity qualifier — the headline signal in this feed. */
.badge.killer {
  color: var(--dash-accent-text);
  border-color: var(--dash-accent);
  background: var(--dash-accent-soft);
}

.badge.good {
  color: var(--dash-success-text);
  border-color: var(--dash-success);
  background: var(--dash-success-soft);
}

.badge.warn {
  color: var(--dash-warn-text);
  border-color: var(--dash-warn);
  background: var(--dash-warn-soft);
}

.badge.purchased {
  color: var(--dash-success-text);
  border-color: var(--dash-success);
  background: var(--dash-success-soft);
}

.badge.pipeline,
.badge.watch {
  color: var(--dash-accent-text);
  border-color: var(--dash-accent);
  background: var(--dash-accent-soft);
}

/* --- Deals-specific text ---------------------------------------------------- */

.kicker {
  font-family: var(--current-font-technical);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--dash-muted);
}

/* Listing titles vary from one line to three; a floor keeps the price rows of
   neighbouring cards on the same line. Preserved from the pre-overhaul sheet. */
.title { min-height: 2.6em; }

/* Storage-failure notice under the workspace controls. */
.savemsg {
  margin: var(--spacing-sm) 0 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--dash-danger-text);
}

.workspace-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

@media (max-width: 1180px) {
  .controls { grid-template-columns: repeat(3, 1fr); }
  .search { grid-column: 1 / -1; }
}

@media (max-width: 670px) {
  .controls { grid-template-columns: 1fr; }

  /* The pre-overhaul sheet used display:none here, which also hid the feed
     status from screen readers. This is an aria-live region, so hide it
     visually and keep it announced. */
  .live {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}