/* ============================================================
   Child-Site UI Variant v3 — pill bar stylesheet.

   Scope: only loaded when IsthisChildWebsite="1" AND
          ChildSiteUIVariant="v3" (gated in headerbar_v3.asp).
          Storeboard.com never loads this file.

   v3 design (current): borderless app-style icons.
       - Each pill = colorful filled rounded-square icon + label below.
       - No pill chrome (no border/background/shadow) on any breakpoint.
       - Layout is flex (not grid) so JS auto-fit can measure widths
         and overflow into a More dropdown when pills don't fit.

   To roll back instantly: flip ChildSiteUIVariant to "legacy"
   in inc/MultiSiteCommon.asp.
   ============================================================ */

/* sbpb = StoreBoard Pill Bar — all classes prefixed `sbpb-` to avoid
   collisions with host-site styles. */

.sbpb-bar {
    --sbpb-bar-bg: transparent;
    --sbpb-tab-gap: 8px;
    --sbpb-label-color: #2a2f36;
    --sbpb-accent: #f0833a;

    box-sizing: border-box;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sbpb-tab-gap);
    padding: 8px 10px;
    margin: 6px auto 0px;
    background: var(--sbpb-bar-bg);
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
}

/* Wrapper — let the bar span its container width so the JS can measure. */
.sbpb-wrap {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
}

.sbpb-bar *,
.sbpb-bar *::before,
.sbpb-bar *::after { box-sizing: border-box; }

/* -- Pill (borderless) --------------------------------------------------- */
/* Pills are natural width (flex:0 0 auto). The .sbpb-bar uses
   justify-content:space-between, so the first pill sits flush to the left
   edge of the bar, the last sits flush to the right edge, and the leftover
   space is divided equally between every adjacent pair. */
.sbpb-bar .sbpb-tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    padding: 4px 6px 10px;
    background: transparent;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    user-select: none;
    font: inherit;
    color: var(--sbpb-label-color);
    text-decoration: none !important;
    flex: 0 0 auto;
    min-width: 0;
    transition: transform .12s ease, opacity .15s ease;
}

.sbpb-bar .sbpb-tab,
.sbpb-bar .sbpb-tab:hover,
.sbpb-bar .sbpb-tab:focus,
.sbpb-bar .sbpb-tab:active,
.sbpb-bar .sbpb-tab .sbpb-tab__label { text-decoration: none !important; }

.sbpb-bar .sbpb-tab:hover { opacity: .85; }
.sbpb-bar .sbpb-tab:active { transform: translateY(1px); }
.sbpb-bar .sbpb-tab:focus-visible {
    outline: 2px solid var(--sbpb-accent);
    outline-offset: 3px;
    border-radius: 6px;
}

/* -- Icon (the colorful rounded-square) ---------------------------------- */
.sbpb-bar .sbpb-tab__icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sbpb-bar .sbpb-tab__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* -- Label --------------------------------------------------------------- */
.sbpb-bar .sbpb-tab__label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--sbpb-label-color);
    white-space: nowrap;
    line-height: 1.2;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* -- Active state -------------------------------------------------------- */
/* Label takes the pill's color; thin colored underline sits flush under it.
   Uses each tab's inline `--sbpb-tab-color` (set in dashboardIconbar_v3.asp). */
.sbpb-bar .sbpb-tab--active .sbpb-tab__label {
    color: var(--sbpb-tab-color, var(--sbpb-accent));
    font-weight: 600;
}
.sbpb-bar .sbpb-tab--active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 26px;
    height: 2.5px;
    border-radius: 2px;
    background: var(--sbpb-tab-color, var(--sbpb-accent));
    transform: translateX(-50%);
}

/* -- More button + dropdown panel ---------------------------------------- */
.sbpb-bar .sbpb-tab--more { /* nothing special — inherits .sbpb-tab. */ }

