/*
 * PsySocNet UI overrides
 *
 * Global module layer for product screens.
 * Keep global brand tokens in theme CSS and use this file for product-specific
 * screens that should still look like one coherent application.
 */

:root {
    --psn-ui-surface: rgba(255, 255, 255, 0.64);
    --psn-ui-surface-strong: rgba(255, 255, 255, 0.76);
    --psn-ui-surface-soft: rgba(246, 249, 238, 0.72);
    --psn-ui-border: rgba(18, 58, 42, 0.1);
    --psn-ui-border-strong: rgba(111, 176, 46, 0.22);
    --psn-ui-shadow: 0 16px 40px rgba(18, 58, 42, 0.06);
    --psn-ui-shadow-soft: 0 10px 24px rgba(18, 58, 42, 0.045);
    --psn-ui-glass-surface: rgba(18, 58, 42, 0.025);
    --psn-ui-glass-border: rgba(111, 176, 46, 0.24);
    --psn-ui-glass-shadow: 0 26px 70px rgba(18, 58, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(18, 58, 42, 0.12);
    --psn-ui-glass-filter: blur(10px) saturate(130%) contrast(108%);
    --psn-ui-radius-card: 20px;
    --psn-ui-radius-chip: 999px;
    --psn-ui-radius-control: 15px;
    --psn-ui-text: #234538;
    --psn-ui-muted: #667c71;
    --psn-ui-muted-soft: #7f9388;
    --psn-ui-title: #123a2a;
    --psn-ui-accent: #6fb02e;
    --psn-ui-accent-deep: #4f8f1f;
    --psn-ui-accent-soft: rgba(181, 226, 108, 0.18);
}

.psn-tests-wrap,
.psn-wrap,
.psn-values36-wrap {
    max-width: 1040px !important;
}

.psn-tests-card,
.psn-panel,
.psn-values36-panel,
#psn-profile-relation-bar-v6,
.psn-test,
.psn-card,
.psn-values36-box {
    background: var(--psn-ui-surface) !important;
    border: 1px solid var(--psn-ui-glass-border) !important;
    border-radius: var(--psn-ui-radius-card) !important;
    box-shadow: var(--psn-ui-glass-shadow) !important;
    -webkit-backdrop-filter: var(--psn-ui-glass-filter);
    backdrop-filter: var(--psn-ui-glass-filter);
}

.buddypress-wrap .bp-wrap,
.psn-tests-card,
.psn-panel {
    background: var(--psn-ui-glass-surface) !important;
    -webkit-backdrop-filter: var(--psn-ui-glass-filter);
    backdrop-filter: var(--psn-ui-glass-filter);
}

.buddypress-wrap .bp-navs.vertical,
.buddypress-wrap .bp-navs,
.buddypress-wrap .bp-wrap .bp-navs,
.buddypress-wrap .bp-wrap .bp-navs ul,
.buddypress-wrap .bp-wrap .bp-navs > ul {
    background: var(--psn-ui-glass-surface) !important;
    border: 1px solid var(--psn-ui-glass-border) !important;
    -webkit-backdrop-filter: var(--psn-ui-glass-filter);
    backdrop-filter: var(--psn-ui-glass-filter);
    border-radius: var(--psn-ui-radius-card) !important;
}

.psn-test,
.psn-card,
.psn-values36-box,
#psn-profile-relation-bar-v6 .psn-profile-relation-right,
#psn-profile-relation-bar-v6 .psn-profile-relation-left {
    background: rgba(255, 255, 255, 0.82) !important;
}

.psn-tests-card,
.psn-panel,
.psn-values36-panel {
    padding: 22px !important;
}

.psn-test,
.psn-card {
    padding: 18px !important;
    transition: transform .14s ease, box-shadow .18s ease, border-color .18s ease;
}

.psn-test:hover,
.psn-card:hover {
    transform: translateY(-1px);
    border-color: var(--psn-ui-border-strong) !important;
    box-shadow: 0 18px 42px rgba(18, 58, 42, 0.09) !important;
}

.psn-tests-card,
.psn-wrap > .psn-panel {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
}

.psn-tests-card h2,
.psn-panel h2,
.psn-values36-panel h1,
.psn-values36-panel h2,
.psn-values36-box-title,
.psn-profile-relation-title {
    color: var(--psn-ui-title) !important;
    letter-spacing: -0.02em;
}

.psn-test-title a,
.psn-name a {
    color: var(--psn-ui-title) !important;
    text-decoration: none !important;
}

.psn-test-title a:hover,
.psn-name a:hover {
    color: var(--psn-ui-accent-deep) !important;
}

.psn-test-about,
.psn-test-meta,
.psn-meta,
.psn-note,
.psn-score-label,
.psn-values36-muted,
.psn-values36-kpi,
.psn-values36-counter,
.psn-values36-msg,
.psn-profile-relation-hint,
.psn-chat-rating-text {
    color: var(--psn-ui-muted) !important;
}

