/* ═══════════════════════════════════════════════════════════════════════════
   BandGigz — Shared Stylesheet
   ═══════════════════════════════════════════════════════════════════════════

   PURPOSE
   Single source of truth for the BandGigz design system. Encodes every token
   from the Design Direction v1.0 doc (Part 1) as CSS custom properties under
   :root, plus a minimal set of base component classes that redesigned pages
   can consume.

   LOAD ORDER
   Linked from every HTML page AFTER the font imports and BEFORE that page's
   inline <style> block. This ordering means a page's inline styles always
   win over the shared sheet — pages that have not yet been redesigned
   render exactly as they do today.

   NAMING CONVENTIONS
   - All custom properties prefixed --bgz- to avoid collision with existing
     per-page variables (--teal, --orange, --bg, --text-mid, --muted, etc).
   - All shared classes prefixed .bgz- to avoid collision with existing
     per-page classes (.btn, .card, .nav-link, .hero, etc).

   SCOPE OF THIS FILE
   - Tokens: complete. Covers every value from Part 1 of the design doc.
   - Component classes: minimal. Buttons, base card, lifecycle pills.
     Additional component classes are added when a specific page redesign
     requires them, not speculatively.
   - Fonts: not loaded here. Pages load their own DM Sans / DM Serif
     Display links until they are redesigned and pruned individually.
   - Reset: not included. Each page keeps its own `* { margin:0; ... }`
     reset until pages are redesigned individually.

   ═══════════════════════════════════════════════════════════════════════ */

