/* ============================================================
   SettlementRadar — Phase 3A: Bloomberg Terminal Browse Page
   Replaces blue (#00B37D) with emerald (#00B37D)
   Sidebar filter panel on desktop
   ============================================================ */

/* ── Google Fonts for Bloomberg aesthetic ── */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&display=swap');

/* ── Phase 3A Design Tokens ── */
:root {
  --sr3a-emerald: #00B37D;
  --sr3a-emerald-hover: #009669;
  --sr3a-emerald-light: #E6F9F3;
  --sr3a-emerald-border: #6EE7C0;
  --sr3a-navy: #0A0F1E;
  --sr3a-sidebar-w: 264px;
  --sr3a-header-h: 64px;
}

/* ============================================================
   H1 + HERO OVERRIDES — Bloomberg header style
   ============================================================ */
.dir-h1 {
  font-family: 'Syne', 'Inter', -apple-system, sans-serif !important;
  font-size: clamp(1.75rem, 4vw, 3rem) !important;
  font-weight: 800 !important;
  color: var(--sr3a-navy) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.1 !important;
}

/* Override the hero stats to use emerald */
.dir-hero-stat-num {
  color: var(--sr3a-emerald) !important;
}

/* Hero CTA buttons — emerald */
.dir-cta-primary {
  background: var(--sr3a-emerald) !important;
  box-shadow: 0 2px 12px rgba(0,179,125,0.22) !important;
}
.dir-cta-primary:hover {
  background: var(--sr3a-emerald-hover) !important;
  box-shadow: 0 4px 20px rgba(0,179,125,0.3) !important;
}

/* Hero search button — emerald */
.dir-hero-search-btn {
  background: var(--sr3a-emerald) !important;
}
.dir-hero-search-btn:hover {
  background: var(--sr3a-emerald-hover) !important;
}
.dir-hero-search-wrap:focus-within {
  border-color: var(--sr3a-emerald) !important;
  box-shadow: 0 0 0 3px rgba(0,179,125,0.1), 0 2px 8px rgba(0,0,0,0.06) !important;
}

/* Category quick pills hover */
.dir-hero-cat-pill:hover {
  border-color: var(--sr3a-emerald) !important;
  color: var(--sr3a-emerald) !important;
  background: var(--sr3a-emerald-light) !important;
}

/* ============================================================
   CATEGORY NAV — Emerald active state
   ============================================================ */
.dir-cat-pill.active {
  color: var(--sr3a-emerald) !important;
  border-bottom-color: var(--sr3a-emerald) !important;
}
.dir-cat-pill:hover {
  color: var(--sr3a-navy) !important;
  border-bottom-color: rgba(0,179,125,0.3) !important;
}

/* ============================================================
   CATEGORY NAV IN SIDEBAR (desktop) — vertical pill list
   ============================================================ */
@media (min-width: 1024px) {
  /* When cat nav is moved into sidebar by JS, override its layout */
  .sr3a-sidebar-catsnav {
    position: static !important;
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    width: 100% !important;
  }

  .sr3a-sidebar-catsnav .dir-cat-inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 1.25rem !important;
    max-width: none !important;
  }

  .sr3a-sidebar-catsnav .dir-cat-label {
    display: none !important; /* hidden — using the JS-injected label instead */
  }

  .sr3a-sidebar-catsnav .dir-cat-pills {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.15rem !important;
    overflow: hidden !important;
    padding: 0.25rem 0 0.75rem !important;
  }

  .sr3a-sidebar-catsnav .dir-cat-pill {
    width: 100% !important;
    text-align: left !important;
    border: none !important;
    border-bottom: none !important;
    border-radius: 5px !important;
    padding: 0.35rem 0.6rem !important;
    font-size: 0.8rem !important;
    color: #374151 !important;
    background: transparent !important;
    font-weight: 500 !important;
  }
  .sr3a-sidebar-catsnav .dir-cat-pill.active {
    background: var(--sr3a-emerald) !important;
    color: #fff !important;
    border: none !important;
  }
  .sr3a-sidebar-catsnav .dir-cat-pill:hover:not(.active) {
    background: var(--sr3a-emerald-light) !important;
    color: var(--sr3a-emerald) !important;
  }

  /* Hide original cat nav container styles that sticky-position it */
  .dir-cat-nav {
    position: static !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    z-index: auto !important;
  }
}

