/* SP Portal Shell UI
   Keep this file lightweight and portal-scoped to avoid affecting the theme site-wide.
*/

:root {
  --sp-orange: #f26522;
  --sp-text: #1f2937;
  --sp-muted: #6b7280;
  --sp-border: #e5e7eb;
  --sp-bg: #f6f7fb;
  --sp-card: #ffffff;
}

.sp-portal-page {
  min-height: 100vh;
  padding: 40px 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.45), rgba(15, 23, 42, 0.45)),
    url("https://spcompass.wpenginepowered.com/wp-content/uploads/2026/06/SP-Drone-Photo.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.sp-portal-card {
  width: 100%;
  max-width: 520px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.18);
  padding: 28px;
  backdrop-filter: blur(4px);
}

.sp-portal-card h2 { margin: 0 0 8px; color: var(--sp-text); }
.sp-portal-sub { margin: 0 0 18px; color: var(--sp-muted); }

.sp-portal-login-logo {
  text-align: center;
  margin: 0 0 18px;
}

.sp-portal-login-logo img {
  max-width: 320px;
  width: 100%;
  height: auto;
  display: inline-block;
}

.sp-portal-alert {
  padding: 10px 12px;
  border-radius: 10px;
  margin: 0 0 14px;
  font-size: 14px;
}
.sp-portal-alert.success { background: #ecfdf5; border: 1px solid #a7f3d0; }
.sp-portal-alert.error   { background: #fef2f2; border: 1px solid #fecaca; }
.sp-portal-alert.warn{
  background:#fff7ed;
  border:1px solid #fdba74;
  color:#9a3412;
}
.sp-portal-alert.success{
  background:#ecfdf5;
  border:1px solid #6ee7b7;
  color:#065f46;
}
.sp-portal-form label {
  display: block;
  font-size: 13px;
  margin: 14px 0 6px;
  color: var(--sp-text);
}
.sp-portal-form input,
.sp-portal-form select,
.sp-portal-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--sp-border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  background: #fff;
}
.sp-portal-form select { padding-right: 30px; }

.sp-portal-foot {
  margin-top: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--sp-muted);
}
.sp-portal-foot a { color: var(--sp-text); }
.sp-portal-divider { margin: 0 8px; color: var(--sp-muted); }

.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  border: 1px solid transparent;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
}
.sp-btn-primary { background: var(--sp-orange); color: #fff; }
.sp-btn-primary:hover { opacity: .92; }
.sp-btn-ghost { background: transparent; border-color: var(--sp-border); color: var(--sp-text); }
.sp-btn-ghost:hover { background: rgba(0,0,0,0.03); }

/* ===== Shell layout ===== */
.sp-portal-shell {
  background: #eef2f7;
  border: 1px solid #d9e1ea;
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(15,23,42,0.08);
}

.sp-portal-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  background: #ffffff;
  border-bottom: 1px solid #dbe3ec;
}