:root {

  /* ── BRAND COLORS ──────────────────────────────────────────────────── */
  --bgz-color-brand-teal:           #1eb89a;
  --bgz-color-brand-teal-deep:      #0F6E56;
  --bgz-color-brand-teal-light:     #e1f5ee;
  --bgz-color-brand-orange:         #f5820a;
  --bgz-color-brand-orange-deep:    #854F0B;
  --bgz-color-brand-orange-light:   #FAEEDA;

  /* ── NEUTRAL PALETTE ───────────────────────────────────────────────── */
  --bgz-color-text-primary:         #0a0a0f;
  --bgz-color-text-secondary:       #444441;
  --bgz-color-text-muted:           #71706c;
  --bgz-color-text-tertiary:        #aeaca5;
  --bgz-color-border:               #ececea;
  --bgz-color-border-deep:          #d3d1c7;
  --bgz-color-surface:              #fafafa;
  --bgz-color-surface-inset:        #fbfbfa;
  --bgz-color-surface-accent:       #f3f3f1;
  --bgz-color-white:                #ffffff;

  /* ── LIFECYCLE STATE — DOT COLORS ──────────────────────────────────── */
  --bgz-color-state-open-dot:       #1d9e75;
  --bgz-color-state-warning-dot:    #BA7517;
  --bgz-color-state-neutral-dot:    #888780;
  --bgz-color-state-released-dot:   #639922;
  --bgz-color-state-danger-dot:     #E24B4A;

  /* ── LIFECYCLE STATE — PILL TINTS ──────────────────────────────────── */
  /* "Open" and "Payment held" reuse --bgz-color-brand-teal-light / -deep.   */
  /* "Payment required" reuses --bgz-color-brand-orange-light / -deep.       */
  /* "Pending / Accepted / In Window / Completed" reuse --bgz-color-surface- */
  /*   accent + --bgz-color-text-secondary.                                  */
  /* "Released" and "Danger" have their own dedicated tints below.           */
  --bgz-color-state-released-bg:    #EAF3DE;
  --bgz-color-state-released-text:  #3B6D11;
  --bgz-color-state-danger-bg:      #FCEBEB;
  --bgz-color-state-danger-text:    #A32D2D;

  /* ── TRUST SIGNAL ALIASES ──────────────────────────────────────────── */
  /* Per design doc 1.2 note: gold-star intentionally shares warning-dot hex */
  --bgz-color-star-filled:          #BA7517;
  --bgz-color-star-empty:           #d3d1c7;
  --bgz-color-trust-identity:       #1eb89a;
  --bgz-color-trust-verified:       #f5820a;

  /* ── TYPOGRAPHY — FAMILIES ─────────────────────────────────────────── */
  --bgz-font-sans:                  'DM Sans', system-ui, sans-serif;
  --bgz-font-serif:                 'DM Serif Display', Georgia, serif;

  /* ── TYPOGRAPHY — SIZES ────────────────────────────────────────────── */
  /* Where the design doc gives a range, the lower bound is the canonical    */
  /* token value; pages may use the upper bound by overriding inline.        */
  --bgz-text-hero:                  54px;
  --bgz-text-section:               32px;
  --bgz-text-page:                  20px;
  --bgz-text-card-title:            14.5px;
  --bgz-text-body:                  13px;
  --bgz-text-meta:                  12px;
  --bgz-text-helper:                11.5px;
  --bgz-text-eyebrow:               10.5px;
  --bgz-text-stat:                  22px;
  --bgz-text-price-sm:              18px;
  --bgz-text-price-lg:              22px;
  --bgz-text-button:                12px;

  /* ── TYPOGRAPHY — WEIGHTS ──────────────────────────────────────────── */
  --bgz-weight-regular:             400;
  --bgz-weight-medium:              500;
  --bgz-weight-semibold:            600;

  /* ── TYPOGRAPHY — LETTER-SPACING ───────────────────────────────────── */
  --bgz-tracking-hero:              -0.025em;
  --bgz-tracking-tight:             -0.02em;
  --bgz-tracking-card:              -0.005em;
  --bgz-tracking-price:             -0.01em;
  --bgz-tracking-eyebrow:           0.06em;

  /* ── TYPOGRAPHY — LINE-HEIGHTS ─────────────────────────────────────── */
  --bgz-leading-body:               1.4;
  --bgz-leading-tight:              1.1;

  /* ── SPACING ───────────────────────────────────────────────────────── */
  /* Named by primary use case per design doc 1.4 table.                     */
  --bgz-space-inline-gap:           2px;
  --bgz-space-tag-gap:              4px;
  --bgz-space-button-gap:           6px;
  --bgz-space-card-gap:             8px;
  --bgz-space-card-top-pad:         10px;
  --bgz-space-card-body-pad:        12px;
  --bgz-space-card-side-pad:        14px;
  --bgz-space-page-pad:             16px;
  --bgz-space-section-dense:        18px;
  --bgz-space-section:              24px;
  --bgz-space-section-hero:         32px;

  /* ── BORDER RADIUS ─────────────────────────────────────────────────── */
  --bgz-radius-dot:                 3px;
  --bgz-radius-badge:               4px;
  --bgz-radius-button:              5px;
  --bgz-radius-filter:              6px;
  --bgz-radius-card:                7px;
  --bgz-radius-panel:               8px;
  --bgz-radius-page:                12px;
  --bgz-radius-full:                50%;

  /* ── BORDER WEIGHTS ────────────────────────────────────────────────── */
  --bgz-border-w-hairline:          0.5px;
  --bgz-border-w-active:            1px;
  --bgz-border-w-accent:            2px;

}

/* ═══════════════════════════════════════════════════════════════════════════
   BASE COMPONENT CLASSES
   ═══════════════════════════════════════════════════════════════════════════

   Minimal set ready for adoption when redesigned pages need them. Additional
   classes (segmented filter, metric tile, activity row, etc.) will be added
   here when their consuming page is redesigned, not speculatively.

   All classes carry the .bgz- prefix to avoid colliding with existing per-
   page class names (.btn, .card, .nav-link, .hero, etc.). Existing pages
   are not affected by anything in this file until they opt in by applying
   a .bgz- class.

   ═══════════════════════════════════════════════════════════════════════ */


/* ── BUTTONS (design doc 1.7) ────────────────────────────────────────────
   Four base variants. Brand CTAs (homepage filled-teal "I'm an artist" and
   filled-orange "I'm a venue") are NOT included here — those are homepage-
   only per design doc and will be defined in the homepage's own inline
   <style> when that page is redesigned.
   ──────────────────────────────────────────────────────────────────────── */

.bgz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bgz-space-button-gap);
  font-family: var(--bgz-font-sans);
  font-size: var(--bgz-text-button);
  font-weight: var(--bgz-weight-medium);
  line-height: 1;
  padding: 7px 14px;
  border-radius: var(--bgz-radius-button);
  border: var(--bgz-border-w-hairline) solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bgz-btn-primary {
  background: var(--bgz-color-text-primary);
  color: var(--bgz-color-white);
  border-color: var(--bgz-color-text-primary);
}
.bgz-btn-primary:hover {
  background: #1a1a22;
  border-color: #1a1a22;
}