/* ============================================================
   BLOOMBERG SIDEBAR LAYOUT (desktop ≥1024px)
   Filter panel becomes fixed left sidebar
   ============================================================ */

@media (min-width: 1024px) {
  /* Fix the filter panel as a left sidebar */
  #sr-filter-panel {
    position: fixed !important;
    left: 0 !important;
    top: var(--sr3a-header-h) !important;
    bottom: 0 !important;
    width: var(--sr3a-sidebar-w) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 39 !important;
    background: #fff !important;
    border-right: 1px solid #E5E7EB !important;
    border-bottom: none !important;
    padding: 0 !important;
    box-shadow: 2px 0 8px rgba(10,15,30,0.04) !important;
    /* Scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
  }
  #sr-filter-panel::-webkit-scrollbar { width: 4px; }
  #sr-filter-panel::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 2px; }

  /* ALL direct children of the page container shift right for the sidebar.
     This includes hero, trust ticker, category sections, and grid area. */
  main.dir-page > * {
    margin-left: var(--sr3a-sidebar-w) !important;
    box-sizing: border-box;
  }

  /* EXCEPTIONS: the sidebar itself + fixed/absolute overlays don't get margin */
  main.dir-page > #sr-filter-panel,
  main.dir-page > #sr-fetch-bar,
  main.dir-page > #dir-drawer-overlay,
  main.dir-page > #dir-drawer,
  main.dir-page > #sr-cmp-bar,
  main.dir-page > #sr-cmp-modal,
  main.dir-page > #srSaveModal,
  main.dir-page > [style*="position:fixed"] {
    margin-left: 0 !important;
  }

  /* Filter toolbar becomes vertical in sidebar */
  .dir-filter-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  /* Sidebar header — Bloomberg style */
  .dir-filter-toolbar::before {
    content: 'FILTERS';
    display: block;
    font-family: 'Syne', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #9CA3AF;
    padding: 1rem 1.25rem 0.5rem;
    border-bottom: 1px solid #F3F4F6;
    margin-bottom: 0.5rem;
  }

  /* Result count inside sidebar */
  .dir-result-count {
    order: -10 !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: var(--sr3a-navy) !important;
    padding: 0.75rem 1.25rem 0 !important;
    border-bottom: none !important;
  }
  .dir-result-count .num {
    color: var(--sr3a-emerald) !important;
    font-size: 1.4rem !important;
    font-variant-numeric: tabular-nums;
  }

  /* No Proof quick toggle */
  #sr-noproof-quick {
    margin: 0.5rem 1.25rem !important;
    width: calc(100% - 2.5rem) !important;
    justify-content: center !important;
    border-color: var(--sr3a-emerald-border) !important;
    color: #166534 !important;
    background: var(--sr3a-emerald-light) !important;
  }
  #sr-noproof-quick.active {
    background: var(--sr3a-emerald) !important;
    border-color: var(--sr3a-emerald) !important;
    color: #fff !important;
  }
  #sr-noproof-quick:hover {
    background: #bbf7d0 !important;
    border-color: var(--sr3a-emerald) !important;
  }

  /* Search input — full width in sidebar */
  .dir-search {
    max-width: none !important;
    width: calc(100% - 2.5rem) !important;
    margin: 0 1.25rem 0.5rem !important;
    flex: none !important;
    min-width: 0 !important;
  }
  .dir-search input {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .dir-search input:focus {
    border-color: var(--sr3a-emerald) !important;
    box-shadow: 0 0 0 3px rgba(0,179,125,0.1) !important;
  }

  /* Sort group — vertical in sidebar */
  .dir-sort-group {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 1.25rem 0.5rem !important;
    gap: 0.2rem !important;
  }
  .dir-sort-label {
    font-family: 'Syne', sans-serif !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.1em !important;
    color: #9CA3AF !important;
    text-transform: uppercase !important;
    padding: 0.5rem 0 0.25rem !important;
  }
  .dir-sort-btn {
    width: 100% !important;
    justify-content: flex-start !important;
    padding: 0.4rem 0.65rem !important;
    border-radius: 6px !important;
    font-size: 0.82rem !important;
  }
  .dir-sort-btn.active {
    background: var(--sr3a-emerald) !important;
    color: #fff !important;
    border-color: var(--sr3a-emerald) !important;
  }
  .dir-sort-btn:hover {
    color: var(--sr3a-emerald) !important;
    border-color: var(--sr3a-emerald) !important;
  }

  /* Filters toggle — hide in sidebar (always expanded) */
  #sr-filter-toggle {
    display: none !important;
  }

  /* View toggle — put it in sidebar */
  #sr-view-toggle {
    padding: 0 1.25rem 0.75rem !important;
    flex-direction: column !important;
    gap: 0.2rem !important;
  }
  #sr-view-toggle .dir-sort-label,
  #sr-view-toggle::before {
    content: 'VIEW';
    display: block;
    font-family: 'Syne', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #9CA3AF;
    text-transform: uppercase;
    padding: 0.25rem 0 0.25rem;
  }
  .dir-view-btn {
    width: 100% !important;
    justify-content: flex-start !important;
    border-radius: 6px !important;
    font-size: 0.82rem !important;
  }
  .dir-view-btn.active {
    background: var(--sr3a-emerald-light) !important;
    color: var(--sr3a-emerald) !important;
    border-color: var(--sr3a-emerald-border) !important;
  }

  /* Clear all button */
  #sr-clear-btn {
    margin: 0 1.25rem 0.5rem !important;
    width: calc(100% - 2.5rem) !important;
    justify-content: center !important;
  }

  /* Filter row — ALWAYS visible in sidebar */
  #sr-filter-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    border-top: none !important;
    padding: 0 !important;
  }

  /* Filter groups in sidebar — vertical sections */
  .dir-filter-row .dir-filter-group {
    padding: 0.6rem 1.25rem !important;
    border-bottom: 1px solid #F3F4F6 !important;
    gap: 0.4rem !important;
  }

  /* Filter section labels — Bloomberg style */
  .dir-filter-label {
    font-family: 'Syne', sans-serif !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    color: #9CA3AF !important;
    text-transform: uppercase !important;
  }

  /* Filter chip buttons — vertical stack */
  .dir-filter-row .dir-filter-group > div {
    flex-direction: column !important;
    gap: 0.2rem !important;
  }
  .dir-chip {
    width: 100% !important;
    justify-content: flex-start !important;
    font-size: 0.8rem !important;
    padding: 0.35rem 0.6rem !important;
    border-radius: 5px !important;
    min-height: 32px !important;
    border-color: transparent !important;
    background: transparent !important;
    color: #374151 !important;
  }
  .dir-chip:hover {
    background: var(--sr3a-emerald-light) !important;
    color: var(--sr3a-emerald) !important;
    border-color: var(--sr3a-emerald-border) !important;
  }
  .dir-chip.active {
    background: var(--sr3a-emerald) !important;
    color: #fff !important;
    border-color: var(--sr3a-emerald) !important;
  }
  .dir-chip--noproof:hover {
    background: var(--sr3a-emerald-light) !important;
    border-color: var(--sr3a-emerald) !important;
    color: var(--sr3a-emerald) !important;
  }
  .dir-chip--noproof.active {
    background: var(--sr3a-emerald) !important;
    color: #fff !important;
    border-color: var(--sr3a-emerald) !important;
  }

  /* Active filter tags */
  #sr-active-tags {
    padding: 0 1.25rem 0.5rem !important;
    display: flex !important;
    flex-wrap: wrap !important;
  }
  .dir-active-tag {
    background: var(--sr3a-emerald-light) !important;
    border-color: var(--sr3a-emerald-border) !important;
    color: #166534 !important;
  }
  .dir-active-tag:hover {
    background: #bbf7d0 !important;
    color: #14532d !important;
  }

  /* Sidebar footer / eligibility CTA */
  #sr-filter-panel::after {
    content: '';
    display: block;
    height: 1rem;
  }
}

