/* Requests marketplace: listing cards (requests/buyer_requests.php +
   its AJAX partials) and the request detail page
   (requests/view_request.php). Same tokens as the rest of the site
   (styles/variables.css) - black/white/Roladel-green, no new colors.
   Not reusing styles/proposal_wizard.css's .pw-* classes - those are a
   form-wizard vocabulary; this is a browse/detail marketplace pattern,
   a different UI shape, though the same visual language (borders,
   radius, spacing, restrained shadows). Respects prefers-reduced-motion
   via the sitewide guard already in styles/mycss.css. */

/* ---------- Filter/sort bar ---------- */

.rq-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  padding: 14px;
  border: 1px solid var(--light-border);
  border-radius: 8px;
  margin-bottom: 18px;
  background: var(--light-surface);
}

html.dark .rq-toolbar { border-color: var(--dark-border); background: var(--dark-surface); }

.rq-toolbar-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
}

.rq-toolbar-field label {
  font-weight: 600;
  color: var(--light-text-muted);
}

html.dark .rq-toolbar-field label { color: var(--dark-text-muted); }

.rq-toolbar-field select,
.rq-toolbar-field input {
  border: 1px solid var(--light-border);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 0.85rem;
  background: var(--light-bg);
  color: var(--light-text);
}

html.dark .rq-toolbar-field select,
html.dark .rq-toolbar-field input {
  border-color: var(--dark-border);
  background: var(--dark-surface-alt);
  color: var(--dark-text);
}

.rq-toolbar-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

/* Location filter group - same .rq-toolbar-field shell as every other
   toolbar control, just with a button+select+clear row instead of a
   single input/select. */
.rq-toolbar-field-location .rq-location-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rq-toolbar-field-location #rq-location-status {
  font-size: 0.72rem;
  display: block;
  margin-top: 2px;
}

/* Distance badge - reuses .rq-card-time's exact look, swapped in when a
   near-me search is active (roladel_render_request_card()'s $options). */
.rq-card-distance {
  font-size: 0.75rem;
  color: var(--light-text-muted);
  flex-shrink: 0;
  white-space: nowrap;
}

html.dark .rq-card-distance { color: var(--dark-text-muted); }

/* ---------- Card grid ---------- */

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

.rq-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--light-border);
  border-radius: 8px;
  padding: 16px;
  background: var(--light-bg);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.rq-card:hover,
.rq-card:focus-visible {
  border-color: var(--brand-green);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}

html.dark .rq-card { border-color: var(--dark-border); background: var(--dark-surface); }
html.dark .rq-card:hover,
html.dark .rq-card:focus-visible {
  border-color: var(--brand-green-bright);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.rq-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.rq-card-buyer {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.rq-card-avatar {
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.rq-card-buyer-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--light-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.dark .rq-card-buyer-name { color: var(--dark-text-muted); }

.rq-card-time {
  font-size: 0.75rem;
  color: var(--light-text-muted);
  flex-shrink: 0;
}

html.dark .rq-card-time { color: var(--dark-text-muted); }

.rq-card-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--light-text);
  line-height: 1.35;
}

html.dark .rq-card-title { color: var(--dark-text); }

.rq-card-excerpt {
  font-size: 0.85rem;
  color: var(--light-text-muted);
  line-height: 1.5;
  margin: 0 0 10px;
  flex-grow: 1;
}

html.dark .rq-card-excerpt { color: var(--dark-text-muted); }

.rq-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.rq-chip {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--light-text-muted);
  border: 1px solid var(--light-border);
  border-radius: 20px;
  padding: 2px 10px;
}

html.dark .rq-chip { color: var(--dark-text-muted); border-color: var(--dark-border); }

.rq-card-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 12px;
  border-top: 1px solid var(--light-border);
  padding-top: 10px;
  margin-bottom: 12px;
}

html.dark .rq-card-meta { border-color: var(--dark-border); }

.rq-card-meta-item { display: flex; flex-direction: column; gap: 2px; }

.rq-card-meta-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--light-text-muted);
}

html.dark .rq-card-meta-label { color: var(--dark-text-muted); }

.rq-card-meta-value {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--light-text);
}

html.dark .rq-card-meta-value { color: var(--dark-text); }

