/* ============================================================================
   TCC REDESIGN — LEGACY ADAPTER / THEME LAYER
   Loaded LAST (after tcc-tailwind.css). Restyles the existing Bootstrap +
   legacy app component classes to the Stitch "Financial Sophistication" look,
   TCC-branded — WITHOUT touching any view markup or JS. Safe, site-wide uplift.

   Targets only legacy class names (never .tw-* / .tcc-*), so redesigned pages
   that use the new utilities/components are unaffected.
   ========================================================================== */

/* ---- Typography rhythm ----------------------------------------------------- */
/* NOTE: do NOT force a heading color — headings must inherit their context so
   they stay light on dark sections (footer, hero) and dark on light pages. */
h1, h2, h3, h4, h5, h6 { font-family: var(--ds-font); }
h1, .h1 { letter-spacing: -0.02em; }
h2, .h2, h3, .h3 { letter-spacing: -0.01em; }

/* ---- Selection ------------------------------------------------------------- */
::selection { background: rgb(var(--c-primary) / .12); color: var(--ds-primary); }

/* ---- Slim scrollbars (Stitch-clean) --------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--ds-border-strong) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--ds-border-strong); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: var(--ds-muted); }

/* ---- Bootstrap buttons (cosmetic base; recolor via BS5 vars + fallback) ---- */
.btn { font-family: var(--ds-font); font-weight: 600; border-radius: var(--ds-radius-sm); transition: var(--ds-transition); }
.btn-primary {
  --bs-btn-bg: var(--ds-primary); --bs-btn-border-color: var(--ds-primary);
  --bs-btn-hover-bg: var(--ds-primary-700); --bs-btn-hover-border-color: var(--ds-primary-700);
  --bs-btn-active-bg: var(--ds-primary-700); --bs-btn-active-border-color: var(--ds-primary-700);
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff;
}
.btn-outline-primary {
  --bs-btn-color: var(--ds-primary); --bs-btn-border-color: var(--ds-border);
  --bs-btn-hover-bg: var(--ds-surface-muted); --bs-btn-hover-color: var(--ds-primary); --bs-btn-hover-border-color: var(--ds-border-strong);
}
.btn-warning {
  --bs-btn-bg: var(--ds-cta); --bs-btn-border-color: var(--ds-cta);
  --bs-btn-hover-bg: var(--ds-cta-700); --bs-btn-hover-border-color: var(--ds-cta-700);
  --bs-btn-color: var(--ds-on-cta); --bs-btn-hover-color: var(--ds-on-cta);
}