/* ============================================================
   MAIN GRID SECTION — Bloomberg data grid
   ============================================================ */
.sr3a-grid-section {
  background: #FAFAFA !important;
  padding: 2rem 1.5rem 4rem !important;
}

/* Grid: 3 columns on desktop */
#sr-grid.dir-grid {
  grid-template-columns: repeat(3, 1fr) !important;
}
@media (max-width: 1280px) {
  #sr-grid.dir-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 768px) {
  #sr-grid.dir-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Card hover — Bloomberg data card feel */
.dir-card {
  border-color: #E5E7EB !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}
.dir-card:hover {
  transform: translateY(-3px) scale(1.015) !important;
  box-shadow: 0 8px 24px rgba(10,15,30,0.1), 0 2px 8px rgba(10,15,30,0.06) !important;
  border-color: var(--sr3a-emerald-border) !important;
}

/* Card CTA link color → emerald */
.dir-card-cta {
  color: var(--sr3a-emerald) !important;
}
.dir-card:hover .dir-card-cta {
  color: var(--sr3a-emerald-hover) !important;
}
.dir-card:hover .dir-card-title {
  color: var(--sr3a-navy) !important;
}

/* ============================================================
   COLOR OVERRIDES — Replace all blues with emerald
   ============================================================ */

/* --primary and var(--primary) overrides */
.dir-page {
  --primary: var(--sr3a-emerald);
  --primary-dark: var(--sr3a-emerald-hover);
  --sr-green-50: var(--sr3a-emerald-light);
  --sr-green-800: #166534;
  --dir-green: var(--sr3a-emerald);
  --dir-green-dark: var(--sr3a-emerald-hover);
  --dir-green-light: var(--sr3a-emerald-light);
}

/* Loading bar → emerald */
#sr-fetch-bar-inner {
  background: linear-gradient(90deg, var(--sr3a-emerald), #6EE7C0) !important;
  box-shadow: 0 0 6px rgba(0,179,125,0.5) !important;
}

/* Sort active buttons */
.dir-sort-btn.active,
.sr-sort-btn.active {
  background: var(--sr3a-emerald) !important;
  border-color: var(--sr3a-emerald) !important;
  color: #fff !important;
}
.dir-sort-btn:hover,
.sr-sort-btn:hover {
  border-color: var(--sr3a-emerald) !important;
  color: var(--sr3a-emerald) !important;
}

/* View toggle active */
.dir-view-btn.active,
.sr-view-btn.active {
  background: var(--sr3a-emerald-light) !important;
  color: var(--sr3a-emerald) !important;
  border-color: var(--sr3a-emerald-border) !important;
}

/* Category nav active pill */
.dir-cat-pill.active {
  color: var(--sr3a-emerald) !important;
  border-bottom-color: var(--sr3a-emerald) !important;
}

/* Pagination active */
.dir-page-btn.active {
  background: var(--sr3a-emerald) !important;
  border-color: var(--sr3a-emerald) !important;
}
.dir-page-btn:hover {
  border-color: var(--sr3a-emerald) !important;
  color: var(--sr3a-emerald) !important;
}

/* Empty state buttons */
.sr-empty-btn-primary,
.dir-empty-btn {
  background: var(--sr3a-emerald) !important;
}
.sr-empty-btn-primary:hover,
.dir-empty-btn:hover {
  background: var(--sr3a-emerald-hover) !important;
}
.sr-empty-btn-ghost:hover {
  border-color: var(--sr3a-emerald) !important;
  color: var(--sr3a-emerald) !important;
  background: var(--sr3a-emerald-light) !important;
}
.sr-empty-cat:hover {
  border-color: var(--sr3a-emerald) !important;
  color: var(--sr3a-emerald) !important;
  background: var(--sr3a-emerald-light) !important;
}

/* Table view — emerald accents */
#sr-table-wrap th.sorted-asc::after,
#sr-table-wrap th.sorted-desc::after {
  color: var(--sr3a-emerald) !important;
}
#sr-table-wrap tbody tr:hover td {
  background: var(--sr3a-emerald-light) !important;
}
#sr-table-wrap .t-file {
  background: var(--sr3a-emerald) !important;
}
#sr-table-wrap .t-file:hover {
  background: var(--sr3a-emerald-hover) !important;
}
#sr-table-wrap .t-difficulty-easy {
  color: var(--sr3a-emerald) !important;
}
#sr-table-wrap .t-proof-no {
  background: var(--sr3a-emerald-light) !important;
  color: #166534 !important;
  border-color: var(--sr3a-emerald-border) !important;
}
#sr-table-wrap .t-payout {
  color: var(--sr3a-emerald) !important;
}