.rq-card-budget { color: var(--brand-green); }
html.dark .rq-card-budget { color: var(--brand-green-bright); }

.rq-card-cta {
  align-self: flex-start;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--brand-green);
}

html.dark .rq-card-cta { color: var(--brand-green-bright); }

/* ---------- Owner-mode card (requests/manage_requests.php) ----------
   Same base .rq-card visuals (border/radius/padding/hover, inherited
   from the rule above) but rendered as a <div> instead of an <a> - it
   needs real interactive controls in its footer (a dropdown, multiple
   action links), which an <a> can't legally contain. */

.rq-card-owner {
  cursor: default;
}

.rq-card-owner .rq-card-top {
  justify-content: flex-start;
  gap: 10px;
}

.rq-card-title-link {
  text-decoration: none;
  color: inherit;
}

.rq-card-title-link:hover .rq-card-title {
  color: var(--brand-green);
  text-decoration: underline;
}

html.dark .rq-card-title-link:hover .rq-card-title { color: var(--brand-green-bright); }

.rq-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  border-top: 1px solid var(--light-border);
  padding-top: 12px;
  margin-top: auto;
}

html.dark .rq-card-actions { border-color: var(--dark-border); }

.rq-card-actions .rq-btn,
.rq-card-actions .rq-btn-outline {
  width: auto;
  min-height: 36px;
  padding: 0 14px;
  margin-top: 0;
  font-size: 0.82rem;
}

/* ---------- Sent-offer card (requests/buyer_requests.php's "Sent Offers" tab) ---------- */

.rq-card-sent-offer .rq-card-buyer-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--light-text);
  /* The base .rq-card-buyer-name rule (single-line ellipsis truncation)
     is correct for its normal job - a short seller username in
     browse/owner mode - but this element holds "Problem: {request
     title}" here, which can be arbitrarily long. Left as nowrap, an
     unbroken request title forces this element's min-content width past
     the viewport, which then drags the whole .rq-grid column (and the
     page) wider than the screen on mobile - confirmed directly (893px
     wide element inside a 390px viewport) before this override existed.
     Letting it wrap is also strictly better here than truncating: unlike
     a username, silently ellipsis-cutting a request title would hide
     which request the offer was actually for. */
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: break-word;
}

html.dark .rq-card-sent-offer .rq-card-buyer-name { color: var(--dark-text); }

/* ---------- Applicant card (requests/view_offers.php - owner-only,
   shows real offer data: proposal, price, description. Distinct from
   the public .rq-applicant-tile preview on the detail page, which
   deliberately hides all of this from other freelancers.) ---------- */

.rq-applicant-card {
  display: flex;
  gap: 16px;
  border: 1px solid var(--light-border);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 14px;
}

html.dark .rq-applicant-card { border-color: var(--dark-border); }

.rq-applicant-card-thumb {
  width: 100px;
  height: 70px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

.rq-applicant-card-body { flex: 1 1 auto; min-width: 0; }

.rq-applicant-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 6px;
}

.rq-applicant-card-title a { color: var(--light-text); text-decoration: none; }
html.dark .rq-applicant-card-title a { color: var(--dark-text); }
.rq-applicant-card-title a:hover { color: var(--brand-green); text-decoration: underline; }
html.dark .rq-applicant-card-title a:hover { color: var(--brand-green-bright); }

.rq-applicant-card-desc {
  font-size: 0.85rem;
  color: var(--light-text-muted);
  margin: 0 0 8px;
}

html.dark .rq-applicant-card-desc { color: var(--dark-text-muted); }

.rq-applicant-card-side {
  flex: 0 0 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  border-left: 1px solid var(--light-border);
  padding-left: 16px;
}

html.dark .rq-applicant-card-side { border-color: var(--dark-border); }

@media (max-width: 576px) {
  .rq-applicant-card { flex-direction: column; }
  .rq-applicant-card-side { border-left: none; border-top: 1px solid var(--light-border); padding-left: 0; padding-top: 12px; flex-direction: row; flex-wrap: wrap; justify-content: center; }
  html.dark .rq-applicant-card-side { border-color: var(--dark-border); }
}

.rq-applicant-card-avatar { border-radius: 50%; object-fit: cover; }

.rq-applicant-card-name { font-weight: 700; font-size: 0.85rem; }