.bgz-btn-secondary {
  background: var(--bgz-color-white);
  color: var(--bgz-color-text-primary);
  border-color: var(--bgz-color-border);
}
.bgz-btn-secondary:hover {
  border-color: var(--bgz-color-border-deep);
}

.bgz-btn-destructive {
  background: var(--bgz-color-white);
  color: var(--bgz-color-state-danger-text);
  border-color: var(--bgz-color-border);
}
.bgz-btn-destructive:hover {
  border-color: var(--bgz-color-state-danger-text);
}


/* ── CARDS (design doc 1.8) ──────────────────────────────────────────────
   Default card container. Design doc says padding is 12–14px depending on
   density requirement; this base class uses the 14px default. Pages needing
   tighter cards can either override or use a future .bgz-card-tight variant
   when that pattern emerges.
   ──────────────────────────────────────────────────────────────────────── */

.bgz-card {
  background: var(--bgz-color-white);
  border: var(--bgz-border-w-hairline) solid var(--bgz-color-border);
  border-radius: var(--bgz-radius-card);
  padding: var(--bgz-space-card-side-pad);
}


/* ── LIFECYCLE PILLS (design doc 1.9) ────────────────────────────────────
   Dot + label format. The dot color carries the meaning; the pill background
   is the lightest tint of the same color family. "Negotiating" is the one
   filled-black exception (no dot — the whole pill carries the contrast).

   USAGE
       <span class="bgz-pill-state bgz-pill-state-open">Open</span>
       <span class="bgz-pill-state bgz-pill-state-payment-required">Payment required</span>
       <span class="bgz-pill-state bgz-pill-state-negotiating">Negotiating</span>

   Always apply .bgz-pill-state plus exactly one state modifier.
   ──────────────────────────────────────────────────────────────────────── */

.bgz-pill-state {
  display: inline-flex;
  align-items: center;
  gap: var(--bgz-space-button-gap);
  font-family: var(--bgz-font-sans);
  font-size: var(--bgz-text-helper);
  font-weight: var(--bgz-weight-medium);
  line-height: 1;
  padding: 4px 8px 4px 7px;
  border-radius: var(--bgz-radius-badge);
  white-space: nowrap;
}

.bgz-pill-state::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--bgz-radius-full);
  flex-shrink: 0;
}

/* Open + Payment held — teal */
.bgz-pill-state-open,
.bgz-pill-state-payment-held {
  background: var(--bgz-color-brand-teal-light);
  color: var(--bgz-color-brand-teal-deep);
}
.bgz-pill-state-open::before,
.bgz-pill-state-payment-held::before {
  background: var(--bgz-color-state-open-dot);
}

/* Payment required — orange */
.bgz-pill-state-payment-required {
  background: var(--bgz-color-brand-orange-light);
  color: var(--bgz-color-brand-orange-deep);
}
.bgz-pill-state-payment-required::before {
  background: var(--bgz-color-state-warning-dot);
}

/* Payment released — green */
.bgz-pill-state-payment-released {
  background: var(--bgz-color-state-released-bg);
  color: var(--bgz-color-state-released-text);
}
.bgz-pill-state-payment-released::before {
  background: var(--bgz-color-state-released-dot);
}

/* Disputed + Cancelled + Declined — red (all share treatment per doc) */
.bgz-pill-state-disputed,
.bgz-pill-state-cancelled,
.bgz-pill-state-declined {
  background: var(--bgz-color-state-danger-bg);
  color: var(--bgz-color-state-danger-text);
}
.bgz-pill-state-disputed::before,
.bgz-pill-state-cancelled::before,
.bgz-pill-state-declined::before {
  background: var(--bgz-color-state-danger-dot);
}

/* Pending — neutral surface, warning dot */
.bgz-pill-state-pending {
  background: var(--bgz-color-surface-accent);
  color: var(--bgz-color-text-secondary);
}
.bgz-pill-state-pending::before {
  background: var(--bgz-color-state-warning-dot);
}

/* Accepted — neutral surface, open dot */
.bgz-pill-state-accepted {
  background: var(--bgz-color-surface-accent);
  color: var(--bgz-color-text-secondary);
}
.bgz-pill-state-accepted::before {
  background: var(--bgz-color-state-open-dot);
}