/* Sr2 badges — emerald */
.sr2-noproof-badge {
  background: var(--sr3a-emerald-light) !important;
  color: #166534 !important;
  border: 1px solid var(--sr3a-emerald-border) !important;
}

/* File claim CTA button */
.sr2-file-claim-btn {
  background: var(--sr3a-emerald) !important;
  color: #fff !important;
  border-color: var(--sr3a-emerald) !important;
  display: block;
  text-align: center;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  margin-top: 0.5rem;
}

/* Upvote/save buttons — emerald hover */
.dir-upvote-btn:hover,
.sr-upvote-btn:hover {
  border-color: var(--sr3a-emerald) !important;
  color: var(--sr3a-emerald) !important;
  background: var(--sr3a-emerald-light) !important;
}
.dir-upvote-btn.voted,
.sr-upvote-btn.voted {
  background: var(--sr3a-emerald-light) !important;
  border-color: var(--sr3a-emerald-border) !important;
  color: var(--sr3a-emerald) !important;
}
.dir-save-btn:hover,
.sr-save-btn:hover {
  border-color: var(--sr3a-emerald) !important;
  color: var(--sr3a-emerald) !important;
  background: var(--sr3a-emerald-light) !important;
}
.dir-save-btn.saved,
.sr-save-btn.saved {
  background: var(--sr3a-emerald-light) !important;
  border-color: var(--sr3a-emerald-border) !important;
  color: var(--sr3a-emerald) !important;
}