.psn-badge,
.psn-values36-badge,
.psn-profile-relation-badge {
    background: rgba(255, 255, 255, 0.54) !important;
    border: 1px solid var(--psn-ui-border) !important;
    color: var(--psn-ui-title) !important;
    border-radius: var(--psn-ui-radius-chip) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.psn-badge.ok {
    background: rgba(181, 226, 108, 0.18) !important;
    border-color: rgba(111, 176, 46, 0.26) !important;
    color: var(--psn-ui-title) !important;
}

.psn-badge.no {
    background: rgba(255, 255, 255, 0.48) !important;
    color: var(--psn-ui-muted) !important;
}

.psn-btn,
.psn-values36-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 11px 16px !important;
    border-radius: var(--psn-ui-radius-control) !important;
    border: 1px solid var(--psn-ui-border) !important;
    background: rgba(255, 255, 255, 0.62) !important;
    color: var(--psn-ui-title) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: var(--psn-ui-shadow-soft);
    transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}

.psn-btn:hover,
.psn-values36-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(111, 176, 46, 0.28) !important;
    box-shadow: 0 14px 28px rgba(18, 58, 42, 0.08);
}

.psn-btn.primary,
.psn-values36-btn.primary {
    background: linear-gradient(180deg, #7abd3b 0%, #67aa2d 100%) !important;
    border-color: #67aa2d !important;
    color: #fff !important;
}

.psn-btn.secondary {
    background: rgba(181, 226, 108, 0.14) !important;
    border-color: rgba(111, 176, 46, 0.28) !important;
    color: var(--psn-ui-title) !important;
}

.psn-btn.secondary:hover {
    background: rgba(181, 226, 108, 0.22) !important;
}

.psn-row label {
    font-size: 12px !important;
    color: var(--psn-ui-muted-soft) !important;
    font-weight: 600;
}

.psn-row input,
.psn-row select {
    min-height: 42px;
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid var(--psn-ui-border) !important;
    border-radius: 14px !important;
    color: var(--psn-ui-text) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.psn-row input:focus,
.psn-row select:focus {
    outline: none;
    border-color: rgba(111, 176, 46, 0.34) !important;
    box-shadow: 0 0 0 3px rgba(181, 226, 108, 0.18) !important;
}

.psn-card-top,
.psn-test-top {
    gap: 16px !important;
}

.psn-avatar {
    width: 76px !important;
    height: 76px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(18, 58, 42, 0.08) !important;
    box-shadow: 0 6px 16px rgba(18, 58, 42, 0.08);
}

.psn-temp-code {
    margin-top: 6px !important;
    color: var(--psn-ui-title) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.psn-values36-box {
    background: rgba(247, 249, 252, 0.74) !important;
    border-radius: 24px !important;
    padding: 18px !important;
}

.psn-values36-detail h3 {
    color: var(--psn-ui-title) !important;
}

.psn-values36-progress,
.psn-ipip120-progress {
    background: rgba(224, 231, 240, 0.72) !important;
}

.psn-values36-progress > div,
.psn-ipip120-progress > div {
    background: linear-gradient(90deg, #8ac843 0%, #6fb02e 100%) !important;
}

.psn-values36-q,
.psn-ipip120-q {
    color: var(--psn-ui-title) !important;
}

.psn-values36-opt,
.psn-ipip120-opt {
    border-radius: 16px !important;
    box-shadow: none !important;
}

.psn-values36-opt.is-active,
.psn-ipip120-opt.is-active {
    box-shadow: 0 0 0 3px rgba(18, 58, 42, 0.08) !important;
}

#psn-profile-relation-bar-v6 {
    gap: 22px !important;
    padding: 18px 20px !important;
}

.psn-profile-relation-badge {
    min-width: 86px !important;
    font-size: 20px;
    font-weight: 800 !important;
}

.psn-profile-relation-star {
    transition: transform .12s ease, color .12s ease;
}

.psn-profile-relation-star:hover {
    transform: translateY(-1px);
}

.bp-messages-wrap .chat-header {
    background: rgba(255, 255, 255, 0.66) !important;
    border-bottom: 1px solid rgba(18, 58, 42, 0.08) !important;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.bp-messages-wrap .bm-list,
.bp-messages-wrap .bm-right-side,
.bp-messages-wrap .bm-left-side {
    background: transparent !important;
}

.bp-messages-wrap .threads-list .thread,
.bp-messages-wrap .threads-list .bm-conversation,
.bp-messages-wrap .bm-list .bm-thread {
    border-radius: 16px !important;
    transition: background-color .14s ease, box-shadow .16s ease;
}

.bp-messages-wrap .threads-list .thread:hover,
.bp-messages-wrap .threads-list .bm-conversation:hover,
.bp-messages-wrap .bm-list .bm-thread:hover {
    background: rgba(181, 226, 108, 0.1) !important;
}

.bp-messages-wrap .bm-list .bm-message .bm-message-content {
    border-radius: 18px !important;
    box-shadow: 0 6px 16px rgba(18, 58, 42, 0.04);
}

.bp-messages-wrap .bm-list .bm-message.bm-current-user .bm-message-content {
    background: rgba(233, 246, 214, 0.68) !important;
}

.bp-messages-wrap .bm-list .bm-message:not(.bm-current-user) .bm-message-content {
    background: rgba(255, 255, 255, 0.66) !important;
}

.psn-chat-rating-header {
    gap: 10px !important;
}

.psn-chat-rating-text {
    max-width: 340px;
}

@media (max-width: 900px) {
    .psn-panel,
    .psn-values36-panel {
        padding: 18px !important;
    }

    .psn-card,
    .psn-test {
        padding: 16px !important;
    }

    .psn-profile-relation-badge {
        min-width: 78px !important;
        font-size: 18px;
    }
}