/* ---- Legacy app buttons --------------------------------------------------- */
.blue_btn { background: var(--ds-primary) !important; border-radius: var(--ds-radius-sm); font-weight: 600; }
.blue_btn:hover { background: var(--ds-primary-700) !important; }
.start-free-link, .btn-signup_bottom { background: #ffc107 !important; color: #051c38 !important; border-radius: 6px; font-weight: 600; }
.start-free-link:hover, .btn-signup_bottom:hover { background: #e0a800 !important; color: #051c38 !important; }

/* ---- Cards (Bootstrap + legacy) ------------------------------------------- */
.card {
  border: 1px solid var(--ds-border); border-radius: var(--ds-radius);
  box-shadow: none; background: var(--ds-surface-card);
}
.card-border-box {
  border: 1px solid var(--ds-border) !important; border-radius: var(--ds-radius) !important;
  background: var(--ds-surface-card);
}

/* ---- Form controls -------------------------------------------------------- */
.form-control, .form-select {
  font-family: var(--ds-font); color: var(--ds-ink);
  border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm);
  transition: var(--ds-transition);
}
.form-control:focus, .form-select:focus {
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 3px rgb(var(--c-primary) / .10);
}
.form-control::placeholder { color: var(--ds-faint); }
.form-label { font-weight: 600; color: var(--ds-ink-soft); }

/* ---- Tables (Bootstrap) — clean Stitch dividers --------------------------- */
.table { color: var(--ds-ink-soft); --bs-table-hover-bg: var(--ds-surface-page); border-color: var(--ds-border); }
.table > thead { background: var(--ds-surface-muted); }
.table > thead th {
  color: var(--ds-muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 1px solid var(--ds-border); white-space: nowrap;
}
.table > :not(caption) > * > * { border-bottom-color: var(--ds-border); }

/* ---- Tabs (Bootstrap nav-tabs) -------------------------------------------- */
.nav-tabs { border-bottom: 1px solid var(--ds-border); }
.nav-tabs .nav-link {
  color: var(--ds-muted); font-weight: 600; border: 0; border-bottom: 2px solid transparent; background: transparent;
}
.nav-tabs .nav-link:hover { color: var(--ds-primary); border-color: transparent; }
.nav-tabs .nav-link.active {
  color: var(--ds-primary); background: transparent; border: 0; border-bottom: 2px solid var(--ds-primary);
}

/* ---- Pagination ----------------------------------------------------------- */
.pagination { --bs-pagination-color: var(--ds-ink-soft); --bs-pagination-active-bg: var(--ds-primary); --bs-pagination-active-border-color: var(--ds-primary); --bs-pagination-hover-bg: var(--ds-surface-muted); --bs-pagination-border-color: var(--ds-border); --bs-pagination-focus-box-shadow: 0 0 0 3px rgb(var(--c-primary) / .10); }
.page-link { font-weight: 600; }

/* ---- Badges --------------------------------------------------------------- */
.badge.bg-primary { background-color: var(--ds-primary) !important; }
.badge.bg-success { background-color: var(--ds-positive) !important; }
.badge.bg-warning { background-color: var(--ds-cta) !important; color: var(--ds-on-cta) !important; }
.badge.bg-danger { background-color: var(--ds-negative) !important; }

/* ---- Modals & dropdowns (Bootstrap) --------------------------------------- */
.modal-content { border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-pop); }
.modal-header, .modal-footer { border-color: var(--ds-border); }

/* ---- Breadcrumb (Bootstrap) ----------------------------------------------- */
.breadcrumb { font-size: 12px; }
.breadcrumb-item, .breadcrumb-item a { color: var(--ds-muted); text-decoration: none; }
.breadcrumb-item.active { color: var(--ds-primary); }

/* ---- Links inside content (consistent accent on hover) -------------------- */
a:hover { color: var(--ds-accent-alt); }

/* ============================================================================
   HOME PAGE (Views/Home/Index.cshtml) — Stitch typographic + section polish.
   Targets existing homepage classes only; search form & JS hooks untouched.
   ========================================================================== */
#headline { font-weight: 700 !important; letter-spacing: -0.02em; }
#description { letter-spacing: 0; }

/* Hero "Start for Free" → premium yellow CTA */
.hero-techfog__cta .btn--primary {
  background: var(--ds-cta) !important; color: var(--ds-on-cta) !important;
  border: 0 !important; border-radius: var(--ds-radius-sm) !important; font-weight: 700 !important;
  box-shadow: 0 6px 16px rgb(var(--c-cta) / .25);
}
.hero-techfog__cta .btn--primary:hover { background: var(--ds-cta-700) !important; color: var(--ds-on-cta) !important; }

/* Section eyebrow / kicker accent (trending sectors, geo, etc.) */
.secx-kicker, .geos-kicker { color: var(--ds-accent) !important; font-weight: 700; }
.secx-title, .geos-title { letter-spacing: -0.01em; }

/* Light content sections: ensure crisp white cards on the page canvas */
.bg-workflow-section, .bg-databases-section { background: var(--ds-surface-page) !important; }

/* Trending-sector tabs + segment cards → token surfaces/borders */
.secx-seg, .geos-card, .secx-panel {
  background: var(--ds-surface-card); border: 1px solid var(--ds-border); border-radius: var(--ds-radius);
}
.secx-seg:hover { box-shadow: var(--ds-shadow-ambient); border-color: var(--ds-border-strong); }

/* ============================================================================
   INTERIOR PAGES (company / search / directors / legal) — cosmetic-only theming.
   Targets existing classes with color/border/radius/type ONLY (never display,
   position, width, float) so collapse/JS behavior and layout are untouched.
   ========================================================================== */
/* Advanced-search filter sidebar */
.adv-search-sidebar, .filters_scroll_div {
  background: var(--ds-surface-card); border: 1px solid var(--ds-border); border-radius: var(--ds-radius);
}
.advance-menu-btn { color: var(--ds-ink); font-weight: 600; border-radius: var(--ds-radius-sm); transition: var(--ds-transition); }
.advance-menu-btn:hover { background: var(--ds-surface-muted); }
.advance-menu-btn.active { color: var(--ds-primary); background: var(--ds-surface-muted); }
.advance-menu-btn h4 { font-weight: 600; color: inherit; }
.sidebar-title-section { color: var(--ds-ink); font-weight: 700; }
.advance-filter-dropdown .panel-body label { color: var(--ds-ink-soft); font-weight: 500; }
/* Filter chips/tags */
.fiter_tags li {
  background: rgb(var(--c-accent) / .08); color: var(--ds-accent);
  border: 1px solid rgb(var(--c-accent) / .18); border-radius: var(--ds-radius-full);
}

/* Company / director profile common surfaces */
.director-image .initial-nm { background: rgb(var(--c-accent) / .12); color: var(--ds-primary); }
.director-info .d-name { color: var(--ds-ink); }
.director-info .d-position { color: var(--ds-muted); }

/* Sticky section sub-nav / tabs used across company pages */
.company-tabs a.active, .tab-link.active, .nav-pills .nav-link.active {
  background: var(--ds-primary); color: #fff;
}

/* Generic "no data" empty states → soft token surface */
.no-charges-data-flex, .no-data-box {
  background: var(--ds-surface-page); border: 1px dashed var(--ds-border-strong); border-radius: var(--ds-radius); color: var(--ds-muted);
}

/* ---- Product detail pages (CompanyCheckPro, LegalPro) ---------------------- */
.button-pro {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--ds-primary); color: #fff !important; border: 0;
  border-radius: var(--ds-radius-sm); padding: 11px 22px; font-weight: 600; font-size: 14px;
  text-decoration: none; transition: var(--ds-transition);
}
.button-pro:hover { background: var(--ds-primary-700); color: #fff !important; }
.pro-item li i, .pro-item .fa-check-square { color: var(--ds-accent); }
.heading-top-product-page { color: var(--ds-ink); }

/* ============================================================================
   TCC THEME — premium display typography + card polish, extended SITE-WIDE.
   Scoped to body.tcc-themed so director / company / brand profile pages
   (which render WITHOUT the class) are left untouched. Cosmetic only — no
   layout/position/display changes, so JS behaviour is unaffected.
   ========================================================================== */
:root{ --ds-display:'Space Grotesk','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }

/* Display grotesk on headings (the homepage's signature) */
body.tcc-themed h1, body.tcc-themed h2, body.tcc-themed h3,
body.tcc-themed .h1, body.tcc-themed .h2, body.tcc-themed .h3,
body.tcc-themed .section-title, body.tcc-themed .page-title,
body.tcc-themed .card-title, body.tcc-themed .links-head,
body.tcc-themed .heading-top-product-page {
    font-family: var(--ds-display) !important;
    letter-spacing: -0.02em;
}

/* Cards → softer radius + gentle hover lift */
body.tcc-themed .card, body.tcc-themed .card-border-box {
    border-radius: 16px;
    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
body.tcc-themed .card:hover {
    box-shadow: 0 16px 38px rgba(15,23,42,.08);
    border-color: var(--ds-border-strong);
}

/* Header/sign-up CTAs use the same yellow CTA treatment as Buy Report. */
body.tcc-themed .start-free-link, body.tcc-themed .btn-signup_bottom {
  background: #ffc107 !important;
  border-color: #ffc107 !important;
  color: #051c38 !important;
  border-radius: 6px !important;
}
body.tcc-themed .start-free-link:hover, body.tcc-themed .btn-signup_bottom:hover {
  background: #e0a800 !important;
  border-color: #e0a800 !important;
  color: #051c38 !important;
}

/* ===== x.ai MONOCHROME accents for interior pages =====
   x.ai uses near-black, not a brand colour. Remap the primary/accent tokens to
   near-black so interior buttons / links / active states read monochrome like x.ai.
   (Gradient cards, charts, status colours keep their own values.) */
body.tcc-themed{
  --ds-primary:#2563eb; --ds-primary-700:#1d4fd0;
  --ds-accent:#2563eb; --ds-accent-alt:#1d5080;
  --ds-cta:#ffc107; --ds-cta-700:#e0a800; --ds-on-cta:#051c38;  /* TCC yellow CTA */
}
/* White, x.ai-style top header (interior pages currently render the navy _UnifiedHeader) */
body.tcc-themed .main-header,
body.tcc-themed .main-header.sticky-header{ background:#ffffff !important; border-bottom:1px solid #ececec !important; box-shadow:0 1px 0 rgba(10,10,10,.02) !important; }
body.tcc-themed .main-header .nav-link-with-dropdown,
body.tcc-themed .main-header .navigation-menu-item a,
body.tcc-themed .main-header .header-links > a:not(.start-free-link){ color:#0a0a0a !important; }
/* the yellow "Start for Free" pill keeps navy text */
body.tcc-themed .main-header .start-free-link,
body.tcc-themed .main-header .start-free-link *{ color:#051c38 !important; }
body.tcc-themed .main-header .header-logo svg rect{ fill:#051c38 !important; }   /* TCC navy bars */
body.tcc-themed .main-header .header-logo svg text{ fill:#0a0a0a !important; }   /* dark wordmark on white header */
/* Header search icon was white (built for the navy header) -> invisible on the white header. Recolor dark. */
body.tcc-themed .main-header .expndable-search-btn,
body.tcc-themed .main-header .expndable-search-btn svg,
body.tcc-themed .main-header .sign-in-link{ color:#0a0a0a !important; fill:#0a0a0a !important; }

/* Search / list result cards: each field's LABEL must sit ABOVE its VALUE.
   A stray flex-row was laying them side-by-side so they ran together
   ("Status Amalgamated"). Force the label/value to stack. */
.director-list-left, .director-list-right{ display:block !important; }
.director-list-left span, .director-list-right span{ display:block !important; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ds-muted); margin-bottom:2px; }
.director-list-left p, .director-list-right p{ display:block !important; margin:0; font-weight:500; color:var(--ds-ink); }
/* Search-result "Claim Company" button -> near-black (was navy #293348) to match the mono palette */
.comp-search-page .btn-blue, .comp-search-page .following_btn{ background-color:#2563eb !important; border-color:#2563eb !important; }
.comp-search-page .btn-blue:hover{ background-color:#1d4fd0 !important; }

/* Light page canvas (the site is light overall; only the homepage hero band +
   the footer are dark accents). Keeps top scroll-bounce/overscroll light to
   match the page and white header. */
html{ background-color:#ffffff; }

/* Light/white footer (matches the light theme). Scoped to .footer so it
   covers both the homepage and interior pages, which render the same partial. */
.footer{ background:#ffffff !important; color:#0a0a0a !important; border-top:1px solid #ececec; }
.footer .links-head{ color:#0a0a0a !important; }
.footer p, .footer span, .footer a, .footer-links li a{ color:#5a5a5a !important; }
.footer a:hover, .footer-links li a:hover{ color:#0a0a0a !important; }
.footer .footer-logo svg rect{ fill:#051c38 !important; }     /* TCC navy bars */
.footer .footer-logo svg text{ fill:#0a0a0a !important; }      /* dark wordmark on white footer */
.footer .footer-social-flex a{ background:rgba(10,10,10,.06) !important; }
.footer .footer-social-flex a:hover{ background:rgba(37,99,235,.14) !important; }
.footer .footer-social-flex i, .footer .footer-social-flex svg{ color:#0a0a0a !important; }
.footer .copyright{ background:#f7f7f8 !important; }
.footer .copyright p{ color:#6b6b6b !important; }
.footer-disclaimer p, .footer-disclaimer span, .footer-disclaimer .show-more{ color:#6b6b6b !important; }

/* Light, x.ai-style mega-dropdowns (were navy #051c38 with white text) */
body.tcc-themed .dropdown-menu{ background:#ffffff !important; border:1px solid #ececec !important; box-shadow:0 20px 60px rgba(10,10,10,.12) !important; }
body.tcc-themed .dropdown-menu *{ color:#4a4a4a !important; }
body.tcc-themed .dropdown-menu h1, body.tcc-themed .dropdown-menu h2, body.tcc-themed .dropdown-menu h3,
body.tcc-themed .dropdown-menu h4, body.tcc-themed .dropdown-menu h5, body.tcc-themed .dropdown-menu strong,
body.tcc-themed .dropdown-menu b{ color:#0a0a0a !important; }
body.tcc-themed .dropdown-menu svg, body.tcc-themed .dropdown-menu i{ color:#0a0a0a !important; }
body.tcc-themed .dropdown-item:hover{ background:#f5f5f5 !important; border-radius:8px; }
body.tcc-themed .dropdown-footer-primary{ background:#2563eb !important; color:#ffffff !important; border:1px solid #2563eb !important; }
body.tcc-themed .dropdown-footer-primary *{ color:#ffffff !important; }
body.tcc-themed .dropdown-footer-secondary{ background:#f5f5f5 !important; color:#0a0a0a !important; border:1px solid #ececec !important; }

/* Navy CTAs need white text. Yellow CTAs keep navy text. */
body.tcc-themed .blue_btn, body.tcc-themed .blue_btn *,
body.tcc-themed .btn-primary, body.tcc-themed .btn-primary *,
body.tcc-themed .button-pro, body.tcc-themed .button-pro *{ color:#ffffff !important; }
/* dropdown's black primary CTA — high specificity to beat the .navigation-menu-item a rule */
body.tcc-themed .main-header .dropdown-menu .dropdown-footer-primary,
body.tcc-themed .main-header .dropdown-menu .dropdown-footer-primary *{ color:#ffffff !important; }