/* ============================================================================
   Nexolly UI polish (loaded AFTER the other stylesheets on public + dashboard pages)
   Scope of this file - each block is independent and clearly labelled:
     1. Accessible primary buttons (white text needs >= 4.5:1; old #16A34A gave 3.3:1)
     2. Category rails (single-row, swipeable) - reuses the existing .nx-slider component
     3. Mobile header order: Logo | Search | Join Now | Menu
     4. Mobile bottom navigation contrast (was 9px grey text on a white bar)
     5. Hero spacing fix (dead band between header and hero)
   ========================================================================== */

/* ---------- 1. Accessible primary buttons (brand green, darker stop) ---------- */
.nx-lc-btn-primary,
#nxProblemSubmit,
.btn-primary-cta,
.btn.btn-primary,
.nx-btn-primary,
.nx-btn.nx-btn-primary {
  background: linear-gradient(135deg, #047857, #0F766E) !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
}
.nx-lc-btn-primary:hover, #nxProblemSubmit:hover, .btn-primary-cta:hover, .btn.btn-primary:hover, .nx-btn-primary:hover {
  background: linear-gradient(135deg, #065F46, #115E59) !important; color: #FFFFFF !important; filter: none;
}
.btn.btn-primary:focus-visible, .nx-lc-btn:focus-visible, .nx-chip:focus-visible { outline: 3px solid #34D399; outline-offset: 2px; }
/* "Provide Solution" ghost button beside Submit Problem: clear border + readable label on the dark hero card */
.nx-problem-provide { color: #FFFFFF !important; border-color: #34D399 !important; background: rgba(52,211,153,.10) !important; }
/* Light button used inside the green provider band: dark text on a white button (was green-on-green) */
.btn.btn-light { background: #FFFFFF !important; color: #065F46 !important; border-color: #FFFFFF !important; }
.btn.btn-light:hover { background: #ECFDF5 !important; color: #064E3B !important; }

/* ---------- 2. Category rails ---------- */
.nx-slider { max-width: 100%; min-width: 0; }
.nx-rail { position: relative; }
.nx-rail .nx-slider-track { gap: 14px; padding: 6px 2px 14px; scroll-snap-type: x proximity; scroll-padding-inline: 2px; }
.nx-rail .nx-slide { flex: 0 0 auto; min-width: 0; scroll-snap-align: start; }

/* big category cards (homepage) - identical size, aligned text, long names wrap inside the card */
.nx-cat-card { display: flex; flex-direction: column; width: clamp(232px, 72vw, 280px); padding: 18px; text-decoration: none; color: #F5F7FA;
  background: var(--nxl-surface, #101A2A); border: 1px solid var(--nxl-border, rgba(255,255,255,.12)); border-radius: 16px; transition: border-color .15s, transform .15s; }
.nx-cat-card:hover { border-color: #34D399; transform: translateY(-2px); color: #F5F7FA; }
.nx-cat-card .ico { width: 44px; height: 44px; border-radius: 12px; background: rgba(52,211,153,.14); color: #34D399; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 12px; flex: 0 0 auto; }
.nx-cat-card h3 { font-size: 16px; font-weight: 800; line-height: 1.3; margin: 0 0 6px; color: #F5F7FA; min-height: 2.6em; overflow-wrap: anywhere; }
.nx-cat-card p { margin: 0; font-size: 13.5px; line-height: 1.5; color: #A7B0C0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nx-cat-card .nx-cat-go { margin-top: auto; padding-top: 12px; font-size: 13px; font-weight: 700; color: #6EE7B7; }
@media (min-width: 768px) { .nx-cat-card { width: 270px; } }

/* compact chip rail (Problems page filter) - ONE row, scrolls sideways, never wraps */
.nx-chip-rail { margin-bottom: 16px; }
.nx-chip-rail .nx-slider-track { padding: 4px 2px 10px; }
.nx-chip-rail .nx-chip { flex: 0 0 auto; width: auto; white-space: nowrap; min-height: 40px; padding: 10px 16px; font-size: 12.5px; display: inline-flex; align-items: center; justify-content: center; line-height: 1.2; }
.nx-chip-rail .nx-lc-btn-ghost { color: #F5F7FA !important; border: 1px solid rgba(255,255,255,.22); }

/* arrows: shown from tablet up (touch users swipe); sit INSIDE the rail so the page never scrolls sideways */
.nx-rail .nx-slider-arrow { display: none; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background: rgba(8,17,29,.95); color: #fff; border: 1px solid rgba(255,255,255,.25); }
.nx-chip-rail .nx-slider-arrow { top: calc(50% - 3px); width: 34px; height: 34px; }
.nx-rail .nx-slider-prev { left: 4px; } .nx-rail .nx-slider-next { right: 4px; }
@media (min-width: 768px) { .nx-rail .nx-slider-arrow { display: flex; } }
@media (hover: none) { .nx-rail .nx-slider-arrow { display: none; } }

/* ---------- 3. Mobile header: [Logo] [Search] [Join Now] [Menu] ---------- */
.nx-mobile-join { display: none; }
@media (max-width: 991.98px) {
  #mainNav > .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; column-gap: 8px; row-gap: 0; padding-left: 12px; padding-right: 12px; }
  #mainNav .navbar-brand { order: 1; flex: 0 0 auto; margin: 0 4px 0 0; padding: 0; }
  #mainNav .nx-mobile-search-toggle { order: 2; flex: 0 0 auto; margin-right: auto; }   /* pushes Join Now + Menu to the right edge */
  #mainNav .nx-mobile-join { order: 3; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; white-space: nowrap; font-weight: 700; font-size: 13px; line-height: 1; padding: 9px 14px; min-height: 40px; border-radius: 999px; margin: 0; }
  #mainNav .navbar-toggler { order: 4; flex: 0 0 auto; margin: 0; }
  #mainNav .navbar-collapse { order: 5; flex: 0 0 100%; width: 100%; }
}
@media (max-width: 359.98px) {
  #mainNav > .container { column-gap: 4px; padding-left: 8px; padding-right: 8px; }
  #mainNav .nx-mobile-join { padding: 8px 10px; font-size: 12px; }
  #mainNav .navbar-toggler { padding: .25rem .5rem; }
  #mainNav .nx-mobile-search-toggle { padding: 6px 8px; }
}

/* ---------- 4. Mobile bottom navigation: dark bar, readable labels ---------- */
.bottom-nav { background: rgba(16,26,42,.97) !important; border-top: 1px solid rgba(255,255,255,.14) !important; }
.bottom-nav .nav-item { color: #C3CBD8 !important; font-size: 11px !important; font-weight: 600 !important; }
.bottom-nav .nav-item:hover { color: #FFFFFF !important; }
.bottom-nav .nav-item.active { color: #6EE7B7 !important; }

/* ---------- 5. Hero spacing ---------- */
/* #nxHeaderSpacer already reserves the header's height; the old rule subtracted the header
   height AGAIN (with a 64px fallback), leaving a ~64px empty band above the hero. */
.nx-hero-bleed { margin-top: -6rem !important; }

/* ---------- 6. Contrast fixes for shared tokens and legacy light-theme leftovers ---------- */
/* Secondary/"faint" text was #748097 (4.39:1 on cards, just under AA). One token change lifts every
   dashboard + public page that uses it, without touching individual components. */
:root, html[data-theme="light"], html[data-theme="dark"] { --nx-text-faint: #8C97AA; --text-muted: #8C97AA; }
/* Bootstrap's default .text-muted / .form-text are dark greys meant for white pages (1.2:1 on Nexolly's navy) */
.text-muted, .form-text { color: #A7B0C0 !important; }
/* Active filter pills: white text on the old #16A34A was 3.3:1 */
.nx-blog-filter-pill.active, .nx-sol-pill.active, .nx-level-pill { background: #047857 !important; border-color: #047857 !important; color: #FFFFFF !important; }
/* Blog card "Learn More": was var(--text-primary) = white background with white text (invisible) */
.nx-blog-card-cta { background: #047857 !important; color: #FFFFFF !important; }
.nx-blog-card-cta:hover { background: #065F46 !important; color: #FFFFFF !important; }
/* Header mobile search field placeholder */
.nx-mobile-search-form input.form-control::placeholder, .nx-mobile-search-form input::placeholder { color: #C3CBD8 !important; opacity: 1; }
.form-control::placeholder, textarea::placeholder, input::placeholder { color: #9AA5B8 !important; opacity: 1; }
.auth-card .form-control::placeholder, .auth-card input::placeholder, .auth-card textarea::placeholder { color: #5B6578 !important; opacity: 1; }   /* white inputs: 5.9:1 */
/* Old "Submit a Solution" upload form (/dashboard/submit-solution): scoped fixes only */
#nx-submit-form .nx-check-text { color: #D5DBE5 !important; }
#nx-submit-form #nxFreeSolutionNotice, #nx-submit-form #nxFreeSolutionNotice strong { color: #FCD34D !important; }
#nx-submit-form .nx-upzone-hint { color: #A7B0C0 !important; }
/* Desktop sidebar: active item used #16A34A on a dark tint (4.4:1); red unread badge #FF5C5C (4.3:1) */
.nx-sidebar-link.active, .nx-sidebar-link.active span, .nx-sidebar-link.active i { color: #6EE7B7 !important; }
.nx-badge-red { color: #FFB4B4 !important; }

/* Dashboard bottom bar: keep every label on ONE line so the five items stay aligned ("My Solutions" used to wrap) */
.nx-bottom-nav-item { min-width: 0; }
.nx-bottom-nav-item span { white-space: nowrap; font-size: 11px; letter-spacing: 0; }
@media (max-width: 380px) { .nx-bottom-nav-item span { font-size: 10px; } }

/* ---------- 7. Search results + login / register / forgot-password (CSS only; no logic touched) ---------- */
.nx-search-title { color: #F5F7FA; font-weight: 700; }            /* was Bootstrap .text-dark = near-black on navy (1.3:1) */
.nx-search-title:hover { color: #6EE7B7; }
.auth-card .forgot-password-link, .auth-footer a, .auth-card .auth-footer a { color: #34D399 !important; }
body .btn-auth, body .btn-auth.btn-primary, body .register-submit, body #nxShowEmailFormBtn { background: linear-gradient(135deg, #047857, #0F766E) !important; color: #FFFFFF !important; border-color: transparent !important; }
body .btn-auth:hover, body .btn-auth.btn-primary:hover, body .register-submit:hover, body #nxShowEmailFormBtn:hover { background: linear-gradient(135deg, #065F46, #115E59) !important; color: #FFFFFF !important; }
.auth-card .auth-footer, .auth-footer { color: #C3CBD8 !important; }