.scp-client-portal,.scp-login-form{--fv-login-bg:#ffffff;--fv-login-form-bg:#ffffff;--fv-login-form-radius:12px;--fv-btn-bg:#111827;--fv-btn-bg-hover:#1f2937;--fv-btn-text:#ffffff;--fv-btn-radius:8px;--fv-input-border:#d1d5db;--fv-input-focus:#111827;--fv-input-radius:8px;--fv-login-tab-active:#111827;--fv-header-bg:#ffffff;--fv-header-text-color:#1d2327;--fv-header-text-align:left;--fv-header-logo-size:20%;--fv-accent:#111827;--fv-surface:#ffffff;--fv-page-bg:#f9fafb;--fv-profile-avatar-bg:#111827;--fv-profile-avatar-text:#ffffff;--fv-profile-btn-bg:#111827;--fv-profile-btn-text:#ffffff;--fv-folder-radius:10px;--fv-folder-spacing:8px;--fv-folder-bg:#ffffff;--fv-folder-text:#111827;--fv-folder-text-weight:500;--fv-folder-border:#e5e7eb;--fv-folder-accent-border:#111827;--fv-folder-chevron:#6b7280;--fv-folder-icon-color:#374151;--fv-folder-badge-bg:#f3f4f6;--fv-folder-badge-text:#374151;--fv-folder-hover-bg:#f9fafb;--fv-folder-actions-color:#4b5563;--fv-folder-actions-bg:#f9fafb;--fv-folder-actions-border:#e5e7eb;--fv-folder-expanded-bg:#f3f4f6;--fv-folder-expanded-text:#111827;--fv-folder-expanded-text-weight:600;--fv-folder-expanded-border:#111827;--fv-folder-expanded-accent-border:#111827;--fv-folder-expanded-chevron:#111827;--fv-folder-expanded-icon:#111827;--fv-folder-expanded-badge-bg:#111827;--fv-folder-expanded-badge-text:#ffffff;--fv-folder-expanded-actions-color:#1f2937;--fv-folder-expanded-actions-bg:#e5e7eb;--fv-folder-expanded-actions-border:#9ca3af;--fv-file-row-padding:12px;--fv-file-bg:#ffffff;--fv-file-name-color:#111827;--fv-file-name-weight:500;--fv-file-date-color:#6b7280;--fv-file-size-color:#6b7280;--fv-file-badge-bg:#f3f4f6;--fv-file-badge-text:#374151;--fv-file-hover-bg:#f9fafb;--fv-file-hover-border:#e5e7eb;--fv-download-bg:#111827;--fv-download-text:#ffffff;--fv-download-hover:#1f2937;--fv-view-text:#374151;--fv-view-border:#d1d5db;--fv-view-hover-bg:#f9fafb;--fv-nav-heading-color:#111827;--fv-nav-heading-size:18px;--fv-indent-border:#e5e7eb;--fv-modal-bg:#ffffff;--fv-modal-close:#6b7280;--fv-modal-close-hover:#f3f4f6;--fv-backdrop-opacity:0.5;--fv-footer-text:#6b7280;--fv-heading-font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--fv-body-font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}.scp-client-portal--login-view .scp-login-form{box-shadow:0 1px 3px rgba(0,0,0,0.06);}html,body{background-color:#ffffff!important;}
/* ─────────────────────────────────────────────────────────────
   Appearance editor overrides — authoritative over style.css.
   Each rule targets a selector that hard-codes a value the
   editor exposes as a CSS variable. !important + var() means
   the editor's setting actually wins.
   ───────────────────────────────────────────────────────────── */

/* Body font — applies to every selector in style.css that
   re-asserts the bundled 'Manrope' stack with !important. */
.scp-client-portal,
.scp-client-portal .welcome-message h2,
.scp-client-portal .welcome-message p,
.scp-client-portal .scp-staff-welcome h2,
.scp-client-portal .scp-staff-welcome p,
.scp-client-portal .scp-logout-link,
.scp-client-portal .files-section h3,
.scp-client-portal .scp-login,
.scp-client-portal .scp-login .description,
.scp-client-portal .scp-login .form-table th,
.scp-client-portal .scp-login .form-table th label,
.scp-client-portal .scp-login .form-table input[type="text"],
.scp-client-portal .scp-login .form-table input[type="password"],
.scp-client-portal .scp-login .scp-button-primary,
.scp-zip-toast {
    font-family: var(--fv-body-font) !important;
}

/* Heading font — applies to every heading the bundle
   force-locked to 'Manrope'. */
.scp-client-portal h1,
.scp-client-portal h2,
.scp-client-portal h3,
.scp-client-portal h4,
.scp-client-portal h5,
.scp-client-portal h6,
.scp-client-portal .welcome-message h2,
.scp-client-portal .scp-staff-welcome h2,
.scp-client-portal .files-section h3,
.scp-client-portal .scp-login h2 {
    font-family: var(--fv-heading-font) !important;
}

/* Page background — root scrolling container.
   Use background-color only so derived_blocks() can freely set
   background-image on the login view without being overridden. */
.scp-client-portal {
    background-color: var(--fv-page-bg, #ffffff) !important;
}

/* Surface — modals, project group panels, toasts. */
.scp-client-portal .scp-viewer-box,
.scp-client-portal .scp-viewer-body,
.scp-client-portal .scp-project-group,
.scp-zip-toast {
    background: var(--fv-surface) !important;
}

/* Folder cards — collapsed state. */
.scp-client-portal .scp-folder-header {
    background: var(--fv-folder-bg) !important;
    border-color: var(--fv-folder-border, #c8ceca) !important;
    border-left-color: var(--fv-folder-accent-border, #3a7d6e) !important;
}
.scp-client-portal .scp-folder-header:hover {
    background: var(--fv-folder-hover-bg, color-mix(in srgb, var(--fv-folder-bg) 92%, #000)) !important;
    border-left-color: var(--fv-folder-accent-border, #3a7d6e) !important;
}
.scp-client-portal .scp-folder-header strong,
.scp-client-portal .scp-folder-header .scp-folder-name,
.scp-client-portal .scp-folder-header .scp-folder-label {
    color: var(--fv-folder-text) !important;
    font-weight: var(--fv-folder-text-weight, 500) !important;
}
.scp-client-portal .scp-folder-chevron {
    color: var(--fv-folder-chevron, #7a8a82) !important;
}
.scp-client-portal .scp-folder-type-icon,
.scp-client-portal .scp-folder-header > .scp-folder-type-icon {
    color: var(--fv-folder-icon-color, #2d6b5e) !important;
}
.scp-client-portal .scp-folder-count,
.scp-client-portal .scp-folder-file-count {
    background: var(--fv-folder-badge-bg, #e4ece8) !important;
    color: var(--fv-folder-badge-text, #3d5149) !important;
}

/* Folder cards — expanded state. */
.scp-client-portal .scp-folder-node:not(.collapsed) .scp-folder-header {
    background: var(--fv-folder-expanded-bg, #d6ebe4) !important;
    border-color: var(--fv-folder-expanded-border, #3a7d6e) !important;
    border-left-color: var(--fv-folder-expanded-accent-border, #2d6b5e) !important;
}
.scp-client-portal .scp-folder-node:not(.collapsed) .scp-folder-label {
    color: var(--fv-folder-expanded-text, #14493b) !important;
    font-weight: var(--fv-folder-expanded-text-weight, 600) !important;
}
.scp-client-portal .scp-folder-node:not(.collapsed) .scp-folder-chevron {
    color: var(--fv-folder-expanded-chevron, #2d6b5e) !important;
}
.scp-client-portal .scp-folder-node:not(.collapsed) .scp-folder-type-icon,
.scp-client-portal .scp-folder-node:not(.collapsed) .scp-folder-header > .scp-folder-type-icon {
    color: var(--fv-folder-expanded-icon, #2d6b5e) !important;
}
.scp-client-portal .scp-folder-node:not(.collapsed) .scp-folder-count,
.scp-client-portal .scp-folder-node:not(.collapsed) .scp-folder-file-count {
    background: var(--fv-folder-expanded-badge-bg, #3a7d6e) !important;
    color: var(--fv-folder-expanded-badge-text, #ffffff) !important;
    border-color: var(--fv-folder-expanded-badge-bg, #3a7d6e) !important;
}

/* Folder action icons — collapsed state. */
.scp-client-portal .scp-folder-node.collapsed .scp-fe-zip-btn,
.scp-client-portal .scp-folder-node.collapsed .scp-fe-spreadsheet-btn {
    color: var(--fv-folder-actions-color, #4a5e55) !important;
    background: var(--fv-folder-actions-bg, #f7faf9) !important;
    border-color: var(--fv-folder-actions-border, #d4e6e0) !important;
}

/* Folder action icons — expanded state. */
.scp-client-portal .scp-folder-node:not(.collapsed) .scp-fe-zip-btn,
.scp-client-portal .scp-folder-node:not(.collapsed) .scp-fe-spreadsheet-btn {
    color: var(--fv-folder-expanded-actions-color, #2d6b5e) !important;
    background: var(--fv-folder-expanded-actions-bg, #e8f4f0) !important;
    border-color: var(--fv-folder-expanded-actions-border, #8fbfb3) !important;
}

/* File rows — background, text, hover, meta. */
.scp-client-portal .file-item {
    background: var(--fv-file-bg) !important;
}
.scp-client-portal .file-item:hover {
    background: var(--fv-file-hover-bg, #f4f7f5) !important;
    border-color: var(--fv-file-hover-border, #dde3e0) !important;
}
.scp-client-portal .file-item .file-name {
    color: var(--fv-file-name-color, var(--fv-file-text, #1d2327)) !important;
    font-weight: var(--fv-file-name-weight, 600) !important;
}
.scp-client-portal .file-item .file-meta {
    color: var(--fv-file-date-color, var(--fv-file-meta, #7a8a82)) !important;
}
.scp-client-portal .file-item .file-date {
    color: var(--fv-file-date-color, var(--fv-file-meta, #7a8a82)) !important;
}
.scp-client-portal .file-item .file-size {
    color: var(--fv-file-size-color, var(--fv-file-meta, #7a8a82)) !important;
}
.scp-client-portal .scp-file-type {
    background: var(--fv-file-badge-bg, #eef2f0) !important;
    color: var(--fv-file-badge-text, #50575e) !important;
}

/* Navigation — section headings, project names, indent border. */
.scp-client-portal .files-section h3 {
    color: var(--fv-nav-heading-color, #1d2327) !important;
    font-size: var(--fv-nav-heading-size, 18px) !important;
}
.scp-client-portal .scp-project-header {
    color: var(--fv-accent, #3a7d6e) !important;
    font-size: var(--fv-nav-heading-size, 18px) !important;
}
.scp-client-portal .scp-folder-content {
    border-left-color: var(--fv-indent-border, #c2d9d2) !important;
}

/* Modals — viewer background, close button. */
.scp-client-portal .scp-viewer-box {
    background: var(--fv-modal-bg, #ffffff) !important;
}
.scp-client-portal .scp-viewer-close {
    color: var(--fv-modal-close, #50575e) !important;
}
.scp-client-portal .scp-viewer-close:hover {
    background: var(--fv-modal-close-hover, #e0e0e0) !important;
}
.scp-client-portal .scp-viewer-backdrop {
    background: rgba(0,0,0, var(--fv-backdrop-opacity, 0.6)) !important;
}

/* Footer text color. */
.scp-client-portal .scp-portal-footer,
.scp-client-portal .scp-portal-footer__text {
    color: var(--fv-footer-text, #646970) !important;
}

/* Download button (non-variant base). */
.scp-client-portal a.download-btn:not(.scp-view-btn) {
    background: var(--fv-download-bg, #1d2327) !important;
    color: var(--fv-download-text, #ffffff) !important;
}
.scp-client-portal a.download-btn:not(.scp-view-btn):hover {
    background: var(--fv-download-hover, #2c3338) !important;
}

/* View button. */
.scp-client-portal .scp-view-btn {
    color: var(--fv-view-text, #50575e) !important;
    border-color: var(--fv-view-border, #dcdcde) !important;
}
.scp-client-portal .scp-view-btn:hover {
    background: var(--fv-view-hover-bg, #f4f7f5) !important;
}

/* Welcome / staff strip header background. */
.scp-client-portal .scp-staff-header,
.scp-client-portal .welcome-message {
    background: var(--fv-header-bg) !important;
}

/* Header text alignment, color, logo sizing —
   driven by CSS variables so we don't need inline styles. */
.scp-client-portal .scp-staff-welcome h2,
.scp-client-portal .scp-staff-welcome p {
    text-align: var(--fv-header-text-align, left) !important;
}
.scp-client-portal .scp-staff-welcome h2,
.scp-client-portal .scp-staff-welcome p {
    color: var(--fv-header-text-color, inherit) !important;
}
.scp-client-portal .scp-header-logo {
    display: block !important;
    width: var(--fv-header-logo-size, 20%) !important;
    max-width: 100% !important;
    height: auto !important;
    margin-bottom: 12px !important;
}
.scp-client-portal .scp-header-logo--left {
    margin-left: 0 !important;
    margin-right: auto !important;
}
.scp-client-portal .scp-header-logo--center {
    margin-left: auto !important;
    margin-right: auto !important;
}
.scp-client-portal .scp-header-logo--right {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* Accent — focus rings, brand chrome, active tab text,
   project headers. Folder chevron/icon/badge have their own
   dedicated variables above and must NOT be overridden here. */
.scp-client-portal .scp-folder-header:focus-visible,
.scp-client-portal .scp-folder-node:not(.collapsed) .scp-folder-header {
    outline-color: var(--fv-accent) !important;
    border-color: var(--fv-accent) !important;
}
/* Login tabs — dedicated active color; beat theme button/accent styles. */
body .scp-client-portal .scp-login-tab,
body .scp-client-portal.scp-client-portal--login-view button.scp-login-tab,
body .elementor .scp-client-portal .scp-login-tab,
body .elementor-widget-container .scp-client-portal .scp-login-tab {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #50575e !important;
    font-family: var(--fv-body-font) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
body .scp-client-portal .scp-login-tab:hover,
body .scp-client-portal.scp-client-portal--login-view button.scp-login-tab:hover,
body .elementor .scp-client-portal .scp-login-tab:hover,
body .elementor-widget-container .scp-client-portal .scp-login-tab:hover {
    background: rgba(0, 0, 0, 0.04) !important;
    color: #1d2327 !important;
    box-shadow: none !important;
    transform: none !important;
}
body .scp-client-portal .scp-login-tab--active,
body .scp-client-portal .scp-login-tab--active:hover,
body .scp-client-portal .scp-login-tab--active:focus,
body .scp-client-portal.scp-client-portal--login-view button.scp-login-tab.scp-login-tab--active,
body .scp-client-portal.scp-client-portal--login-view button.scp-login-tab.scp-login-tab--active:hover,
body .elementor .scp-client-portal .scp-login-tab--active,
body .elementor .scp-client-portal .scp-login-tab--active:hover,
body .elementor-widget-container .scp-client-portal .scp-login-tab--active,
body .elementor-widget-container .scp-client-portal .scp-login-tab--active:hover {
    color: var(--fv-login-tab-active, var(--fv-accent)) !important;
    background: var(--fv-login-form-bg, #ffffff) !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}
body .scp-client-portal .scp-login-tab svg,
body .elementor .scp-client-portal .scp-login-tab svg,
body .elementor-widget-container .scp-client-portal .scp-login-tab svg {
    stroke: currentColor !important;
}
.scp-client-portal .scp-toggle-password:hover,
.scp-client-portal .scp-toggle-password:focus,
.scp-client-portal .scp-fe-spreadsheet-btn:hover,
.scp-client-portal .scp-fe-zip-btn:hover {
    color: var(--fv-accent) !important;
}
.scp-client-portal .scp-fe-spreadsheet-btn:hover,
.scp-client-portal .scp-fe-zip-btn:hover {
    border-color: var(--fv-accent) !important;
}

/* Primary CTA buttons — download, login submit. */
.scp-client-portal .download-btn,
.scp-client-portal .download-btn:link,
.scp-client-portal .download-btn:visited,
.scp-client-portal .scp-login .scp-button-primary {
    background: var(--fv-btn-bg) !important;
    color: var(--fv-btn-text) !important;
    border-radius: var(--fv-btn-radius) !important;
    border-color: var(--fv-btn-bg) !important;
}
.scp-client-portal .download-btn:hover,
.scp-client-portal .download-btn:focus,
.scp-client-portal .scp-login .scp-button-primary:hover,
.scp-client-portal .scp-login .scp-button-primary:focus {
    background: var(--fv-btn-bg-hover) !important;
    border-color: var(--fv-btn-bg-hover) !important;
    color: var(--fv-btn-text) !important;
}
/* Sign-out button — uses dashboard profile color so Reset Dashboard resets it. */
.scp-client-portal .scp-logout-link,
.scp-client-portal .scp-logout-link:link,
.scp-client-portal .scp-logout-link:visited {
    background: var(--fv-profile-btn-bg, var(--fv-btn-bg)) !important;
    color: var(--fv-profile-btn-text, var(--fv-btn-text)) !important;
    border-radius: var(--fv-btn-radius) !important;
    border-color: var(--fv-profile-btn-bg, var(--fv-btn-bg)) !important;
}
.scp-client-portal .scp-logout-link:hover,
.scp-client-portal .scp-logout-link:focus,
.scp-client-portal .scp-logout-link:active {
    background: var(--fv-profile-btn-bg, var(--fv-btn-bg-hover)) !important;
    border-color: var(--fv-profile-btn-bg, var(--fv-btn-bg-hover)) !important;
    color: var(--fv-profile-btn-text, var(--fv-btn-text)) !important;
    opacity: 0.9;
}

/* Secondary action buttons — view, zip, spreadsheet.
   Follow input border + button radius. */
.scp-client-portal .scp-view-btn,
.scp-client-portal .scp-fe-zip-btn,
.scp-client-portal .scp-fe-spreadsheet-btn {
    border-color: var(--fv-input-border) !important;
    border-radius: var(--fv-btn-radius) !important;
}

/* Text inputs — borders + radii + focus. */
.scp-client-portal .scp-form-group input[type="text"],
.scp-client-portal .scp-form-group input[type="email"],
.scp-client-portal .scp-form-group input[type="password"],
.scp-client-portal .scp-login .form-table input[type="text"],
.scp-client-portal .scp-login .form-table input[type="password"] {
    border-color: var(--fv-input-border) !important;
    border-radius: var(--fv-input-radius) !important;
}
.scp-client-portal .scp-form-group input:focus,
.scp-client-portal .scp-login .form-table input:focus {
    border-color: var(--fv-input-focus) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Folder cards. */
.scp-client-portal .scp-folder-header,
.scp-client-portal .scp-folder-node {
    border-radius: var(--fv-folder-radius) !important;
}
.scp-client-portal .scp-folder-node + .scp-folder-node {
    margin-top: var(--fv-folder-spacing, 8px) !important;
}

/* File row padding. */
.scp-client-portal .file-item {
    padding: var(--fv-file-row-padding, 12px) !important;
}

/* Login: form background + radius. Targets both the
   login-view scoped selector and the unscoped one that
   appears later in style.css and otherwise wins. */
.scp-client-portal--login-view .scp-login-form,
.scp-client-portal .scp-login-form {
    background: var(--fv-login-form-bg) !important;
    border-radius: var(--fv-login-form-radius) !important;
}
.scp-client-portal--login-view {
    background-color: var(--fv-login-bg, transparent) !important;
}