/*
 * hub-profile.css
 * Styles shared by the HubProfile (edit) and ViewHubProfile (read-only) pages.
 * Scoped using the .hub-profile-page class that is applied on both views,
 * so none of these rules bleed onto the rest of the site.
 */

/* ── CSS custom properties (scoped) ──────────────────────────────────────── */
.hub-profile-page {
    --fs-yellow:     #EFCB17;
    --fs-yellow-alt: #FFCC05;
    --grey-10:       #f4f4f4;
    --grey-20:       #e0e0e0;
    --grey-30:       #c6c6c6;
    --grey-50:       #8d8d8d;
    --grey-70:       #6f6f6f;
    --grey-100:      #161616;
    --red-error:     #da1e28;
    --blue-100:      #214775;
    --rounded-32:    32px;
}

/* ── Page shell ───────────────────────────────────────────────────────────── */
.hub-profile-page .content-inner  { margin-top: -40px; }
.hub-profile-page .content-column { padding: 60px 28px; }

/* ── Two-panel flex layout (no Bootstrap negative margins) ───────────────── */
.hub-profile-page .profile-panels      { display: flex; align-items: stretch; width: 100%; }
.hub-profile-page .profile-panel-left  { flex: 0 0 58.333%; width: 58.333%; box-sizing: border-box; }
.hub-profile-page .profile-panel-right { flex: 0 0 41.667%; width: 41.667%; box-sizing: border-box;
                                         background: linear-gradient(190deg, #FFF 0.68%, #E0E0E0 99.4%); }

@media (max-width: 991px) {
    .hub-profile-page .profile-panels,
    .hub-profile-page .profile-panels      { flex-direction: column; }
    .hub-profile-page .profile-panel-left,
    .hub-profile-page .profile-panel-right { flex: none; width: 100%; }
}

/* ── Typography ───────────────────────────────────────────────────────────── */
.hub-profile-page .section-heading {
    font-size: 24px;
    font-weight: 300;
    color: var(--grey-100);
    margin-bottom: 32px;
}

/* ── Shared button ────────────────────────────────────────────────────────── */
.hub-profile-page .btn-app {
    border-radius: var(--rounded-32);
    padding: 12px 32px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    min-width: 250px;
}

.hub-profile-page .mt-6 { margin-top: 4rem !important; }

/* ── Right-column card ────────────────────────────────────────────────────── */
.hub-profile-page .right-card {
    background: #fff;
    border: 1px solid var(--grey-30);
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 32px;
}
.hub-profile-page .right-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--grey-100);
    text-align: center;
    margin-bottom: 20px;
}

/* ── Avatar ───────────────────────────────────────────────────────────────── */
.hub-profile-page .profile-img-wrap {
    position: relative;
    width: 164px;
    height: 164px;
    margin: 0 auto 12px;
}
.hub-profile-page .profile-img-wrap img.avatar-main {
    width: 164px;
    height: 164px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--fs-yellow);
    display: block;
}
/* Edit overlay (edit page only) */
.hub-profile-page .profile-img-edit {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 36px;
    height: 36px;
    background: var(--fs-yellow);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--grey-100);
    cursor: pointer;
    border: 2px solid #fff;
}
.hub-profile-page .profile-img-hint {
    font-size: 14px;
    color: var(--grey-50);
    text-align: center;
    line-height: 1.4;
}

/* ── Bio ──────────────────────────────────────────────────────────────────── */
.hub-profile-page .bio-heading {
    font-size: 20px;
    font-weight: 600;
    color: var(--grey-100);
    margin-bottom: 8px;
}
.hub-profile-page .bio-desc {
    font-size: 16px;
    color: var(--grey-100);
    line-height: 24px;
    margin-bottom: 16px;
}
.hub-profile-page .bio-body {
    background: #fff;
    border: 1px solid var(--grey-30);
    border-radius: 8px;
    min-height: 120px;
    padding: 24px 28px;
    font-size: 16px;
    line-height: 24px;
    color: var(--grey-100);
}
.hub-profile-page .bio-body.empty {
    color: var(--grey-50);
    font-style: italic;
}

/* ── Rich-text editor (edit page only) ───────────────────────────────────── */
.hub-profile-page .rte-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-bottom: 0;
}
.hub-profile-page .rte-btn {
    width: 48px;
    height: 48px;
    background: #fff;
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--grey-100);
    cursor: pointer;
    flex-shrink: 0;
}
.hub-profile-page .rte-btn:hover  { background: var(--grey-10); }
.hub-profile-page .rte-btn.active { background: var(--grey-20); }