.rq-applicant-card-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.rq-applicant-card-actions .rq-btn,
.rq-applicant-card-actions .rq-btn-outline {
  min-height: 34px;
  font-size: 0.78rem;
  margin-top: 0;
}

.rq-empty {
  border: 1px dashed var(--light-border);
  border-radius: 8px;
  padding: 40px 20px;
  text-align: center;
  color: var(--light-text-muted);
  grid-column: 1 / -1;
}

html.dark .rq-empty { border-color: var(--dark-border); color: var(--dark-text-muted); }

/* ---------- Status badges (shared by card + detail header) ---------- */

.rq-status {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--light-border);
  color: var(--light-text-muted);
}

html.dark .rq-status { border-color: var(--dark-border); color: var(--dark-text-muted); }

.rq-status-open { border-color: var(--brand-green); color: var(--brand-green); }
html.dark .rq-status-open { border-color: var(--brand-green-bright); color: var(--brand-green-bright); }

/* Active status, but the deadline has passed - visually distinct from the
   plain neutral "Applications Closed" badge so a buyer/seller can tell
   the two apart at a glance, but still no new color: reuses the same
   danger red already established sitewide for destructive/blocked states
   (see .rq-btn-danger above). */
.rq-status-expired { border-color: #dc3545; color: #dc3545; }

/* ---------- Detail page ---------- */

.rq-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
  align-items: start;
}

@media (max-width: 991px) {
  .rq-detail { grid-template-columns: 1fr; }
}

.rq-detail-header { margin-bottom: 20px; }

.rq-detail-title {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 10px 0 8px;
  color: var(--light-text);
  overflow-wrap: break-word;
}

html.dark .rq-detail-title { color: var(--dark-text); }

.rq-detail-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--light-text-muted);
}

html.dark .rq-detail-sub { color: var(--dark-text-muted); }

.rq-section {
  border: 1px solid var(--light-border);
  border-radius: 8px;
  padding: 18px 20px;
  margin-bottom: 18px;
}

html.dark .rq-section { border-color: var(--dark-border); }

.rq-section-heading {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--light-text);
}

html.dark .rq-section-heading { color: var(--dark-text); }

.rq-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 14px;
}

.rq-description {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--light-text);
  overflow-wrap: break-word;
}

html.dark .rq-description { color: var(--dark-text); }

.rq-description img { max-width: 100%; height: auto; }

/* ---------- Sidebar / summary card ---------- */

.rq-sidebar-card {
  border: 1px solid var(--light-border);
  border-radius: 8px;
  padding: 18px;
  position: sticky;
  top: 90px;
}

html.dark .rq-sidebar-card { border-color: var(--dark-border); }

.rq-sidebar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--light-border);
  font-size: 0.85rem;
}

html.dark .rq-sidebar-row { border-color: var(--dark-border); }

.rq-sidebar-row:last-of-type { border-bottom: none; }

.rq-sidebar-row-label { color: var(--light-text-muted); }
html.dark .rq-sidebar-row-label { color: var(--dark-text-muted); }

.rq-sidebar-row-value { font-weight: 700; color: var(--light-text); }
html.dark .rq-sidebar-row-value { color: var(--dark-text); }

.rq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.9rem;
  border: 1px solid var(--brand-green);
  background: var(--brand-green);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
  margin-top: 14px;
  text-decoration: none;
}