/* Compare button — emerald */
.dir-cmp-btn:hover {
  border-color: var(--sr3a-emerald) !important;
  color: var(--sr3a-emerald) !important;
}
.dir-cmp-btn.cmp-on {
  background: var(--sr3a-emerald-light) !important;
  border-color: var(--sr3a-emerald-border) !important;
  color: var(--sr3a-emerald) !important;
}

/* Stat deadline color */
.dir-stat-payout {
  color: var(--sr3a-emerald) !important;
}

/* ============================================================
   DEADLINE BADGE COLORS (green/yellow/red — preserve as is)
   ============================================================ */
.ue-badge-open { color: #166534 !important; }
.ue-badge-act-now { color: #92400e !important; }
.ue-badge-closing { color: #9A3412 !important; }
.ue-badge-urgent { color: #DC2626 !important; }

/* ============================================================
   MOBILE — Keep existing filter bar behavior on mobile
   ============================================================ */
@media (max-width: 1023px) {
  /* On mobile, filter bar stays at top as normal sticky bar */
  #sr-filter-panel {
    position: sticky !important;
    width: 100% !important;
    height: auto !important;
    border-right: none !important;
    border-bottom: 1px solid #E5E7EB !important;
    overflow: visible !important;
    box-shadow: none !important;
  }
  /* On mobile: no left margin offset for any content */
  main.dir-page > * {
    margin-left: 0 !important;
  }
  .dir-filter-toolbar {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
  .dir-filter-toolbar::before {
    display: none !important;
  }
  #sr-filter-row {
    /* Keep mobile behavior unchanged */
    flex-direction: row !important;
  }
  #sr-view-toggle {
    flex-direction: row !important;
    padding: 0 !important;
    gap: 0.25rem !important;
  }
  #sr-view-toggle::before {
    display: none !important;
  }
  .dir-sort-group {
    flex-direction: row !important;
    padding: 0 !important;
  }
  .dir-sort-label {
    font-size: 0.78rem !important;
    letter-spacing: 0 !important;
  }
  .dir-chip {
    width: auto !important;
    justify-content: center !important;
  }
  .dir-view-btn,
  .dir-sort-btn {
    width: auto !important;
    justify-content: center !important;
  }
  .dir-search {
    margin: 0 !important;
    width: auto !important;
    flex: 1 !important;
    max-width: 260px !important;
    min-width: 140px !important;
  }
  #sr-noproof-quick {
    margin: 0 !important;
    width: auto !important;
  }
  #sr-clear-btn {
    margin: 0 !important;
    width: auto !important;
  }
  #sr-filter-row .dir-filter-group > div {
    flex-direction: row !important;
  }
  .dir-filter-row {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    padding: 0.6rem 1.5rem 0.75rem !important;
  }
}

