/* ============================================================
   Site-wide visibility — readable text on every page type
   ============================================================ */

/* --- Toolkit pages: dark banner headers stay readable --- */
.toolkit-public .toolkit-page-header,
.toolkit-public .toolkit-page-header h1,
.toolkit-public .toolkit-page-header p,
.toolkit-public .toolkit-page-header .section-eyebrow,
.toolkit-public .toolkit-page-header strong {
  color: #fff;
}

.toolkit-public .toolkit-page-header p,
.toolkit-public .toolkit-page-header .toolkit-page-header__links {
  color: rgba(255, 255, 255, 0.88) !important;
}

.toolkit-public .toolkit-page-header a.text-orange,
.toolkit-public .toolkit-page-header .text-orange {
  color: #ffd0a8 !important;
}

/* --- Toolkit navbar + user menu (light bar) --- */
.toolkit-public .navbar.header .header-user__toggle {
  background: #fff !important;
  border-color: var(--color-border, #e2e8f0) !important;
  color: var(--color-navy, #0f172a) !important;
}

.toolkit-public .navbar.header .header-user__name {
  color: var(--color-navy, #0f172a) !important;
}

.toolkit-public .navbar.header .header-user__role {
  color: var(--color-text-muted, #64748b) !important;
}

.toolkit-public .navbar.header .header-user__menu {
  background: #fff !important;
  border-color: var(--color-border, #e2e8f0) !important;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  min-width: 240px !important;
  z-index: 1200 !important;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12) !important;
}

.toolkit-public .navbar.header .header-user {
  position: relative !important;
}

.toolkit-public .navbar.header .header-user__menu-name {
  color: var(--color-navy, #0f172a) !important;
}

.toolkit-public .navbar.header .header-user__menu-role {
  color: var(--color-text-muted, #64748b) !important;
}

.toolkit-public .navbar.header .header-user__menu-item {
  display: block !important;
  width: 100% !important;
  color: var(--color-navy, #0f172a) !important;
}

.toolkit-public .navbar.header .header-user__menu-item:hover {
  color: var(--color-orange, #f37021) !important;
  background: rgba(243, 112, 33, 0.08) !important;
}

.toolkit-public .navbar.header .header-user__avatar {
  background: linear-gradient(135deg, var(--color-navy-dark, #001f3f), #2563eb) !important;
  color: #fff !important;
}

.toolkit-public .navbar.header .header-user__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

.toolkit-public .navbar.header .btn-login,
.toolkit-public .navbar.header .btn-primary-sm {
  color: var(--color-navy, #0f172a) !important;
}

.toolkit-public .navbar.header .nav-dropdown__menu {
  background: #fff !important;
}

.toolkit-public .navbar.header .nav-dropdown__item {
  color: var(--color-navy, #0f172a) !important;
}

/* --- Homepage: scrolled navbar user + links --- */
.navbar.scrolled .header-user__toggle {
  background: #fff !important;
  border-color: var(--border, #e2e8f0) !important;
}

.navbar.scrolled .header-user__name {
  color: var(--text-dark, #0f172a) !important;
}

.navbar.scrolled .header-user__role {
  color: var(--text-gray, #64748b) !important;
}

.navbar.scrolled .header-user__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Homepage hero: name highlight always visible --- */
.hero.hero--logged-in .hero-title .hero__highlight,
.hero.hero--logged-in .hero__title .hero__highlight {
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
  color: var(--accent, #f59e0b) !important;
}

/* --- Forms & toolkit content on light bg --- */
.toolkit-public .form-label,
.app-body .form-label {
  color: var(--color-navy, #0f172a);
}

.toolkit-public .form-hint,
.toolkit-public .text-muted,
.app-body .text-muted {
  color: var(--color-text-muted, #64748b) !important;
}

.toolkit-public .font-semibold.text-navy,
.toolkit-public .text-navy {
  color: var(--color-navy, #0f172a) !important;
}

/* --- Page purpose guide on light sections --- */
.page-purpose--real-stories .page-purpose__head h2,
.page-purpose--real-stories .pp-why-module h3,
.page-purpose--real-stories .pp-why-module p {
  color: var(--color-navy, #0f172a);
}

.page-purpose--real-stories .page-purpose__toggle {
  color: var(--color-navy, #0f172a);
}

/* --- App shell: ensure sidebar user text --- */
.app-sidebar__name {
  color: #fff !important;
}

.app-sidebar__role {
  color: rgba(255, 255, 255, 0.72) !important;
}

.app-sidebar__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

/* --- Auth pages --- */
.auth-page .auth-card,
.auth-page .auth-card h1,
.auth-page .auth-card label {
  color: var(--color-navy, #0f172a);
}

/* --- Mobile menu label readable --- */
.mobile-menu__toolkit-label {
  color: var(--text-gray, #64748b) !important;
}

.mobile-menu a[hidden],
.nav__link[hidden],
.nav-dropdown__item[hidden] {
  display: none !important;
}

/* ============================================================
   Light-surface contrast — buttons, forms, links site-wide
   ============================================================ */

/* Outline buttons on white cards / app main (profile, settings, admin…) */
.app-body .btn--outline,
.app-body .btn--outline-dark,
.app-main .btn--outline,
.app-main .btn--outline-dark,
.toolkit-main .btn--outline,
.toolkit-main .btn--outline-dark,
.profile-card .btn--outline,
.settings-card .btn--outline,
.modal .btn--outline,
.dropdown__menu .btn--outline,
.header-user__menu .btn--outline {
  background: var(--color-white) !important;
  color: var(--color-navy, #0f172a) !important;
  border-color: var(--color-border, #cbd5e1) !important;
}

.app-body .btn--outline:hover:not(:disabled),
.app-main .btn--outline:hover:not(:disabled),
.toolkit-main .btn--outline:hover:not(:disabled),
.profile-card .btn--outline:hover:not(:disabled),
.header-user__menu .btn--outline:hover:not(:disabled) {
  border-color: var(--color-navy, #0f172a) !important;
  background: var(--color-bg, #f4f6f9) !important;
  color: var(--color-navy, #0f172a) !important;
}

/* Photo upload block — always readable */
.profile-photo-upload__btn,
.profile-photo-upload label.btn {
  background: var(--color-white) !important;
  color: var(--color-navy, #0f172a) !important;
  border: 2px solid var(--color-border, #cbd5e1) !important;
  font-weight: 600 !important;
}

.profile-photo-upload__label {
  color: var(--color-navy, #0f172a) !important;
}

/* Form controls on light backgrounds */
.app-body .form-input,
.app-body .form-select,
.app-body .form-textarea,
.app-main .form-input,
.app-main .form-select,
.app-main .form-textarea {
  color: var(--color-navy, #0f172a);
  background: var(--color-white);
}

.app-body .form-input::placeholder,
.app-body .form-textarea::placeholder,
.app-main .form-input::placeholder {
  color: #64748b;
  opacity: 1;
}

.app-body .form-input[readonly],
.app-main .form-input[readonly] {
  color: var(--color-text-muted, #64748b);
  background: var(--color-bg, #f4f6f9);
}

.app-body .form-checkbox,
.app-body .form-radio,
.app-main .form-checkbox,
.app-main .form-radio {
  color: var(--color-navy, #0f172a);
}

.app-body .form-checkbox span,
.app-main .form-checkbox span {
  color: var(--color-text, #334155);
}

/* Breadcrumbs & muted helper text */
.app-body .breadcrumb a,
.app-main .breadcrumb a {
  color: var(--color-text-muted, #64748b) !important;
}

.app-body .breadcrumb a:hover,
.app-main .breadcrumb a:hover {
  color: var(--color-orange, #f37021) !important;
}

.app-body .text-xs.text-muted,
.app-main .text-xs.text-muted {
  color: var(--color-text-muted, #64748b) !important;
}

/* Profile / settings card body text */
.profile-card,
.settings-card,
.form-section {
  color: var(--color-text, #334155);
}

.profile-card .profile-info-item label,
.settings-card .settings-toggle__text span {
  color: var(--color-text-muted, #64748b) !important;
}

.profile-card .profile-info-item p,
.settings-card .settings-toggle__text strong {
  color: var(--color-navy, #0f172a) !important;
}

/* Applicant & job cards */
.applicant-card__btn.btn--outline,
.my-applicants-group__link.btn--outline {
  color: var(--color-navy, #0f172a) !important;
  border-color: var(--color-border, #cbd5e1) !important;
  background: var(--color-white) !important;
}

/* Admin panel tab buttons — all states readable on white */
.admin-panel .btn--outline,
.admin-panel [data-toolkit-tab].btn--outline {
  color: var(--color-navy, #0f172a) !important;
  background: var(--color-white) !important;
  border-color: var(--color-border, #cbd5e1) !important;
}

.admin-panel .btn--outline:hover:not(:disabled),
.admin-panel [data-toolkit-tab].btn--outline:hover:not(:disabled) {
  border-color: var(--color-navy, #0f172a) !important;
  background: var(--color-bg, #f4f6f9) !important;
}

/* Ghost buttons on light surfaces */
.app-body .btn--ghost,
.app-main .btn--ghost,
.toolkit-main .btn--ghost,
.card .btn--ghost,
.modal .btn--ghost,
.auth-card .btn--ghost {
  color: var(--color-navy, #0f172a) !important;
  border: 1px solid var(--color-border, #cbd5e1) !important;
  background: transparent !important;
}

.app-body .btn--ghost:hover:not(:disabled),
.app-main .btn--ghost:hover:not(:disabled),
.toolkit-main .btn--ghost:hover:not(:disabled) {
  background: var(--color-bg, #f4f6f9) !important;
  color: var(--color-navy, #0f172a) !important;
}

/* Dark hero sections keep light-outline buttons */
.hero .btn--outline-light,
.post-project-hero .btn--outline-light,
.toolkit-page-header .btn--outline-light,
.cta-band .btn--outline-light,
.navbar:not(.scrolled) .btn--outline-light {
  background: transparent !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
}

/* ============================================================
   Site-wide: faint meta text on white cards → readable
   ============================================================ */

/* Global token fallback — light gray labels on white */
.app-body,
.app-main,
.toolkit-main,
.toolkit-public .toolkit-main {
  --color-text-light: #64748b;
}

/* API loading placeholders */
[data-api-slot]:empty::before {
  color: var(--color-text-muted, #64748b) !important;
}

/* Breadcrumb separators */
.breadcrumb__sep {
  color: var(--color-text-muted, #64748b) !important;
}

/* Dropdown menu meta */
.dropdown__item-time {
  color: var(--color-text-muted, #64748b) !important;
}

/* Auth page — inactive role tabs on white card */
.auth-card .tab:not(.tab--active):not(.active) {
  color: var(--color-navy, #0f172a) !important;
  opacity: 0.72;
}

.auth-card .tab--active,
.auth-card .tab.active {
  color: var(--color-white) !important;
}

/* Messages — chat sidebar meta text */
.chat__list-sub,
.chat__convo-time,
.chat__convo-preview,
.chat__day,
.chat__hello,
.chat__pane-project,
.chat__msg-time {
  color: var(--color-text-muted, #64748b) !important;
}

.chat__convo-name,
.chat__pane-title {
  color: var(--color-navy, #0f172a) !important;
}

/* BOQ / project dashboard labels */
.dash-kpi__lbl,
.dash-card__sub,
.dash-gantt__label em,
.dash-pred__t,
.wbs-task__meta,
.bq-spec__k,
.pd-item__id,
.pd-count {
  color: var(--color-text-muted, #64748b) !important;
}

/* BuildBid toolkit sections on light background (homepage tools area) */
.calc-section.tools-section .tool-info p,
.calc-section.tools-section .tool-arrow,
.toolkit-main .product-info > p,
.toolkit-main .tool-info p {
  color: var(--color-text-muted, #64748b) !important;
}

.toolkit-main .product-info h3,
.toolkit-main .tool-info h3,
.toolkit-main .tool-card__title {
  color: var(--color-navy, #0f172a) !important;
}

/* Homepage — white cards must use dark ink, not pale gray as text */
body:not(.toolkit-public) .card,
body:not(.toolkit-public) .job-card,
body:not(.toolkit-public) .story-card,
body:not(.toolkit-public) .workflow-card,
body:not(.toolkit-public) .role-card {
  color: var(--text-dark, #0f172a);
}

body:not(.toolkit-public) .card .text-muted,
body:not(.toolkit-public) .job-card .text-muted,
body:not(.toolkit-public) .story-card .text-muted {
  color: var(--text-gray, #64748b) !important;
}

/* Toolkit navbar — always dark text on light bar (even without .scrolled) */
.toolkit-public .navbar.header .nav-dropdown__toggle,
.toolkit-public .navbar.header .nav__link,
.toolkit-public .navbar.header .nav-links a {
  color: var(--text-gray, #64748b) !important;
}

.toolkit-public .navbar.header .nav__link--active,
.toolkit-public .navbar.header .nav-dropdown--open .nav-dropdown__toggle {
  color: var(--accent, #f59e0b) !important;
}

/* Tabs on white — inactive readable */
.tabs .tab:not(.tab--active):not(.active) {
  color: var(--color-text-muted, #64748b);
}

.tabs--pills .tab:not(.tab--active):not(.active) {
  color: var(--color-navy, #0f172a) !important;
  background: var(--color-white) !important;
}

/* Toast close / meta */
.toast__close {
  color: var(--color-text-muted, #64748b) !important;
}

/* Table headers & cells on white */
.app-main table th,
.app-main table td,
.toolkit-main table th,
.toolkit-main table td {
  color: var(--color-text, #334155);
}

.app-main table th,
.toolkit-main table th {
  color: var(--color-navy, #0f172a);
}

/* Links must stay visible on white */
.app-body a:not(.btn):not(.app-nav__link),
.app-main a:not(.btn):not(.app-nav__link),
.toolkit-main a:not(.btn):not(.nav__link) {
  color: var(--color-navy-light, #0a2d52);
}

.app-body a:not(.btn):hover,
.app-main a:not(.btn):hover,
.toolkit-main a:not(.btn):hover {
  color: var(--color-orange, #f37021);
}

/* Badges on white cards */
.badge:not(.badge--active):not(.badge--pro) {
  color: var(--color-navy, #0f172a);
}

/* Page purpose guide on light bg */
.page-purpose .pp-why-module p,
.page-purpose .page-purpose__toggle {
  color: var(--color-navy, #0f172a) !important;
}

/* Standard sizes / calculator tool pages */
.calculator-tool-page .form-label,
.calculator-tool-page .calc-result-label {
  color: var(--color-navy, #0f172a) !important;
}

.calculator-tool-page .text-muted,
.calculator-tool-page .calc-hint {
  color: var(--color-text-muted, #64748b) !important;
}

/* ============================================================
   Homepage navbar — readable when scrolled (white bar)
   ============================================================ */

body:not(.toolkit-public) .navbar.header.scrolled,
body:not(.toolkit-public) .navbar.scrolled {
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

body:not(.toolkit-public) .navbar.header.scrolled .logo-build,
body:not(.toolkit-public) .navbar.scrolled .logo-build {
  color: var(--primary, #0f2744) !important;
}

body:not(.toolkit-public) .navbar.header.scrolled .logo-bid,
body:not(.toolkit-public) .navbar.scrolled .logo-bid {
  color: var(--accent, #f59e0b) !important;
}

body:not(.toolkit-public) .navbar.header.scrolled .logo__tagline,
body:not(.toolkit-public) .navbar.scrolled .logo__tagline {
  color: var(--text-gray, #64748b) !important;
}

body:not(.toolkit-public) .navbar.header.scrolled .nav-links .nav__link,
body:not(.toolkit-public) .navbar.header.scrolled .nav-dropdown__toggle,
body:not(.toolkit-public) .navbar.scrolled .nav-links .nav__link,
body:not(.toolkit-public) .navbar.scrolled .nav-dropdown__toggle {
  color: var(--text-gray, #64748b) !important;
}

body:not(.toolkit-public) .navbar.header.scrolled .nav-links .nav__link:hover,
body:not(.toolkit-public) .navbar.header.scrolled .nav-links .nav__link--active,
body:not(.toolkit-public) .navbar.header.scrolled .nav-dropdown--open .nav-dropdown__toggle,
body:not(.toolkit-public) .navbar.scrolled .nav-links .nav__link--active,
body:not(.toolkit-public) .navbar.scrolled .nav-dropdown--open .nav-dropdown__toggle {
  color: var(--accent, #f59e0b) !important;
}

body:not(.toolkit-public) .navbar.header.scrolled .btn-login,
body:not(.toolkit-public) .navbar.scrolled .btn-login {
  color: var(--primary, #0f2744) !important;
}

body:not(.toolkit-public) .navbar.header:not(.scrolled) .nav-links .nav__link,
body:not(.toolkit-public) .navbar.header:not(.scrolled) .nav-dropdown__toggle {
  color: rgba(255, 255, 255, 0.92) !important;
}

body:not(.toolkit-public) .navbar.header:not(.scrolled) .logo-build {
  color: #fff !important;
}

body:not(.toolkit-public) .navbar.header:not(.scrolled) .logo__tagline {
  color: rgba(255, 255, 255, 0.65) !important;
}

/* Mobile menu hidden unless open — all pages */
.mobile-menu:not(.active) {
  display: none !important;
}

.mobile-menu.active {
  display: flex !important;
  flex-direction: column;
}

.mobile-menu a {
  color: var(--color-navy, #0f172a) !important;
}

.mobile-menu__toolkit-label {
  color: var(--color-text-muted, #64748b) !important;
}