/* =========================================================
   PSONE MASTER HEADER CSS
   Central styling for every page using psone-header.js
   ========================================================= */

#psone-master-header {
  --psh-bg: #020617;
  --psh-panel: #0f172a;
  --psh-panel-2: #111827;
  --psh-border: #1e293b;
  --psh-border-light: #334155;
  --psh-text: #f8fafc;
  --psh-muted: #94a3b8;
  --psh-blue: #0ea5e9;
  --psh-blue-hover: #38bdf8;
  --psh-amber: #fbbf24;
  --psh-green: #34d399;
  position: relative;
  z-index: 1000;
  width: 100%;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--psh-text);
}

#psone-master-header *,
#psone-master-header *::before,
#psone-master-header *::after {
  box-sizing: border-box;
}

#psone-master-header header {
  position: relative;
  z-index: 1000;
  width: 100%;
  background: rgba(2, 6, 23, 0.97) !important;
  border-bottom: 1px solid var(--psh-border) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#psone-master-header header > div {
  max-width: none !important;
  min-height: 72px;
  margin: 0 auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

#psone-master-header a {
  text-decoration: none;
}

#psone-master-header nav a {
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: color .18s ease;
}

#psone-master-header nav a:hover {
  color: #fff;
}

#psone-master-header input[type="text"],
#psone-master-header input[type="search"] {
  background: rgba(15, 23, 42, .9) !important;
  border-color: var(--psh-border-light) !important;
  color: #e2e8f0 !important;
  outline: none;
}

#psone-master-header input::placeholder {
  color: #64748b !important;
}

#psone-master-header #nav-auth-container > div > button,
#psone-master-header #ps-profile-btn {
  background: rgba(15, 23, 42, .92) !important;
  border: 1px solid var(--psh-border-light) !important;
  color: #fff !important;
  min-height: 44px;
}

#psone-master-header #ps-profile-menu {
  width: 240px !important;
  background: #0f172a !important;
  border: 1px solid var(--psh-border-light) !important;
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45) !important;
  z-index: 9999 !important;
}

#psone-master-header #ps-profile-menu a,
#psone-master-header #ps-profile-menu button {
  font-family: inherit;
}

#psone-master-header #mobile-menu {
  background: #020617 !important;
  border-color: var(--psh-border) !important;
}

#psone-master-header .bg-brand-600 {
  background-color: #0284c7 !important;
}

#psone-master-header .hover\:bg-brand-500:hover {
  background-color: #0ea5e9 !important;
}

#psone-master-header .text-brand-400 {
  color: #38bdf8 !important;
}

#psone-master-header .border-slate-700 {
  border-color: #334155 !important;
}

#psone-master-header .border-slate-800 {
  border-color: #1e293b !important;
}

#psone-master-header .bg-slate-900,
#psone-master-header .bg-slate-900\/80 {
  background-color: rgba(15, 23, 42, .94) !important;
}

#psone-master-header .text-slate-300 {
  color: #cbd5e1 !important;
}

#psone-master-header .text-slate-400 {
  color: #94a3b8 !important;
}

#psone-master-header .text-slate-500 {
  color: #64748b !important;
}

#psone-master-header .text-amber-300,
#psone-master-header .text-amber-400 {
  color: #fbbf24 !important;
}

#psone-master-header .text-emerald-300 {
  color: #6ee7b7 !important;
}