/* In window + Completed — neutral surface, neutral dot */
.bgz-pill-state-in-window,
.bgz-pill-state-completed {
  background: var(--bgz-color-surface-accent);
  color: var(--bgz-color-text-secondary);
}
.bgz-pill-state-in-window::before,
.bgz-pill-state-completed::before {
  background: var(--bgz-color-state-neutral-dot);
}

/* Negotiating — filled black, no dot */
.bgz-pill-state-negotiating {
  background: var(--bgz-color-text-primary);
  color: var(--bgz-color-white);
}
.bgz-pill-state-negotiating::before {
  display: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   PAGE-LEVEL PATTERNS — first introduced for gigs.html (2026-05-11)
   ═══════════════════════════════════════════════════════════════════════════

   Added for the gigs.html v1 redesign. These classes drive the segmented
   filter bar, page heading row with sort chip, single-bordered-card list
   view, inline state badges (Private / Applied) on browse rows, and the
   centered empty state. The patterns are reusable on similar list-style
   pages (My Gigs, Bookings, Applications) — they live here because the
   design system treats list-view + segmented-filter as primary content
   patterns, not page-specific.

   ═══════════════════════════════════════════════════════════════════════ */


/* ── PAGE HEADING ROW + SORT CHIP (design doc 2.3) ───────────────────────
   The top row above any list page: page heading on the left with inline
   result count, sort chip on the right.
   ──────────────────────────────────────────────────────────────────────── */

.bgz-page-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.bgz-page-heading {
  font-family: var(--bgz-font-sans);
  font-size: var(--bgz-text-page);
  font-weight: var(--bgz-weight-medium);
  letter-spacing: var(--bgz-tracking-tight);
  color: var(--bgz-color-text-primary);
  line-height: 1.2;
  margin: 0;
}

.bgz-page-heading-count {
  margin-left: 6px;
  font-size: var(--bgz-text-meta);
  font-weight: var(--bgz-weight-regular);
  color: var(--bgz-color-text-tertiary);
  letter-spacing: normal;
}

.bgz-sort-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 28px 0 12px;
  background: var(--bgz-color-white);
  border: var(--bgz-border-w-hairline) solid var(--bgz-color-border);
  border-radius: var(--bgz-radius-filter);
  font-family: var(--bgz-font-sans);
  font-size: var(--bgz-text-meta);
  color: var(--bgz-color-text-primary);
  white-space: nowrap;
  transition: border-color 0.15s ease;
}

.bgz-sort-chip:hover {
  border-color: var(--bgz-color-border-deep);
}

.bgz-sort-chip-icon {
  display: inline-flex;
  align-items: center;
  color: var(--bgz-color-text-tertiary);
  flex-shrink: 0;
}

.bgz-sort-chip-icon svg {
  width: 13px;
  height: 13px;
}

.bgz-sort-chip select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  cursor: pointer;
  padding: 0;
}

.bgz-sort-chip-caret {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--bgz-color-text-tertiary);
  display: inline-flex;
  align-items: center;
}

.bgz-sort-chip-caret svg {
  width: 11px;
  height: 11px;
}


/* ── SEGMENTED FILTER BAR (design doc 2.3) ───────────────────────────────
   Single bordered container, 34px tall, with 0.5px vertical dividers
   between segments. Segment 1 is a search input with prefix icon (flex
   1.3 for visual weight). Segments 2–4 are clickable triggers showing
   the current filter state. Native select elements are positioned
   absolutely to cover their segments so clicks anywhere in the segment
   open the dropdown.
   ──────────────────────────────────────────────────────────────────────── */

.bgz-filter-bar {
  display: flex;
  align-items: stretch;
  background: var(--bgz-color-white);
  border: var(--bgz-border-w-hairline) solid var(--bgz-color-border);
  border-radius: var(--bgz-radius-filter);
  height: 34px;
  /* No overflow:hidden — dropdowns positioned absolutely from segments
     need to extend below the bar. First/last segments carry the matching
     border-radius so the visual rounding still looks correct. */
}

.bgz-filter-segment {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  padding: 0 12px;
  border-right: var(--bgz-border-w-hairline) solid var(--bgz-color-border);
  font-family: var(--bgz-font-sans);
  font-size: var(--bgz-text-meta);
  color: var(--bgz-color-text-tertiary);
  background: var(--bgz-color-white);
  transition: background-color 0.15s ease;
}