.sbpb-more-panel {
    position: absolute;
    right: 8px;
    top: 100%;
    margin-top: 4px;
    z-index: 1000;
    min-width: 180px;
    max-width: 260px;
    background: #fff;
    border: 1px solid #e4e7eb;
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(16, 24, 40, .12),
                0 2px 6px  rgba(16, 24, 40, .08);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sbpb-more-panel[hidden] { display: none; }

.sbpb-more-panel .sbpb-more-item {
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    min-width: 0;
    width: 100%;
    border-radius: 8px;
    text-align: left;
}
.sbpb-more-panel .sbpb-more-item:hover { background: #f5f7fa; }
.sbpb-more-panel .sbpb-more-item .sbpb-tab__icon {
    width: 28px; height: 28px; flex: 0 0 28px;
}
.sbpb-more-panel .sbpb-more-item .sbpb-tab__label {
    font-size: 14px;
    text-align: left;
}
.sbpb-more-panel .sbpb-more-item.sbpb-tab--active::after {
    /* Row-style indicator inside the dropdown — left bar instead of underline. */
    content: "";
    position: absolute;
    left: 2px;
    top: 8px; bottom: 8px;
    width: 3px;
    height: auto;
    transform: none;
    border-radius: 2px;
    background: var(--sbpb-tab-color, var(--sbpb-accent));
}

/* -- Desktop: bigger icons + always distributed (no More) ---------------- */
/* Bar uses the default 10px L/R padding so first/last icons sit 10px
   inside the bar's container on every breakpoint. */
@media (min-width: 901px) {
    .sbpb-bar .sbpb-tab__icon {
        width: 56px;
        height: 56px;
        flex-basis: 56px;
    }
    .sbpb-bar .sbpb-tab__label { font-size: 14px; }
    .sbpb-bar .sbpb-tab--active::after { width: 34px; height: 3px; }
    .sbpb-bar .sbpb-tab--more { display: none !important; }
}

/* -- Responsive scaling -------------------------------------------------- */
@media (max-width: 900px) {
    .sbpb-bar { gap: 4px; padding: 6px 10px; }
    .sbpb-bar .sbpb-tab { padding: 4px 4px 10px; }
    .sbpb-bar .sbpb-tab__icon { width: 46px; height: 46px; flex-basis: 46px; }
    .sbpb-bar .sbpb-tab__label { font-size: 12px; }
}
@media (max-width: 600px) {
    .sbpb-bar { gap: 2px; padding: 4px 10px; }
    .sbpb-bar .sbpb-tab { padding: 3px 2px 9px; }
    .sbpb-bar .sbpb-tab__icon { width: 42px; height: 42px; flex-basis: 42px; }
    .sbpb-bar .sbpb-tab__label { font-size: 11px; }
    .sbpb-bar .sbpb-tab--active::after { width: 24px; bottom: 1px; }
}

/* Hide the pre-AJAX Feed UI once any pill-bar tab has been clicked.
   ChangeMediaData() AJAX-injects fresh controls into #searchtopbar for
   whichever media type is selected (including Feed itself), so the old
   inline Feed search row + chip row would otherwise stack underneath.
   These rows stay visible on initial page load — they only hide after
   the first tab click, at which point #searchtopbar is populated. */
body.sbpb-tabs-active .sbpb-feed-controls-row,
body.sbpb-tabs-active .sbpb-feed-chips-row {
    display: none !important;
}

/* After the first tab click, collapse the residual vertical space coming
   from .board-display-header (inner table has margin-bottom:10px) and
   #boardViewSelection1 (margin-bottom:7px, content is dead-IF'd).
   Inner TDs are already hidden on child sites via HideforChildWebsite, so
   only the wrapping margins/padding remain — zero them rather than using
   display:none, which previously hid more than intended. */
body.sbpb-tabs-active .board-display-header,
body.sbpb-tabs-active .board-display-header > table,
body.sbpb-tabs-active #boardViewSelection1 {
    margin: 0 !important;
    padding: 0 !important;
}