@media (max-width: 1023px) {
  #psone-master-header header > div {
    min-height: 64px;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (max-width: 640px) {
  #psone-master-header header > div {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* V1.1: role-hidden controls remain hidden when tab styles are reassigned. */
.psone-access-hidden { display: none !important; }

/* ============================================================
   PSONE MASTER HEADER V2.7 — SELF-CONTAINED VISUAL SYSTEM
   Explicit dimensions, gradients, layout and typography avoid
   page-specific Tailwind configuration differences.
   ============================================================ */
#psone-master-header { isolation: isolate; }
#psone-master-header .psh-wide-shell {
  max-width: none !important; width: 100% !important;
  margin: 0 !important; padding-inline: clamp(16px, 2vw, 38px) !important;
}
#psone-master-header .psh-header-row {
  display: grid !important;
  grid-template-columns: minmax(220px,1fr) minmax(0,max-content) minmax(220px,1fr);
  align-items: center !important; gap: clamp(12px,1.3vw,24px);
  height: 80px !important; min-height: 80px !important;
}
#psone-master-header .psh-brand {
  display: flex !important; align-items: center !important; gap: 14px !important;
  justify-self: start; min-width: 0; color: #fff !important;
}
#psone-master-header .psh-brand > div:last-child { min-width: 0; }
#psone-master-header .psh-brand > div:last-child > div {
  display: flex !important; align-items: center !important; gap: 6px !important;
}
#psone-master-header .psh-logo-frame {
  position: relative !important; flex: 0 0 44px !important;
  width: 44px !important; height: 44px !important; padding: 2px !important;
  border-radius: 12px !important;
  background: linear-gradient(40deg,#0284c7 0%,#0ea5e9 62%,#f59e0b 100%) !important;
  box-shadow: 0 4px 15px rgba(14,165,233,.22) !important;
}
#psone-master-header .psh-logo-inner {
  width: 100% !important; height: 100% !important; display: flex !important;
  align-items: center !important; justify-content: center !important;
  background: #020617 !important; border-radius: 10px !important;
}
#psone-master-header .psh-logo-inner i { font-size: 20px !important; color: #38bdf8 !important; }
#psone-master-header .psh-logo-status {
  position: absolute !important; right: -4px !important; bottom: -4px !important;
  width: 14px !important; height: 14px !important; border: 2px solid #020617 !important;
  border-radius: 50% !important; background: #10b981 !important;
}
#psone-master-header .psh-brand-title {
  font-family: 'JetBrains Mono',ui-monospace,monospace !important;
  font-size: 24px !important; font-weight: 800 !important;
  letter-spacing: -1px !important; line-height: 1.2 !important; white-space: nowrap;
}
#psone-master-header .psh-version {
  display: inline-block !important; padding: 3px 6px !important;
  border: 1px solid #334155 !important; border-radius: 4px !important;
  background: #1e293b !important; color: #cbd5e1 !important;
  font-size: 9px !important; line-height: 1.1 !important;
  font-weight: 700 !important; white-space: nowrap;
}
#psone-master-header .psh-tagline {
  margin: 4px 0 0 !important; font-size: 11px !important;
  font-weight: 500 !important; line-height: 1.35 !important; white-space: nowrap;
}
#psone-master-header .psh-center-nav {
  display: flex !important; align-items: center !important;
  justify-content: center !important; justify-self: center !important;
  gap: clamp(12px,1.35vw,26px) !important; white-space: nowrap;
}
#psone-master-header .psh-center-nav .psh-nav-link {
  display: inline-flex !important; align-items: center !important;
  gap: 7px !important; font-size: 13px !important; font-weight: 600 !important;
  color: #cbd5e1 !important; line-height: 1.25 !important;
}
#psone-master-header .psh-center-nav .psh-nav-link:hover { color: #38bdf8 !important; }
#psone-master-header .psh-nav-link i { font-size: 12px !important; color: #38bdf8 !important; }
#psone-master-header .psh-search {
  display: block !important; position: relative !important; margin-left: 6px !important;
}
#psone-master-header .psh-search-input {
  display: block !important; width: clamp(165px,13vw,250px) !important;
  height: 36px !important; padding: 8px 12px 8px 36px !important;
  border: 1px solid #334155 !important; border-radius: 12px !important;
  background: #0f172a !important; color: #e2e8f0 !important;
  font-size: 11px !important; line-height: 18px !important;
  font-family: 'JetBrains Mono',ui-monospace,monospace !important;
}
#psone-master-header .psh-search-icon {
  position: absolute !important; top: 12px !important; left: 12px !important;
  color: #64748b !important; font-size: 12px !important; pointer-events: none;
}
#psone-master-header .psh-search-dropdown {
  position: absolute !important; top: 100% !important; left: 0 !important;
  margin-top: 8px !important; width: max(250px,100%) !important;
  padding: 8px !important; border: 1px solid #334155 !important;
  border-radius: 12px !important; background: #0f172a !important;
  box-shadow: 0 15px 35px rgba(0,0,0,.45) !important; z-index: 50 !important;
}
#psone-master-header .psh-right-actions {
  display: flex !important; align-items: center !important; justify-content: flex-end !important;
  justify-self: end !important; min-width: 0; gap: 12px !important;
}
#psone-master-header #nav-auth-container { display: flex !important; align-items: center !important; }
#psone-master-header .psh-profile-wrap { position: relative !important; }
#psone-master-header #ps-profile-btn {
  display: flex !important; align-items: center !important; gap: 10px !important;
  padding: 6px 10px !important; min-height: 52px !important;
  border: 1px solid #334155 !important; border-radius: 12px !important;
  background: rgba(15,23,42,.94) !important; color: #fff !important;
  cursor: pointer !important;
}
#psone-master-header .psh-avatar {
  flex: 0 0 36px !important; width: 36px !important; height: 36px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg,#0284c7 0%,#38bdf8 45%,#fbbf24 100%) !important;
  color: #fff !important; font-size: 11px !important; font-weight: 800 !important;
}
#psone-master-header .psh-profile-details { display: block !important; text-align: left !important; }
#psone-master-header .psh-profile-details > span:first-child {
  display: block !important; font-size: 12px !important; font-weight: 700 !important;
  color: #fff !important; line-height: 1.25 !important; white-space: nowrap;
}
#psone-master-header .psh-profile-details > span:nth-child(2) {
  display: flex !important; gap: 4px !important; margin-top: 4px !important;
}
#psone-master-header .psh-role-badge {
  display: inline-block !important; padding: 3px 5px !important;
  border-radius: 4px !important; font-size: 8px !important;
  line-height: 1 !important; font-weight: 800 !important;
}
#psone-master-header .psh-role-admin { background: #3b2b10 !important; color: #fbbf24 !important; border: 1px solid #7c581d !important; }
#psone-master-header .psh-role-pro { background: #082f49 !important; color: #7dd3fc !important; border: 1px solid #075985 !important; }
#psone-master-header .psh-role-free,
#psone-master-header .psh-profile-details .bg-emerald-500\/15 {
  background: #052e2b !important; color: #6ee7b7 !important; border: 1px solid #065f46 !important;
}
#psone-master-header #ps-profile-menu { position: absolute !important; right: 0 !important; top: 100% !important; margin-top: 8px !important; }
#psone-master-header .psh-mobile-toggle { display: none !important; }
#psone-master-header #mobile-menu.hidden,
#psone-master-header #ps-profile-menu.hidden,
#psone-master-header #search-dropdown.hidden { display: none !important; }
@media (max-width: 1450px) {
  #psone-master-header .psh-header-row {
    grid-template-columns: minmax(0,1fr) auto !important;
  }
  #psone-master-header .psh-center-nav { display: none !important; }
  #psone-master-header .psh-mobile-toggle {
    display: inline-flex !important; align-items: center !important;
    justify-content: center !important; width: 40px !important; height: 40px !important;
    border: 1px solid #334155 !important; border-radius: 10px !important;
    background: #0f172a !important; color: #94a3b8 !important;
    cursor: pointer !important;
  }
  #psone-master-header #mobile-menu { display: block; }
  #psone-master-header #mobile-menu.hidden { display: none !important; }
}
@media (max-width: 640px) {
  #psone-master-header .psh-wide-shell { padding-inline: 12px !important; }
  #psone-master-header .psh-header-row { height: 68px !important; min-height: 68px !important; gap: 8px !important; }
  #psone-master-header .psh-brand { gap: 8px !important; }
  #psone-master-header .psh-logo-frame { width: 38px !important; height: 38px !important; flex-basis: 38px !important; }
  #psone-master-header .psh-brand-title { font-size: 19px !important; }
  #psone-master-header .psh-version, #psone-master-header .psh-tagline { display: none !important; }
  #psone-master-header .psh-profile-details { display: none !important; }
  #psone-master-header #ps-profile-btn { min-height: 40px !important; padding: 4px 6px !important; }
  #psone-master-header .psh-avatar { width: 30px !important; height: 30px !important; flex-basis: 30px !important; }
}

