/* Copyright 2025 Renofy Ltd. All rights reserved. */
/* Quote Item Component - Mobile-first styles for offers-card variant */
/*
 * Individual quote card styles used within offers_card component
 *
 * Architecture:
 * - Used by both standard and slimline offers-card variants
 * - Template: jobs/components/base/quote_item.html with variant='offers-card'
 * - Parent container styles: offers_card.css
 *
 * Classes:
 * - .offers-card__item: Individual quote card
 * - .offers-card__price: Quote total value
 * - .offers-card__metadata-*: Secondary info (date, milestones, etc.)
 * - .offers-card__empty: Empty state message
 */

/* ========== QUOTE ITEM STYLES ========== */

/* Base/Mobile styles */
.offers-card__item {
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* Status badge - positioned top-right on all screen sizes */
.offers-card__item .status-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  font-size: var(--font-size-sm);
}

/* Empty state - disable hover */
.offers-card__item:has(.offers-card__empty) {
  box-shadow: none;
  cursor: default;
  opacity: 0.7;
}

.offers-card__item-content {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
  min-width: 0;
  justify-content: center;
}

.offers-card__primary-content {
  display: flex;
  align-items: flex-start;
  gap: 0.15rem;
  flex-direction: column;
  flex-wrap: wrap;
}

.offers-card__price {
  color: var(--color-pink);
  font-size: var(--font-size-lg);
}

.offers-card__metadata-container {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.offers-card__metadata-item, .offers-card__divider {
  font-size: var(--font-size-sm);
}

/* ========== DESKTOP STYLES ========== */

@media (min-width: 821px) {
  /* Offers card variant desktop */
  .offers-card__item {
    padding: 1rem;
    gap: 1rem;
    transition: var(--transition-fast);
  }

  .offers-card__item:hover {
    background: var(--color-white);
    box-shadow: var(--shadow-hover);
    transform: translateY(-1px);
  }

  .offers-card__item:active {
    transform: translateY(0);
    box-shadow: var(--shadow);
    background: var(--color-bg-light);
  }

  .offers-card__price {
    font-size: inherit;
  }

  .offers-card__item .status-badge {
    font-size: var(--font-size-xs);
  }

  /* Empty state with action button - show on desktop */
   .offers-card__item:has(.offers-card__empty):hover {
    background: var(--color-bg-light);
    box-shadow: none;
    transform: none;
  }
}

/* ========== ACCEPTED QUOTE - JOB SPECIFICATION ========== */
/* Used in job specification - styled to emphasize accepted status and job value */

/* Mobile first */
.accepted-quote-display .offers-card__item {
  background-color: var(--color-white);
  max-width: 550px;
  margin: 2.5rem 1rem 1rem 1rem;
  padding: 1rem 0.75rem;
}

.accepted-quote-display .offers-card__price {
  font-size: var(--font-size-xl);
}

/* Desktop overrides */
@media (min-width: 821px) {
  .accepted-quote-display .offers-card__item {
    margin: 2rem auto 0.5rem auto;
  }

  .accepted-quote-display .offers-card__price {
    font-size: var(--font-size-lg);
  }
}

/* Accepted Quote Notice - shown to stakeholder competitors */
.accepted-quote-notice {
  background: var(--color-info-bg);
  border: 1px solid var(--color-info-border);
  border-left: 3px solid var(--color-info);
  border-radius: var(--radius-lg);
  padding: 0.75rem;
  margin: 0.75rem 0 0 0;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.accepted-quote-notice p {
  color: var(--color-info-text);
  font-size: var(--font-size-base);
  margin: 0;
  line-height: 1.5;
}

.accepted-quote-notice strong {
  font-weight: var(--font-weight-semibold);
}

@media (min-width: 821px) {
  .accepted-quote-notice {
    padding: 1rem;
  }
}