.bgz-filter-segment:first-child {
  border-top-left-radius: var(--bgz-radius-filter);
  border-bottom-left-radius: var(--bgz-radius-filter);
}

.bgz-filter-segment:last-child {
  border-top-right-radius: var(--bgz-radius-filter);
  border-bottom-right-radius: var(--bgz-radius-filter);
}

.bgz-filter-segment:last-child {
  border-right: none;
}

.bgz-filter-segment:hover {
  background: var(--bgz-color-surface);
}

.bgz-filter-segment-search {
  flex: 1.3;
}

.bgz-filter-segment-icon {
  flex-shrink: 0;
  margin-right: 6px;
  color: var(--bgz-color-text-tertiary);
  display: inline-flex;
  align-items: center;
}

.bgz-filter-segment-icon svg {
  width: 13px;
  height: 13px;
}

.bgz-filter-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  color: var(--bgz-color-text-primary);
  padding: 0;
  height: 100%;
}

.bgz-filter-input::placeholder {
  color: var(--bgz-color-text-tertiary);
}

.bgz-filter-trigger {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  text-align: left;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  cursor: pointer;
  padding: 0;
  padding-right: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 100%;
}

.bgz-filter-segment select.bgz-filter-trigger {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.bgz-filter-segment-active,
.bgz-filter-segment-active .bgz-filter-trigger {
  color: var(--bgz-color-text-primary);
  font-weight: var(--bgz-weight-medium);
}

.bgz-filter-segment-active .bgz-filter-input {
  color: var(--bgz-color-text-primary);
  font-weight: var(--bgz-weight-medium);
}

.bgz-filter-trigger-caret {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--bgz-color-text-tertiary);
  display: inline-flex;
  align-items: center;
}

.bgz-filter-trigger-caret svg {
  width: 11px;
  height: 11px;
}

.bgz-filter-row-aux {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.bgz-filter-more-toggle,
.bgz-filter-bar-clear {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--bgz-font-sans);
  font-size: var(--bgz-text-helper);
  color: var(--bgz-color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.bgz-filter-more-toggle:hover,
.bgz-filter-bar-clear:hover {
  color: var(--bgz-color-text-primary);
}

/* Commit 2 (2026-05-11) — Clear filters button is hidden until at least
   one filter is active. JS toggles the [hidden] attribute on the button
   directly; this rule is a defensive backstop. */
.bgz-filter-bar-clear[hidden] {
  display: none;
}


/* ── FILTER DROPDOWN PANEL (Commit 2) ────────────────────────────────────
   Positioned absolutely under a filter segment. Used by the multi-select
   genre dropdown and the date preset dropdown. White card, hairline
   border, soft shadow. The segment owns position:relative so the dropdown
   anchors to it.
   ──────────────────────────────────────────────────────────────────────── */

.bgz-filter-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 100;
  min-width: 220px;
  max-width: 320px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--bgz-color-white);
  border: var(--bgz-border-w-hairline) solid var(--bgz-color-border-deep);
  border-radius: var(--bgz-radius-card);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  padding: 4px 0;
  font-family: var(--bgz-font-sans);
  font-size: var(--bgz-text-meta);
  color: var(--bgz-color-text-primary);
  font-weight: var(--bgz-weight-regular);
}

.bgz-filter-dropdown[hidden] {
  display: none;
}

/* Anchor the date dropdown to the right edge of its segment so it
   doesn't overflow the viewport on the rightmost column. */
.bgz-filter-segment:last-child .bgz-filter-dropdown {
  left: auto;
  right: 0;
}

.bgz-filter-dropdown-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  cursor: pointer;
  user-select: none;
  color: var(--bgz-color-text-primary);
  transition: background-color 0.1s ease;
}

.bgz-filter-dropdown-option:hover {
  background: var(--bgz-color-surface);
}

.bgz-filter-dropdown-option-check {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bgz-color-brand-teal-deep);
  visibility: hidden;
}

.bgz-filter-dropdown-option-active .bgz-filter-dropdown-option-check {
  visibility: visible;
}

.bgz-filter-dropdown-option-active .bgz-filter-dropdown-option-label {
  font-weight: var(--bgz-weight-medium);
}

.bgz-filter-dropdown-option-check svg {
  width: 14px;
  height: 14px;
}