.sp-portal-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  color: var(--sp-text);
}
.sp-portal-mark {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(135deg,#f26522 0%,#c2410c 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 950;
  box-shadow: 0 10px 22px rgba(242,101,34,0.22);
}
.sp-portal-brandtext {
  font-size: 16px;
  letter-spacing: -.01em;
}

.sp-portal-user {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sp-portal-username {
  color: #475569;
  font-size: 13px;
  font-weight: 800;
}

.sp-portal-shell-body {
  display: grid;
  grid-template-columns: 252px 1fr;
  min-height: 560px;
}

.sp-portal-nav {
  background: linear-gradient(180deg,#848991 0%,#8f8f8f 100%);
  border-right: 2px solid rgba(255, 94, 0, 0.966);
  padding: 18px 14px;
}
.sp-portal-nav-title {
  font-size: 11px;
  font-weight: 950;
  color: rgba(226,232,240,0.62);
  margin: 4px 10px 14px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.sp-portal-nav-item {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 14px;
  text-decoration: none;
  color: rgba(255,255,255,0.84);
  font-weight: 850;
  border: 1px solid transparent;
  transition: background .14s ease, color .14s ease, border-color .14s ease, transform .14s ease;
}
.sp-portal-nav-item:hover {
  background: rgba(255,255,255,0.10);
  color: #ffffff;
  transform: translateX(2px);
}
.sp-portal-nav-item.is-active {
  background: #ffffff;
  color: #1f2933;
  border-color: rgba(255,255,255,0.28);
  box-shadow: 0 12px 24px rgba(0,0,0,0.16);
}
.sp-portal-nav-icon {
  display: none;
}
.sp-portal-nav-text {
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.sp-portal-shell-main {
  padding: 22px;
  background: #f3f6fa;
}

.sp-page-title { margin: 2px 0 6px; color: var(--sp-text); }
.sp-page-sub { margin: 0 0 16px; color: var(--sp-muted); }

.sp-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.sp-card {
  background: #fff;
  border: 1px solid var(--sp-border);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.04);
}
.sp-card-link { transition: transform .08s ease, box-shadow .08s ease; }
.sp-card-link:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(0,0,0,0.06); }

.sp-card-title { font-weight: 800; margin: 0 0 6px; color: var(--sp-text); }
.sp-card-desc { color: var(--sp-muted); font-size: 13px; line-height: 1.35; }

@media (max-width: 840px) {
  .sp-portal-shell-body {
    grid-template-columns: 1fr;
  }

  .sp-portal-nav {
    border-right: none;
    border-bottom: 1px solid rgba(15,23,42,0.16);
  }

  .sp-portal-nav-item {
    min-height: 42px;
  }
}


/* ===== Auth page polish (login/register) =====
   Make GeneratePress (and similar themes) get out of the way so the portal card is centered and clean.
   These selectors are intentionally broad but only apply when the body has .sp-portal-auth.
*/
body.sp-portal-auth {
  background: var(--sp-bg);
}

body.sp-portal-auth .site-header,
body.sp-portal-auth #masthead,
body.sp-portal-auth .main-navigation,
body.sp-portal-auth #site-navigation,
body.sp-portal-auth .site-footer,
body.sp-portal-auth footer.site-info {
  display: none !important;
}

body.sp-portal-auth #page,
body.sp-portal-auth .site,
body.sp-portal-auth .site-content {
  background: transparent !important;
}

body.sp-portal-auth .content-area,
body.sp-portal-auth #primary,
body.sp-portal-auth .inside-article {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

body.sp-portal-auth .entry-header,
body.sp-portal-auth header.entry-header,
body.sp-portal-auth .page-header,
body.sp-portal-auth h1.entry-title {
  display: none !important;
}

/* Improve default wp_login_form markup inside our card */
.sp-portal-page .login-username,
.sp-portal-page .login-password,
.sp-portal-page .login-remember,
.sp-portal-page .login-submit {
  margin: 0 0 14px;
}

.sp-portal-page .login-username label,
.sp-portal-page .login-password label {
  display: block;
  font-size: 13px;
  margin: 0 0 6px;
  color: var(--sp-text);
}

.sp-portal-page input[type="text"],
.sp-portal-page input[type="password"],
.sp-portal-page input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--sp-border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  background: #fff;
}

.sp-portal-page .login-submit input[type="submit"] {
  width: 100%;
  border-radius: 10px;
  padding: 11px 14px;
  background: var(--sp-orange);
  border: 1px solid var(--sp-orange);
  color: #fff;
  font-weight: 700;
}

.sp-portal-page .login-submit input[type="submit"]:hover {
  opacity: .92;
}

/* Password show/hide toggle (portal login only) */
body.sp-portal-auth .sp-password-wrap {
  position: relative;
}

body.sp-portal-auth .sp-password-wrap input[type="password"],
body.sp-portal-auth .sp-password-wrap input[type="text"] {
  padding-right: 44px;
}


body.sp-portal-auth .sp-password-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  padding: 6px;
  cursor: pointer;
  line-height: 0;

  /* Force visible icon color */
  color: var(--sp-muted);
  opacity: 0.95;
}

body.sp-portal-auth .sp-password-toggle:hover {
  color: var(--sp-text);
  opacity: 1;
}

body.sp-portal-auth .sp-password-toggle svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
/* WP login form inside our card */
.sp-portal-card #loginform p { margin: 12px 0; }
.sp-portal-card #loginform label { display:block; font-size: 13px; margin: 0 0 6px; color: var(--sp-text); }
.sp-portal-card #loginform input[type="text"],
.sp-portal-card #loginform input[type="password"]{
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--sp-border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
}

/* ===== Remember Me (tightened layout) ===== */

.sp-portal-card #loginform .login-password {
  margin-bottom: 10px; /* tighten space under password field */
}

