/* ---------------------------------------------------------------------------
   GFunnel — the PROFILE CARD (inc/gf_profile_card.inc.php).

   The person profile's own identity band, moved by script into a card at the
   head of the Overview's left column. These rules only change its SHAPE while
   it is inside the card (`.gfpc.gfpc-on`); outside the card nothing here
   matches, so the band at the top of the page is exactly as it was.

   Why `!important`: the band is styled by tailwind utilities in artificer's
   template (`h-64 lg:h-80`, `-mt-24`, `lg:absolute`, `h-48 w-48`, `truncate`),
   by gf_profile_band.css and by gf_header.css - three sources, two of them
   viewport media queries written for a full-width band. Inside a 288px card
   every one of those layout decisions is wrong, so the card asserts its own.
   --------------------------------------------------------------------------- */

.gfpc { padding: 0 !important; }
/* NOT overflow:hidden. The action row's "More" (⋮) list and the "Edit cover
   photo" menu are popups drawn INSIDE the band (BxDolMenuMoreAuto opens with
   moveToDocRoot:false), so a clipping card cut them off. The card's rounded
   top corners are set on every layer of the band instead. They are NAMED, not
   `inherit`: the band sits inside .gfpc-band, which had no radius, so inherit
   handed every layer 0 and the cover drew square corners on a rounded card. */
.gfpc.gfpc-on .gfpc-band,
.gfpc.gfpc-on .bx-menu-toolbar-padding,
.gfpc.gfpc-on .bx-base-pofile-cover-wrapper,
.gfpc.gfpc-on .bx-base-pofile-cover,
.gfpc.gfpc-on .bx-base-pofile-cover-image-wrp,
.gfpc.gfpc-on div.bx-base-pofile-cover-image,
.gfpc.gfpc-on img.bx-base-pofile-cover-image,
.gfpc.gfpc-on p.bx-base-pofile-cover-image {
    border-top-left-radius: var(--gfd-radius, 14px) !important;
    border-top-right-radius: var(--gfd-radius, 14px) !important;
}
.gfpc-band:empty { display: none; }
/* With JS off and nothing to say, there is no card at all. */
.gfpc:not(.gfpc-on):not(:has(.gfpc-facts)) { display: none; }