/* EcoSPRINT Hub image brand — 2026-10-17
   Replace /assets/images/ecosprint-logo.png to update the logo everywhere.
   Navigation, auth and header sizing are intentionally unchanged. */
#psone-master-header .psh-brand-image {
  display: block !important;
  width: 265px !important;
  height: 48px !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
  flex-shrink: 0 !important;
}
@media (max-width: 640px) {
  #psone-master-header .psh-brand-image {
    width: 172px !important;
    height: 38px !important;
  }
}

/* EcoSPRINT Hub light master header — white background and ECO-blue navigation.
   Scoped to the shared header to preserve page-level dark themes. */
#psone-master-header {
  --psh-bg: #ffffff;
  --psh-text: #083d7b;
  --psh-muted: #466481;
  --psh-border: #dce5f0;
  --psh-border-light: #cbd9e9;
}
#psone-master-header header {
  background: #ffffff !important;
  border-bottom: 1px solid #dce5f0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#psone-master-header .psh-brand { color: #083d7b !important; }
#psone-master-header .psh-center-nav .psh-nav-link,
#psone-master-header nav a {
  color: #07549b !important;
}
#psone-master-header .psh-center-nav .psh-nav-link:hover,
#psone-master-header nav a:hover { color: #00a5dd !important; }
#psone-master-header .psh-nav-link i { color: #07549b !important; }
#psone-master-header .psh-search-input,
#psone-master-header input[type="text"],
#psone-master-header input[type="search"] {
  background: #f5f9fd !important;
  border-color: #cbd9e9 !important;
  color: #123f72 !important;
}
#psone-master-header input::placeholder { color: #617e9d !important; }
#psone-master-header .psh-search-icon { color: #07549b !important; }
#psone-master-header #nav-auth-container > a { color: #07549b !important; }
#psone-master-header #nav-auth-container > a:hover { color: #00a5dd !important; }
#psone-master-header #ps-profile-btn,
#psone-master-header #nav-auth-container > div > button {
  background: #f5f9fd !important;
  border-color: #cbd9e9 !important;
  color: #123f72 !important;
}
#psone-master-header #ps-profile-btn .psh-profile-details > span:first-child {
  color: #123f72 !important;
}
#psone-master-header .psh-mobile-toggle {
  background: #f5f9fd !important;
  border-color: #cbd9e9 !important;
  color: #07549b !important;
}
#psone-master-header #mobile-menu {
  background: #ffffff !important;
  border-color: #dce5f0 !important;
}
#psone-master-header #mobile-menu > a,
#psone-master-header #mobile-auth-area > a {
  color: #07549b !important;
}
#psone-master-header #mobile-auth-area { border-color: #dce5f0 !important; }
#psone-master-header #mobile-auth-area > div { color: #123f72 !important; }
/* Profile and search dropdowns retain their original dark styling for contrast. */