.bgz-filter-dropdown-option-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bgz-filter-dropdown-divider {
  height: 1px;
  background: var(--bgz-color-border);
  margin: 4px 0;
}

/* Custom-range section inside the Date dropdown. Hidden until the user
   picks "Custom range" — then revealed inline below the preset list. */
.bgz-filter-dropdown-date-section {
  padding: 8px 12px 10px;
  border-top: var(--bgz-border-w-hairline) solid var(--bgz-color-border);
  margin-top: 4px;
}

.bgz-filter-dropdown-date-section[hidden] {
  display: none;
}

.bgz-filter-dropdown-date-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.bgz-filter-dropdown-date-row label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: var(--bgz-text-helper);
  color: var(--bgz-color-text-muted);
}

.bgz-filter-dropdown-date-input {
  font-family: var(--bgz-font-sans);
  font-size: var(--bgz-text-meta);
  color: var(--bgz-color-text-primary);
  padding: 5px 8px;
  border: var(--bgz-border-w-hairline) solid var(--bgz-color-border-deep);
  border-radius: var(--bgz-radius-button);
  background: var(--bgz-color-white);
  outline: none;
  font-feature-settings: 'tnum';
}

.bgz-filter-dropdown-date-input:focus {
  border-color: var(--bgz-color-brand-teal);
}

.bgz-filter-dropdown-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 12px;
  border-top: var(--bgz-border-w-hairline) solid var(--bgz-color-border);
  margin-top: 4px;
}

.bgz-filter-dropdown-date-section .bgz-filter-dropdown-actions {
  border-top: none;
  padding: 0;
  margin-top: 0;
}

.bgz-filter-dropdown-action-btn {
  font-family: var(--bgz-font-sans);
  font-size: var(--bgz-text-helper);
  font-weight: var(--bgz-weight-medium);
  color: var(--bgz-color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--bgz-radius-button);
}

.bgz-filter-dropdown-action-btn:hover {
  color: var(--bgz-color-text-primary);
}

.bgz-filter-dropdown-action-btn-primary {
  color: var(--bgz-color-brand-teal-deep);
}

.bgz-filter-dropdown-action-btn-primary:hover {
  color: var(--bgz-color-brand-teal);
  background: var(--bgz-color-brand-teal-light);
}


/* ── LIST VIEW (design doc 2.3) ──────────────────────────────────────────
   Single bordered card containing rows. Rows are separated by 0.5px
   hairlines (rendered via border-bottom on each row, suppressed on the
   last child). The list feels like one coherent surface rather than a
   stack of disconnected cards.
   ──────────────────────────────────────────────────────────────────────── */

.bgz-list-view {
  background: var(--bgz-color-white);
  border: var(--bgz-border-w-hairline) solid var(--bgz-color-border);
  border-radius: var(--bgz-radius-card);
  overflow: hidden;
}

.bgz-list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: var(--bgz-border-w-hairline) solid var(--bgz-color-border);
  cursor: pointer;
  background: var(--bgz-color-white);
  transition: background-color 0.15s ease;
}

.bgz-list-row:last-child {
  border-bottom: none;
}

.bgz-list-row:hover {
  background: var(--bgz-color-surface);
}