/* ============================================================
   FILTER MOBILE TOGGLE — Mobile-only collapsible
   ============================================================ */
@media (max-width: 1023px) {
  #sr-filter-toggle {
    display: inline-flex !important;
  }
  #sr-filter-row[style*="display: none"],
  #sr-filter-row[style*="display:none"] {
    display: none !important;
  }
}

/* ============================================================
   GRID SECTION WRAPPER STYLING
   ============================================================ */
.sr3a-grid-section {
  min-height: 400px;
}

/* Bloomberg-style result count bar above grid */
.sr3a-result-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0 1.25rem;
  border-bottom: 2px solid #E5E7EB;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.sr3a-result-bar-count {
  font-family: 'Syne', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--sr3a-navy);
  letter-spacing: -0.01em;
}
.sr3a-result-bar-count em {
  font-style: normal;
  color: var(--sr3a-emerald);
  font-size: 1.1rem;
}

/* ============================================================
   DRAWER (mobile filter) — Emerald accents
   ============================================================ */
.dir-drawer-done {
  background: var(--sr3a-emerald) !important;
  color: #fff !important;
  border-color: var(--sr3a-emerald) !important;
}
.dir-drawer-done:hover {
  background: var(--sr3a-emerald-hover) !important;
}
.sr-drawer-sort.active,
.sr-drawer-proof.active,
.sr-drawer-days.active,
.sr-drawer-payout.active,
.sr-drawer-difficulty.active {
  background: var(--sr3a-emerald) !important;
  color: #fff !important;
  border-color: var(--sr3a-emerald) !important;
}

/* ============================================================
   STAT SECTION & INLINE EMAIL CAPTURE — Emerald
   ============================================================ */
.dir-h1 .count {
  color: var(--sr3a-emerald) !important;
}
.dir-noproof-banner {
  border-color: var(--sr3a-emerald-border) !important;
  background: linear-gradient(135deg, var(--sr3a-emerald-light) 0%, #bbf7d0 100%) !important;
}
.dir-noproof-banner-link {
  background: var(--sr3a-emerald) !important;
}
.dir-noproof-banner-link:hover {
  background: var(--sr3a-emerald-hover) !important;
}

/* ============================================================
   COMPARISON BAR — Emerald
   ============================================================ */
#sr-cmp-bar {
  border-top-color: var(--sr3a-emerald) !important;
}
.cmp-bar-go {
  background: var(--sr3a-emerald) !important;
  border-color: var(--sr3a-emerald) !important;
}
.cmp-bar-go:hover {
  background: var(--sr3a-emerald-hover) !important;
}

/* ============================================================
   PRO CTA INLINE — Emerald border
   ============================================================ */
.sr2-pro-cta-btn {
  background: var(--sr3a-emerald) !important;
}
.sr2-pro-cta-btn:hover {
  background: var(--sr3a-emerald-hover) !important;
}

/* ============================================================
   SECTION BACKGROUNDS — White throughout
   ============================================================ */
.dir-browse-cats {
  background: #FFFFFF !important;
}
.dir-browse-cats-inner h2 {
  font-family: 'Syne', sans-serif;
  color: var(--sr3a-navy);
}
.dir-browse-cats-inner h2 a {
  color: var(--sr3a-emerald) !important;
  border-color: var(--sr3a-emerald-border) !important;
  background: var(--sr3a-emerald-light) !important;
}