/* EcoSPRINT profile card and sign-in update */
#psone-master-header .psh-signin-link {font-family:inherit!important;font-size:13px!important;font-weight:600!important;line-height:1.25!important;color:#00345F!important;white-space:nowrap;transition:color .18s ease}
#psone-master-header .psh-signin-link:hover {color:#0077B5!important}
#psone-master-header #ps-profile-menu {background:#fff!important;color:#00345F!important;border:1px solid #d7e4ed!important;box-shadow:0 16px 40px rgba(0,52,95,.14)!important}
#psone-master-header #ps-profile-menu > div:first-child {background:#fff!important;border-color:#d7e4ed!important;color:#00345F!important}
#psone-master-header #ps-profile-menu > div:first-child > div:first-child {color:#00345F!important}
#psone-master-header #ps-profile-menu > div:first-child > div:nth-child(2) {color:#426581!important}
#psone-master-header #ps-profile-menu a {color:#00345F!important;background:transparent!important}
#psone-master-header #ps-profile-menu a:hover,#psone-master-header #ps-profile-menu button:hover {background:#edf6fb!important;color:#0077B5!important}
#psone-master-header #ps-profile-menu a i {color:#0077B5!important}
#psone-master-header #ps-profile-menu .border-t,#psone-master-header #ps-profile-menu .border-b {border-color:#d7e4ed!important}
#psone-master-header #ps-profile-menu .text-amber-400 {color:#FF7900!important}
#psone-master-header #ps-profile-menu #ps-logout {color:#00345F!important}
#psone-master-header #ps-profile-menu #ps-logout i {color:#FF7900!important}
#psone-master-header #ps-profile-menu .psh-role-admin {background:#fff5e7!important;border-color:#ffd09b!important;color:#a84f00!important}
#psone-master-header #ps-profile-menu .psh-role-free {background:#eaf5fb!important;border-color:#b7dced!important;color:#003B70!important}
#psone-master-header #ps-profile-menu .psh-role-pro {background:#eaf5fb!important;border-color:#b7dced!important;color:#0077B5!important}
#psone-master-header #ps-profile-menu .bg-amber-500\/10 {background:#fff3e2!important;border-color:#ffdcac!important;color:#a84f00!important}