.bgz-list-row-thumb {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--bgz-radius-button);
  background: var(--bgz-color-surface-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: var(--bgz-font-sans);
  font-size: var(--bgz-text-helper);
  font-weight: var(--bgz-weight-medium);
  color: var(--bgz-color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bgz-list-row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bgz-list-row-body {
  flex: 1;
  min-width: 0;
}

.bgz-list-row-title-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.bgz-list-row-title {
  font-family: var(--bgz-font-sans);
  font-size: var(--bgz-text-card-title);
  font-weight: var(--bgz-weight-medium);
  letter-spacing: var(--bgz-tracking-card);
  color: var(--bgz-color-text-primary);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.bgz-list-row-meta {
  font-family: var(--bgz-font-sans);
  font-size: var(--bgz-text-meta);
  color: var(--bgz-color-text-muted);
  line-height: 1.35;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.bgz-list-row-meta-divider {
  color: var(--bgz-color-text-tertiary);
}

.bgz-list-row-meta a {
  color: var(--bgz-color-text-primary);
  text-decoration: none;
  font-weight: var(--bgz-weight-medium);
}

.bgz-list-row-meta a:hover {
  text-decoration: underline;
}

.bgz-list-row-meta-rating {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--bgz-color-text-muted);
  font-feature-settings: 'tnum';
}

.bgz-list-row-meta-rating-star {
  color: var(--bgz-color-star-filled);
}

.bgz-list-row-pay {
  flex-shrink: 0;
  text-align: right;
  font-family: var(--bgz-font-sans);
  font-feature-settings: 'tnum';
}

.bgz-list-row-pay-amount {
  font-size: var(--bgz-text-price-sm);
  font-weight: var(--bgz-weight-medium);
  letter-spacing: var(--bgz-tracking-price);
  color: var(--bgz-color-text-primary);
  line-height: 1;
}

.bgz-list-row-pay-sub {
  font-size: var(--bgz-text-helper);
  color: var(--bgz-color-text-tertiary);
  margin-top: 3px;
  line-height: 1;
}

.bgz-list-row-chevron {
  flex-shrink: 0;
  color: var(--bgz-color-text-tertiary);
  display: inline-flex;
  align-items: center;
}

.bgz-list-row-chevron svg {
  width: 14px;
  height: 14px;
}


/* ── PAGE PANEL (Commit 4, 2026-05-11) ───────────────────────────────────
   Contained-surface wrapper for page content. Used on gigs.html (and
   intended for dashboard.html and other product pages) to give the main
   content area a defined surface that holds cards and filters together,
   instead of letting them float directly on the body background.

   The panel uses a cooler #fafafa surface so it reads as a discrete
   workspace against the warm body off-white (#f4f3ef). 0.5px hairline
   border + small radius matches the card pattern's visual language so
   nested cards feel like they belong to the panel.

   At mobile widths the padding shrinks so the panel doesn't eat too
   much horizontal space.
   ──────────────────────────────────────────────────────────────────────── */

.bgz-page-panel {
  background: var(--bgz-color-surface);
  border: var(--bgz-border-w-hairline) solid var(--bgz-color-border);
  border-radius: 10px;
  padding: 16px 18px 18px;
}

@media (max-width: 768px) {
  .bgz-page-panel {
    padding: 12px 12px 14px;
    border-radius: 8px;
  }
}


/* ── GIG CARD PATTERN (Commit 3, 2026-05-11) ─────────────────────────────
   Discrete white cards on the page bg, replacing the flat list-view
   pattern for gigs. Each card is split into two zones by an internal
   hairline: top zone holds the primary data (thumb, title, meta, pay
   column); bottom zone holds a status row (state badge with dot, help
   text, trailing CTA). The whole card is clickable — the CTA is a
   visual cue, not a separate button. Hover lightly tints the card to
   indicate clickability.

   Page bg remains the brand off-white (--bgz-color-bg-page). Cards
   stand out via the 0.5px hairline border and slight warm/cool contrast
   between page and card surface.
   ──────────────────────────────────────────────────────────────────────── */

.bgz-gig-card-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bgz-gig-card {
  background: var(--bgz-color-white);
  border: var(--bgz-border-w-hairline) solid var(--bgz-color-border);
  border-radius: 7px;
  overflow: hidden;
  cursor: pointer;
  transition: background-color 0.1s ease;
}

.bgz-gig-card:hover {
  background: var(--bgz-color-surface-inset);
}

.bgz-gig-card-top {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 11px 14px;
}

.bgz-gig-card-bot {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 7px 14px;
  border-top: var(--bgz-border-w-hairline) solid var(--bgz-color-border);
}

.bgz-gig-card-thumb {
  width: 32px;
  height: 32px;
  border-radius: 5px;
  flex-shrink: 0;
  background: var(--bgz-color-surface-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--bgz-weight-medium);
  color: var(--bgz-color-text-muted);
  overflow: hidden;
}

.bgz-gig-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bgz-gig-card-thumb-flyer {
  cursor: zoom-in;
}

.bgz-gig-card-body {
  flex: 1;
  min-width: 0;
}

.bgz-gig-card-title {
  font-size: 14px;
  font-weight: var(--bgz-weight-medium);
  letter-spacing: -0.005em;
  line-height: 1.25;
  margin-bottom: 2px;
  color: var(--bgz-color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bgz-gig-card-meta {
  font-size: 11.5px;
  color: var(--bgz-color-text-muted);
  display: flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  overflow: hidden;
}

.bgz-gig-card-meta > * {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bgz-gig-card-meta a {
  color: inherit;
  text-decoration: none;
}

.bgz-gig-card-meta a:hover {
  color: var(--bgz-color-text-primary);
  text-decoration: underline;
}

.bgz-gig-card-meta-divider {
  margin: 0 6px;
  color: var(--bgz-color-text-tertiary);
  flex-shrink: 0;
}

.bgz-gig-card-pay {
  text-align: right;
  flex-shrink: 0;
  min-width: 88px;
}

.bgz-gig-card-pay-primary {
  font-size: 16px;
  font-weight: var(--bgz-weight-medium);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--bgz-color-text-primary);
  font-feature-settings: 'tnum';
}

.bgz-gig-card-pay-sub {
  font-size: 11px;
  color: var(--bgz-color-text-tertiary);
  margin-top: 3px;
}

.bgz-gig-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  background: var(--bgz-color-surface-accent);
  color: var(--bgz-color-text-secondary);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: var(--bgz-weight-regular);
  flex-shrink: 0;
}

.bgz-gig-card-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.bgz-gig-card-help {
  font-size: 11.5px;
  color: var(--bgz-color-text-muted);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bgz-gig-card-cta {
  font-size: 11.5px;
  color: var(--bgz-color-text-primary);
  font-weight: var(--bgz-weight-medium);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.bgz-gig-card-cta svg {
  width: 10px;
  height: 10px;
}


/* ── INLINE STATE BADGES — design doc 2.3 ────────────────────────────────
   Smaller and simpler than lifecycle pills. Used inline next to row
   titles in list views (Private, Applied). Dot + label format but with
   tighter padding for inline placement.
   ──────────────────────────────────────────────────────────────────────── */

.bgz-state-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-family: var(--bgz-font-sans);
  font-size: 10.5px;
  font-weight: var(--bgz-weight-medium);
  line-height: 1;
  padding: 3px 6px 3px 5px;
  border-radius: var(--bgz-radius-badge);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.bgz-state-badge::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: var(--bgz-radius-full);
  flex-shrink: 0;
}

.bgz-state-badge-private {
  background: var(--bgz-color-brand-teal-light);
  color: var(--bgz-color-brand-teal-deep);
}

.bgz-state-badge-private::before {
  background: var(--bgz-color-state-open-dot);
}

.bgz-state-badge-applied {
  background: var(--bgz-color-surface-accent);
  color: var(--bgz-color-text-secondary);
}

.bgz-state-badge-applied::before {
  background: var(--bgz-color-state-open-dot);
}


/* ── CENTERED EMPTY STATE ────────────────────────────────────────────────
   Used inside a .bgz-list-view (or in place of one) when there are no
   items to display. Includes optional action button below the sub-line.
   ──────────────────────────────────────────────────────────────────────── */

.bgz-empty-state-centered {
  text-align: center;
  padding: 60px 20px;
  background: var(--bgz-color-white);
  border: var(--bgz-border-w-hairline) solid var(--bgz-color-border);
  border-radius: var(--bgz-radius-card);
}

.bgz-empty-state-centered-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: var(--bgz-color-text-tertiary);
}

.bgz-empty-state-centered-icon svg {
  width: 28px;
  height: 28px;
}

.bgz-empty-state-centered-title {
  font-family: var(--bgz-font-sans);
  font-size: var(--bgz-text-card-title);
  font-weight: var(--bgz-weight-medium);
  color: var(--bgz-color-text-primary);
  margin-bottom: 4px;
  line-height: 1.3;
}

.bgz-empty-state-centered-sub {
  font-family: var(--bgz-font-sans);
  font-size: var(--bgz-text-meta);
  color: var(--bgz-color-text-muted);
  line-height: 1.4;
  margin-bottom: 12px;
}

.bgz-empty-state-centered-action {
  font-family: var(--bgz-font-sans);
  font-size: var(--bgz-text-meta);
  font-weight: var(--bgz-weight-medium);
  color: var(--bgz-color-text-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bgz-empty-state-centered-action:hover {
  color: var(--bgz-color-brand-teal-deep);
}


/* ═══════════════════════════════════════════════════════════════════════
   End of styles.css
   ═══════════════════════════════════════════════════════════════════════ */