/* ============================================================
   FRESHNESS BADGE — Keep emerald green
   ============================================================ */
.dir-freshness-badge {
  background: var(--sr3a-emerald-light) !important;
  border-color: var(--sr3a-emerald-border) !important;
  color: #166534 !important;
}

/* ============================================================
   BLOOMBERG STATS TICKER — Override trust ticker
   ============================================================ */
.sr-trust-ticker {
  background: #F9FAFB !important;
  border-color: #E5E7EB !important;
}

/* ============================================================
   MOBILE FILTER TOGGLE — Bloomberg style
   ============================================================ */
@media (max-width: 1023px) {
  #sr-filter-toggle {
    background: #FFFFFF !important;
    color: var(--sr3a-navy) !important;
    border-color: var(--sr3a-emerald) !important;
    font-size: 0.82rem !important;
  }
  #sr-filter-toggle:hover {
    background: #FFFFFF !important;
  }
  .dir-filter-badge {
    background: var(--sr3a-emerald) !important;
  }
}

/* ============================================================
   BLOOMBERG DATA GRID REFINEMENTS
   ============================================================ */

/* Card category badge — emerald outline */
.sr2-category-badge {
  background: var(--sr3a-emerald-light) !important;
  color: #166534 !important;
  border: 1px solid var(--sr3a-emerald-border) !important;
  border-radius: 3px !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

/* Payout display — emerald */
.sr2-payout {
  color: var(--sr3a-emerald) !important;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
}
.sr2-payout-label {
  color: #9CA3AF !important;
  font-size: 0.7rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

/* Card title — navy */
.sr2-title,
.dir-card-title {
  color: var(--sr3a-navy) !important;
  font-weight: 700 !important;
}

/* Company name — muted */
.sr2-company-name,
.dir-card-company {
  color: #6B7280 !important;
}

/* ============================================================
   PRO UPSELL SECTION — Override blue with emerald
   ============================================================ */
#sr-pro-upsell-section a[href*="checkout"] {
  background: var(--sr3a-emerald) !important;
  box-shadow: 0 2px 10px rgba(0,179,125,0.25) !important;
  border-color: var(--sr3a-emerald) !important;
}
#sr-pro-upsell-section div[style*="border:1.5px solid rgba(59,130,246"] {
  border-color: rgba(0,179,125,0.2) !important;
}
#sr-pro-upsell-section div[style*="border:2px solid #00B37D"] {
  border-color: var(--sr3a-emerald) !important;
  background: linear-gradient(135deg, var(--sr3a-emerald-light) 0%, #bbf7d0 100%) !important;
}
#sr-pro-upsell-section div[style*="background:#00B37D"],
#sr-pro-upsell-section span[style*="color:#00B37D"],
#sr-pro-upsell-section div[style*="color:#00B37D"] {
  background: var(--sr3a-emerald) !important;
  color: #fff !important;
}

/* Inline email capture — emerald */
#settlementsInlineCapture button[type="submit"] {
  background: var(--sr3a-emerald) !important;
}
#settlementsInlineCapture button[type="submit"]:hover {
  background: var(--sr3a-emerald-hover) !important;
}
#settlementsInlineCapture input[type="email"]:focus {
  border-color: var(--sr3a-emerald) !important;
}

/* Post search capture — emerald */
#postSearchCapture button[type="submit"] {
  background: var(--sr3a-emerald) !important;
}

/* Recommended for you section — emerald */
#srDirRecSection a[style*="background:#fff"]:hover {
  border-color: var(--sr3a-emerald) !important;
  box-shadow: 0 2px 12px rgba(0,179,125,0.12) !important;
}

/* ============================================================
   BLOOMBERG PAGINATION
   ============================================================ */
#sr-pagination {
  border-top: 1px solid #E5E7EB;
  padding-top: 1.5rem !important;
  margin-top: 1rem;
}

/* ============================================================
   FORCE WHITE BACKGROUNDS on grid section
   ============================================================ */
.sr3a-grid-section {
  background: #FFFFFF !important;
  padding: 2rem 1.5rem 4rem !important;
}
.sr3a-grid-section > div {
  background: transparent !important;
}