.sp-portal-card #loginform .login-remember {
  margin: 6px 0 18px 0; /* tighter top spacing, balanced bottom spacing */
  padding-left: 2px; /* aligns checkbox perfectly with text inputs */
}

.sp-portal-card #loginform .login-remember label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 13px;
  color: var(--sp-muted);
  cursor: pointer;
}

.sp-portal-card #loginform .login-remember input[type="checkbox"] {
  margin: 0;
  transform: translateY(1px); /* optically centers checkbox with text */
}

.sp-portal-card #loginform .login-submit input[type="submit"]{
  width: 100%;
  border: none;
  border-radius: 10px;
  padding: 11px 14px;
  font-weight: 700;
  background: var(--sp-orange);
  color: #fff;
  cursor: pointer;
}
.sp-portal-card #loginform .login-submit input[type="submit"]:hover{ opacity:.92; }
/* =========================================================
   PORTAL MODE – Hide Theme Header & Footer (GeneratePress)
   Applies ONLY to portal pages (body class added by shell)
   ========================================================= */

body.sp-portal header.site-header,
body.sp-portal nav.main-navigation,
body.sp-portal .inside-header,
body.sp-portal .inside-navigation,
body.sp-portal .menu-toggle,
body.sp-portal .site-footer,
body.sp-portal footer.site-footer,
body.sp-portal .footer-widgets,
body.sp-portal .inside-footer-widgets,
body.sp-portal .footer-bar,
body.sp-portal .site-info,
body.sp-portal .entry-header,
body.sp-portal .page-header,
body.sp-portal h1.entry-title {
  display: none !important;
}

/* Also apply to login/register pages */
body.sp-portal-auth header.site-header,
body.sp-portal-auth nav.main-navigation,
body.sp-portal-auth .inside-header,
body.sp-portal-auth .inside-navigation,
body.sp-portal-auth .menu-toggle,
body.sp-portal-auth .site-footer,
body.sp-portal-auth footer.site-footer,
body.sp-portal-auth .footer-widgets,
body.sp-portal-auth .inside-footer-widgets,
body.sp-portal-auth .footer-bar,
body.sp-portal-auth .site-info,
body.sp-portal-auth .entry-header,
body.sp-portal-auth .page-header,
body.sp-portal-auth h1.entry-title {
  display: none !important;
}

/* Remove theme spacing so the portal "app" fills cleanly */
body.sp-portal .site-content,
body.sp-portal-auth .site-content,
body.sp-portal .content-area,
body.sp-portal-auth .content-area,
body.sp-portal .inside-article,
body.sp-portal-auth .inside-article {
  margin: 0 !important;
  padding: 0 !important;
}
/* =========================================================
   Make module content (Quote Configurator) full-width inside shell
   ========================================================= */

/* 2) Let the portal shell itself stretch */
body.sp-portal .sp-portal-shell,
body.sp-portal-auth .sp-portal-shell {
  width: 100% !important;
  max-width: none !important;
}

/* 3) IMPORTANT: Remove the quote configurator's max-width when it's inside the shell */
.sp-portal-shell .sp-portal-module .page {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;

  /* Avoid double-padding since the shell main area already has padding */
  padding: 0 !important;
}
/* Portal pages: remove GeneratePress container width limits */
body.sp-portal .grid-container,
body.sp-portal .inside-container,
body.sp-portal .site-content,
body.sp-portal .content-area,
body.sp-portal .site-main {
  max-width: none !important;
  width: 100% !important;
}

/* =========================================================
   Mobile polish (Portal Shell + common module patterns)
   Keeps navigation usable and prevents module overflow.
   ========================================================= */