.rq-btn:hover { background: #2a2a2a; color: #fff; text-decoration: none; }
.rq-btn:disabled { opacity: 0.6; cursor: not-allowed; }

html.dark .rq-btn { background: var(--brand-green-bright); border-color: var(--brand-green-bright); color: #000; }
html.dark .rq-btn:hover { background: #ddd; color: #000; }

.rq-btn-outline {
  background: transparent;
  color: var(--light-text);
  border-color: var(--light-border);
}

html.dark .rq-btn-outline { color: var(--dark-text); border-color: var(--dark-border); }

/* Destructive owner action (delete) - the only spot in this file that
   isn't black/white/green, matching the same #dc3545 already used
   sitewide for destructive actions (e.g. styles/proposal_wizard.css's
   error color, styles/mycss.css's remove-attachment hover). */
.rq-btn-danger { color: #dc3545; border-color: #dc3545; }
.rq-btn-danger:hover { background: #dc3545; color: #fff; }

.rq-applied-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.9rem;
  border: 1px solid var(--light-border);
  color: var(--light-text-muted);
  margin-top: 14px;
}

html.dark .rq-applied-pill { border-color: var(--dark-border); color: var(--dark-text-muted); }

/* Same shape as .rq-applied-pill, but for "the deadline passed" - same
   danger red as .rq-status-expired above, for the same reason. */
.rq-applied-pill-expired { border-color: #dc3545; color: #dc3545; }

/* ---------- About the buyer ---------- */

.rq-buyer-card {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rq-buyer-avatar { border-radius: 50%; object-fit: cover; }

.rq-buyer-name-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.rq-buyer-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
  font-size: 0.82rem;
  color: var(--light-text-muted);
}

html.dark .rq-buyer-stats { color: var(--dark-text-muted); }

/* ---------- Applicant preview tiles ---------- */

.rq-applicant-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rq-applicant-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--light-border);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease;
}

.rq-applicant-tile:hover { border-color: var(--brand-green); text-decoration: none; color: inherit; }
html.dark .rq-applicant-tile { border-color: var(--dark-border); }
html.dark .rq-applicant-tile:hover { border-color: var(--brand-green-bright); }

.rq-applicant-avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; }

.rq-applicant-info { min-width: 0; }

.rq-applicant-name { font-weight: 600; font-size: 0.85rem; color: var(--light-text); }
html.dark .rq-applicant-name { color: var(--dark-text); }

.rq-applicant-meta { font-size: 0.75rem; color: var(--light-text-muted); }
html.dark .rq-applicant-meta { color: var(--dark-text-muted); }

/* ---------- Deadline countdown (detail page) ----------
   Modeled visually on order_details.php's .countdown-box (dark box, bold
   number, small label) but built from this file's own tokens rather than
   copied styles - a different, unrelated feature (post-order delivery
   countdown) that just happens to share the same "boxes in a row" shape.
   Server-rendered text (roladel_format_time_remaining()) is styled by
   .rq-countdown alone, before js/requests_marketplace.js's initCountdown()
   swaps in the .rq-countdown-boxes markup. */

.rq-countdown {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--light-text);
}

html.dark .rq-countdown { color: var(--dark-text); }

.rq-countdown.rq-countdown-expired { color: #dc3545; font-size: 1.1rem; }

.rq-countdown-boxes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.rq-countdown-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  padding: 10px 6px;
  border-radius: 6px;
  background: var(--brand-green);
  color: #fff;
}

html.dark .rq-countdown-box { background: var(--brand-green-bright); color: #000; }

.rq-countdown-number {
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.2;
}

.rq-countdown-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.85;
  margin-top: 2px;
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
  .rq-toolbar { flex-direction: column; align-items: stretch; }
  .rq-toolbar-actions { margin-left: 0; }
  .rq-grid { grid-template-columns: 1fr; }
  .rq-detail-title { font-size: 1.3rem; }
  .rq-sidebar-card { position: static; }

  /* The Apply card's own button stays in the flow (still reachable by
     scrolling to the sidebar), and a slim sticky bottom bar gives quick
     access without duplicating the whole sidebar card or covering
     content - matches the site's existing mobile-bottom-nav height so
     it stacks above that bar instead of overlapping it. */
  .rq-sticky-apply {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--mobile-bottom-nav-height, 0);
    z-index: 900;
    padding: 10px 14px;
    background: var(--light-bg);
    border-top: 1px solid var(--light-border);
    display: flex;
  }

  html.dark .rq-sticky-apply { background: var(--dark-bg); border-color: var(--dark-border); }

  .rq-sticky-apply .rq-btn,
  .rq-sticky-apply .rq-applied-pill { margin-top: 0; }

  /* Reserve room so the sticky bar never covers the last bit of content. */
  .rq-detail { padding-bottom: 70px; }

  /* Four boxes in a row don't fit narrow screens without overflow - wrap
     to 2-per-row, same as the rest of this file's mobile treatment. */
  .rq-countdown-box { flex: 0 0 calc(50% - 5px); min-width: 0; }
}

@media (min-width: 768px) {
  .rq-sticky-apply { display: none; }
}