/* The About facts under the band (or, with JS off, the whole card). */
.gfpc-facts { padding: 16px 18px 18px; }
.gfpc-h { margin: 0 0 10px; font-size: 15px; font-weight: 700; }
.gfpc.gfpc-on .gfpc-h { display: none; }
.gfpc.gfpc-on .gfpc-facts { border-top: 1px solid rgba(15, 23, 42, .08); padding-top: 14px; }
.dark .gfpc.gfpc-on .gfpc-facts { border-top-color: rgba(255, 255, 255, .1); }
.gfpc .gfdash-about-bio { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; }
.gfpc .gfdash-about-rows { display: flex; flex-direction: column; gap: 8px; }
.gfpc .gfdash-about-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #475569; }
.dark .gfpc .gfdash-about-row { color: #cbd5e1; }
.gfpc .gfdash-about-row svg { flex: none; }

/* --- The band, reshaped ---------------------------------------------------- */
.gfpc.gfpc-on .bx-menu-toolbar-padding,
.gfpc.gfpc-on .bx-base-pofile-cover-wrapper {
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
}
.gfpc.gfpc-on .bx-base-pofile-cover { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.gfpc.gfpc-on .bx-base-pofile-cover-image-wrp { padding: 0 !important; overflow: visible !important; }

/* The cover: a strip across the top of the card. */
.gfpc.gfpc-on div.bx-base-pofile-cover-image {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    height: 7rem !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.gfpc.gfpc-on div.bx-base-pofile-cover-image.bx-bpci-holder { height: 5rem !important; }
.gfpc.gfpc-on img.bx-base-pofile-cover-image,
.gfpc.gfpc-on p.bx-base-pofile-cover-image { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }

/* Name, counts and actions: one centred column under the avatar. */
.gfpc.gfpc-on .bx-base-pofile-cover-info {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 16px 18px !important;
}
.gfpc.gfpc-on .bx-base-pofile-ci-cnt {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-top: -3rem !important;
    container-type: normal !important;
}

/* The avatar overlaps the cover's lower edge. */
.gfpc.gfpc-on div.bx-base-pofile-cover-thumb {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    align-self: center !important;
}
.gfpc.gfpc-on .bx-base-pofile-cover-thumb .bx-base-pofile-unit-thumb {
    width: 6rem !important;
    height: 6rem !important;
    font-size: 2rem !important;
}
.gfpc.gfpc-on .bx-base-pofile-cover-thumb .bx-base-pofile-unit-online {
    top: auto !important;
    left: auto !important;
    right: .375rem !important;
    bottom: .375rem !important;
    width: 1rem !important;
    height: 1rem !important;
}

.gfpc.gfpc-on .bx-base-pofile-cover-user,
.gfpc.gfpc-on .bx-base-pofile-cover-thumb + .bx-base-pofile-cover-user {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    flex: none !important;
    width: 100% !important;
    margin: .5rem 0 0 !important;
    padding: 0 !important;
    gap: .875rem !important;
}
.gfpc.gfpc-on .bx-base-profile-cover-title-bages {
    flex: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    text-align: center;
}
.gfpc.gfpc-on .bx-base-profile-cover-title-bages h1 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1.375rem !important;
    line-height: 1.3 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
}
.gfpc.gfpc-on .bx-base-profile-cover-meta-holder { height: auto !important; margin-top: .375rem !important; }
.gfpc.gfpc-on .bx-base-profile-cover-meta { position: static !important; justify-content: center !important; }
.gfpc.gfpc-on .bx-base-profile-cover-meta .bx-menu-custom-hor {
    flex-wrap: wrap !important;
    white-space: normal !important;
    justify-content: center !important;
}

/* The action buttons: THREE CONTROLS in the card's own bar (inc/gf_profile_card.inc.php,
   arrange()) - Video Chat as the main button, the gear onto Edit profile, and a
   menu holding every other action. The band's own action row is emptied into
   them by the script, so here it is simply not drawn. */
.gfpc.gfpc-on .bx-base-pofile-cover-actions { display: none !important; }
.gfpc-bar { display: none; }
.gfpc.gfpc-on.gfpc-bar-on .gfpc-bar {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0 16px 16px;
}
.gfpc-bar > li { list-style: none; margin: 0; padding: 0; }
.gfpc-bar > li.gfpc-main { flex: 1 1 auto; min-width: 0; }
.gfpc-bar > li.gfpc-main .bx-base-general-entity-action,
.gfpc-bar > li.gfpc-main .sys-action-element-holder { display: block; width: 100%; }
.gfpc-bar > li.gfpc-main a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 100%;
    height: 2.5rem;
    box-sizing: border-box;
    padding: 0 .75rem !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: #1e3a8a !important;
    color: #ffffff !important;
    font-size: .875rem !important;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none !important;
}
.gfpc-bar > li.gfpc-main a:hover { background: #172554 !important; }
.gfpc-bar > li.gfpc-main a * { color: inherit !important; }
.gfpc-ctl { flex: 0 0 auto; position: relative; }
.gfpc-ctl[hidden], .gfpc-morewrap[hidden] { display: none !important; }
.gfpc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    box-sizing: border-box;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    background: #ffffff;
    color: #0f172a !important;
    cursor: pointer;
    list-style: none;
}
.gfpc-icon:hover { background: #f1f5f9; }
.gfpc-icon::-webkit-details-marker { display: none; }
.dark .gfpc-icon { background: #1f2937; border-color: #374151; color: #f3f4f6 !important; }
.dark .gfpc-icon:hover { background: #374151; }
.gfpc-more { position: relative; }
.gfpc-more-list {
    position: absolute;
    right: 0;
    top: calc(100% + .4rem);
    z-index: 80;
    min-width: 13rem;
    max-height: 22rem;
    overflow-y: auto;
    margin: 0;
    padding: .35rem;
    list-style: none;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .18);
    display: flex;
    flex-direction: column;
    gap: 0;
}
.dark .gfpc-more-list { background: #1f2937; }
.gfpc-more-list > li { list-style: none; margin: 0 !important; width: 100%; }
.gfpc-more-list > li .bx-base-general-entity-action,
.gfpc-more-list > li .sys-action-element-holder { display: block; width: 100%; }
.gfpc-more-list > li a {
    display: flex !important;
    align-items: center;
    gap: .5rem;
    width: 100%;
    box-sizing: border-box;
    padding: .55rem .7rem !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: #0f172a !important;
    font-size: .875rem !important;
    text-align: left;
    white-space: nowrap;
    text-decoration: none !important;
}
.gfpc-more-list > li a:hover { background: #f1f5f9 !important; }
.dark .gfpc-more-list > li a { color: #f3f4f6 !important; }
.dark .gfpc-more-list > li a:hover { background: #374151 !important; }

/* The band's own bottom rule belongs under a full-width band, not in a card. */
.gfpc.gfpc-on .bx-base-pofile-cover-wrapper > .bx-def-page-width { display: none !important; }

/* "Edit cover photo" sits in the strip's TOP-right corner: at the bottom it
   landed on the avatar, which overlaps the strip's lower edge in the middle.
   Its menu opens downward from there, over the card. */
.gfpc.gfpc-on .gf-cov { top: .5rem !important; right: .5rem !important; bottom: auto !important; }
.gfpc.gfpc-on .gf-cov-menu { top: calc(100% + .4rem) !important; bottom: auto !important; }
.gfpc.gfpc-on .gf-cov-btn { padding: .35rem .55rem; font-size: .75rem; }
.gfpc.gfpc-on .gf-cov-bar { padding: .4rem .5rem; font-size: .75rem; flex-wrap: wrap; gap: .4rem; }
.gfpc.gfpc-on .gf-cov-bar > span:first-child { flex-basis: 100%; }

/* --- The visitor's person page puts the card's column on the LEFT ---------- */
@media (min-width: 881px) {
    .gfco-grid.gfco-grid-cardleft { grid-template-columns: 320px minmax(0, 1fr); }
    .gfco-grid.gfco-grid-cardleft > .gfco-side { order: -1; }
}
/* A side column carrying the card can be taller than the window, and a column
   pinned by its top is then cut off at the bottom - so it scrolls with the page. */
.gfco-grid.gfco-grid-cardleft > .gfco-side { position: static !important; }

/* ---- The tab strip stays in view ----------------------------------------
   With the band in the card the tabs ARE the top of the page, so they are
   pinned under the member header while the page scrolls. `top` clears
   #bx-toolbar, which is position:fixed and changes height, so the script
   measures its live bottom edge into --gfpc-tabs-top; 4rem is only the JS-off
   fallback (the classic bar is h-16). The WINDOW is the scrollport and the
   shell's two never-scrolling overflow containers would otherwise re-point
   sticky at themselves (the workspace home's measured lesson), so they are put
   back to visible while the card is on the page. Scoped by html.gfpc-moved,
   which only the card's script sets, so every other page is untouched and
   with JS off nothing is pinned. */
html.gfpc-moved #main-content,
html.gfpc-moved .bx-main-content { overflow: visible; }
html.gfpc-moved #bx-menu-main-bar-wrapper {
    position: sticky;
    top: var(--gfpc-tabs-top, 4rem);
    z-index: 40;
}

/* The person profile's OTHER tabs (Learning, Events, Courses, Blogs...) keep
   the Overview's layout: the card on the left and the tab's own content beside
   it. The script builds this only where the page has no card of its own, by
   putting an aside before #bx-content-main and adding .gfpc-tabgrid to
   #bx-content-container; with JS off neither exists and the page is stock.
   The card's look is declared here because these tabs do not load the
   Overview's stylesheet, where .gfdash-card lives. */
.bx-content-container.gfpc-tabgrid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
.bx-content-container.gfpc-tabgrid > .gfpc-tabside { margin-top: 12px; min-width: 0; }
.bx-content-container.gfpc-tabgrid > .bx-content-main { min-width: 0; }
.gfpc-tabside > .gfpc {
    --gfd-radius: 14px;
    background: #fff;
    border: 1px solid #e8ebf1;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 31, 61, .04), 0 4px 16px rgba(15, 31, 61, .04);
}
.dark .gfpc-tabside > .gfpc { background: #111827; border-color: rgba(255, 255, 255, .1); }
@media (max-width: 880px) {
    .bx-content-container.gfpc-tabgrid { display: block; }
}

/* An ORGANIZATION's other tabs may put the card on the RIGHT
   (gfProfileCardSide()): the script then inserts the aside after
   #bx-content-main and adds .gfpc-tabgrid-right. */
.bx-content-container.gfpc-tabgrid.gfpc-tabgrid-right { grid-template-columns: minmax(0, 1fr) 300px; }

/* The "Card: Left | Right" switch above an organization's dashboard. */
.gfpc-sideswitch { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; }
.gfpc-sideswitch-l { margin-right: 6px; font-weight: 600; color: #64748b; }
.gfpc-sideswitch a.gfpc-sideswitch-o {
    padding: 3px 10px;
    border: 1px solid #cbd5e1;
    color: #334155;
    font-weight: 600;
    text-decoration: none;
}
.gfpc-sideswitch a.gfpc-sideswitch-o:first-of-type { border-radius: 8px 0 0 8px; }
.gfpc-sideswitch a.gfpc-sideswitch-o:last-of-type { border-radius: 0 8px 8px 0; border-left: 0; }
.gfpc-sideswitch a.gfpc-sideswitch-on { background: #1e3a8a; border-color: #1e3a8a; color: #fff; }
.dark .gfpc-sideswitch-l { color: #94a3b8; }
.dark .gfpc-sideswitch a.gfpc-sideswitch-o { border-color: #374151; color: #e5e7eb; }
.dark .gfpc-sideswitch a.gfpc-sideswitch-on { background: #2563eb; border-color: #2563eb; color: #fff; }