.hub-profile-page .rte-area {
    background: #fff;
    border: 1px solid var(--grey-30);
    border-radius: 8px;
    min-height: 200px;
    padding: 24px 28px;
    font-size: 16px;
    line-height: 24px;
    color: var(--grey-100);
    width: 100%;
    outline: none;
}

/* ── Privacy card ─────────────────────────────────────────────────────────── */
.hub-profile-page .privacy-card {
    background: #fff;
    border: 1px solid var(--grey-30);
    border-radius: 8px;
    padding: 28px 24px;
}
.hub-profile-page .privacy-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--grey-100);
    text-align: center;
    margin-bottom: 20px;
}
.hub-profile-page .privacy-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 500;
}
.hub-profile-page .privacy-badge .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.hub-profile-page .privacy-badge .dot.on  { background: #24a148; }
.hub-profile-page .privacy-badge .dot.off { background: var(--grey-50); }
.hub-profile-page .privacy-radio-label {
    font-size: 16px;
    color: var(--grey-100);
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
}
.hub-profile-page .privacy-radio {
    width: 22px;
    height: 22px;
    accent-color: var(--grey-100);
    flex-shrink: 0;
}
.hub-profile-page .privacy-note {
    font-size: 14px;
    color: var(--grey-100);
    line-height: 20px;
    margin-top: 16px;
}
.hub-profile-page .privacy-note .coming-soon { color: var(--grey-70); }

/* ── Carbon-style form inputs (edit page only) ────────────────────────────── */
.hub-profile-page .carbon-form-group        { margin-bottom: 40px; }
.hub-profile-page .carbon-form-group label  { margin-bottom: 10px; font-weight: 600; }
.hub-profile-page .carbon-form-group label .req-hint { font-weight: 500; color: var(--grey-50); }
.hub-profile-page .carbon-form-group label .req-star  { color: var(--red-error); }

.hub-profile-page .carbon-form-control {
    border: none;
    border-bottom: 2px solid var(--grey-30);
    outline: none;
    width: 100%;
    font-size: 16px;
    line-height: 24px;
    color: var(--grey-100);
    background: #fff;
    padding: 10px;
}
.hub-profile-page .carbon-form-control:hover          { border-bottom: 2px solid var(--blue-100); }
.hub-profile-page .carbon-form-control:disabled       { background: var(--grey-10); }
.hub-profile-page .carbon-form-control:disabled:hover { border-bottom: 2px solid var(--grey-30); }

/* ── Read-only field rows (view page only) ────────────────────────────────── */
.hub-profile-page .profile-field { margin-bottom: 40px; }
.hub-profile-page .profile-field-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--grey-50);
    margin-bottom: 6px;
    letter-spacing: .04em;
}
.hub-profile-page .profile-field-value {
    font-size: 16px;
    color: var(--grey-100);
    border-bottom: 2px solid var(--grey-20);
    padding: 10px 10px 10px 0;
    line-height: 24px;
    min-height: 44px;
}
.hub-profile-page .profile-field-value.empty {
    color: var(--grey-50);
    font-style: italic;
}

/* -- Password toggle button inside carbon-style input-group -------- */

/* Bootstrap input-group uses flex layout but carbon-form-control has
   width:100% which overrides it and wraps the toggle button. This rule
   resets the width so the flex item sizing takes over correctly. */
.hub-profile-page .input-group .carbon-form-control {
    flex: 1 1 auto;
    width: 1%;
}

.hub-profile-page .carbon-pw-toggle {
    border: none;
    border-left: 1px solid var(--grey-30);
    border-bottom: 2px solid var(--grey-30);
    border-radius: 0;
    background: #fff;
    color: var(--grey-50);
    padding: 10px 12px;
}

    .hub-profile-page .carbon-pw-toggle:hover,
    .hub-profile-page .carbon-pw-toggle:active
    {
        border-left: 1px solid var(--grey-30);
    border-bottom: 2px solid var(--grey-30);
        color: var(--grey-100);
        background-color: #f8f9fa;
    }

.hub-profile-page .carbon-pw-toggle:focus {
    box-shadow: none;
    outline: none;
}