@media (max-width: 900px) {
  /* Slightly tighter padding on mobile */
  .sp-portal-shell-main { padding: 12px; }

  /* Make sidebar items comfortable and avoid awkward spacing */
  .sp-portal-nav { padding: 10px; }
  .sp-portal-nav-item { padding: 10px 12px; }

  /* Ensure module content cannot overflow horizontally */
  .sp-portal-module,
  .sp-portal-module * {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* If a module uses the common .layout grid, force single column on small screens */
  .sp-portal-module .layout {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Buttons: full-width on mobile EXCEPT tab buttons */
  .sp-portal-module button:not(.sp-tabs-btn),
  .sp-portal-module .button,
  .sp-portal-module input[type="submit"] {
    width: 100%;
  }

  /* Ensure tabs stay compact */
  .sp-portal-module .sp-tabs-btn{
    width: auto !important;
    flex: 0 0 auto !important;
  }


  /* Images scale down */
  .sp-portal-module img { height: auto; max-width: 100%; }
}

@media (max-width: 600px) {
  /* Even more breathing room on very small screens */
  .sp-portal-shell-main { padding: 10px; }

  /* Quote configurator: reduce card padding to avoid cramped feel */
  .sp-portal-module .card { padding: 1rem !important; }
  .sp-portal-module .compressor-card { padding: 0.75rem !important; }

  /* Quote configurator: form rows should stack */
  .sp-portal-module .form-row { flex-direction: column; gap: 0.75rem; }
}
/* SmartEquip: remove shell padding so iframe can use full column width */
body.page-smartequip .sp-portal-shell-main {
  padding: 0;
}

/* Keep title spacing reasonable (optional) */
body.page-smartequip .sp-page-title {
  padding: 18px 18px 0 18px;
}

/* Give the iframe its own padding (optional) */
body.page-smartequip .sp-portal-module {
  padding: 18px;
}
/* Hide duplicate module headings (keep the shell .sp-page-title visible) */
.sp-portal-shell .sp-portal-module .sp-announcements-list-title,
.sp-portal-shell .sp-portal-module .sp-smartequip-title,
.sp-portal-shell .sp-portal-module .page > center > h1 {
  display: none !important;
}

/* Optional: tighten spacing after hiding the portable quote H1 */
.sp-portal-shell .sp-portal-module .page > center .subtitle {
  margin-top: 0 !important;
}
/* --- Industrial Quote v5: remove duplicate module header area --- */
.page-industrial-quote-v5 .sp-iqc-app .sp-iqc-header {
  display: none !important;
}



/* =========================================================
   PORTAL TITLE SYSTEM (single clean standard)
   ========================================================= */

/* 1) The ONE official page/module title: the portal shell title */
.sp-portal-shell .sp-page-title {
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin: 0 0 18px 0 !important;
  padding: 0 !important;
  letter-spacing: -0.01em;
}

/* 2) Normalize headings INSIDE modules so they don't fight the page title */
.sp-portal-shell .sp-portal-module h1 {
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 0 0 14px 0 !important;
}

.sp-portal-shell .sp-portal-module h2 {
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin: 0 0 12px 0 !important;
}

/* 3) Optional: consistent spacing for the top of each module */
.sp-portal-shell .sp-portal-module {
  padding-top: 0 !important;
}
/* =========================================================
   PORTAL SHELL HARD RESET
   Makes every portal tab render identically
   ========================================================= */

body.sp-portal,
body.sp-portal-auth {
  background: #eef2f7 !important;
}

body.sp-portal #page,
body.sp-portal-auth #page,
body.sp-portal .site,
body.sp-portal-auth .site,
body.sp-portal .site-content,
body.sp-portal-auth .site-content,
body.sp-portal .content-area,
body.sp-portal-auth .content-area,
body.sp-portal #primary,
body.sp-portal-auth #primary,
body.sp-portal .site-main,
body.sp-portal-auth .site-main,
body.sp-portal article,
body.sp-portal-auth article,
body.sp-portal .inside-article,
body.sp-portal-auth .inside-article,
body.sp-portal .entry-content,
body.sp-portal-auth .entry-content {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* GeneratePress separate container cleanup */
body.sp-portal.separate-containers .site-main,
body.sp-portal-auth.separate-containers .site-main,
body.sp-portal.separate-containers .inside-article,
body.sp-portal-auth.separate-containers .inside-article {
  margin: 0 !important;
  padding: 0 !important;
}

/* Make the portal shell the true app frame */
body.sp-portal .sp-portal-shell,
body.sp-portal-auth .sp-portal-shell {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

/* Keep header consistent on every module */
.sp-portal-header {
  min-height: 110px;
  padding: 24px 28px !important;
  box-sizing: border-box;
}

/* Keep logo/user alignment stable */
.sp-portal-header,
.sp-portal-brand,
.sp-portal-user {
  display: flex;
  align-items: center;
}

.sp-portal-header {
  justify-content: space-between;
}

/* Prevent module CSS from pushing the shell around */
.sp-portal-module {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}