/* ==========================================================================
   統一 Tooltip 元件（.sb-tip）
   用途：取代原本散落各頁、各自實作的 .tooltip-cls（sidebar / cover-btns /
         social-btn / page-name / sport-icon-box / setting-btn / weather-icon /
         btn-disable-hover / user-level-tag 等多種寫法）。

   定位與顯示邏輯由 web/assets/js/tooltip.js（Popper v2）負責，
   本檔只描述外觀，不含任何 :hover 父選擇器。

   觸發元素只需標註 data-tip-* 屬性（PHP 端請用 sbTooltipAttr() 產生）：
     data-tip-trigger                    必要，標記此元素為觸發元素
     data-tip-content="文字"              純文字內容（JS 以 textContent 寫入，不解析 HTML）
     <template data-tip>…</template>      含 HTML 的內容，放在觸發元素內部
     data-tip-pos="top|bottom|left|right" 期望方向（預設 top；實際方向由 Popper 決定）
     data-tip-theme="light|dark"          配色（預設 light）
     data-tip-touch="auto|none"           觸控裝置行為，none = 不彈出（按下有動作的按鈕用）
     data-tip-max-width="260px"           覆寫浮層最大寬度

   箭頭方向一律由 Popper 實際寫入的 data-popper-placement 決定（而非期望方向），
   因此靠近畫面邊緣自動翻轉（flip）到另一側時，箭頭會跟著改方向。

   動畫：只作用在 opacity 與 4px 的 transform 位移；位置（top / left）由 Popper 寫入，
   不可以對 top / left 做 transition，否則 Popper 每次重算位置時浮層會「滑」過去。
   調整動畫時間時，記得同步 tooltip.js 的 CONFIG.transitionMs。

   深色主題：直接覆寫 .sb-tip 的 CSS 變數即可，例如
     .sb-tip { --sb-tip-bg: #222222; --sb-tip-color: #ffffff; }
   ========================================================================== */

.sb-tip {
    /* CSS 變數：方便日後於深色主題（dark.css / dark-1.css / dark-2.css）覆寫 */
    --sb-tip-bg: #ffffff;
    --sb-tip-color: #51595e;
    --sb-tip-arrow-size: 8px;

    /* top / left 由 Popper 寫入（tooltip.js 已關閉 gpuAcceleration） */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1080; /* 高於 Bootstrap modal（1055） */

    max-width: 260px;
    padding: 0.5rem 1rem;
    border-radius: 4px;

    background-color: var(--sb-tip-bg);
    color: var(--sb-tip-color);
    box-shadow: 0 0 16px -4px rgba(0, 20, 40, 0.2), 0 0 80px -10px rgba(0, 20, 40, 0.3);

    font-size: 14px;
    line-height: 20px;
    text-align: left;
    text-transform: capitalize;
    white-space: normal;
    word-break: break-word;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* visibility 延遲到淡出結束才切換，內容才不會在動畫一開始就消失 */
    /* 緩動用 ease-out：前段不會暴衝，淡入/位移看得到完整過程
       （cubic-bezier(0.22,1,0.36,1) 前 10% 就跑掉四成，會像「少了前半段」） */
    transition: opacity 0.28s ease-out, transform 0.28s ease-out, visibility 0s linear 0.28s;
}

/* 建立「起始狀態」時先關掉 transition：
   否則寫入 data-popper-placement 的那一刻，transform 就自己先動一次（none → 20px），
   之後才加 is-show 把目標改回 0，等於起始位移被吃掉，看起來只剩一點點移動。 */
.sb-tip.no-transition {
    transition: none !important;
}

.sb-tip[data-tip-theme="dark"] {
    --sb-tip-bg: #222222;
    --sb-tip-color: #ffffff;
}

.sb-tip.is-show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.28s ease-out, transform 0.28s ease-out, visibility 0s;
}

/* 進場位移：依實際彈出方向微微移動，取代舊版 scale()（避免文字模糊、箭頭變形） */
.sb-tip[data-popper-placement^="top"] {
    transform: translateY(15px);
}
.sb-tip[data-popper-placement^="bottom"] {
    transform: translateY(-15px);
}
.sb-tip[data-popper-placement^="left"] {
    transform: translateX(15px);
}
.sb-tip[data-popper-placement^="right"] {
    transform: translateX(-15px);
}
.sb-tip[data-popper-placement^="top"].is-show,
.sb-tip[data-popper-placement^="bottom"].is-show,
.sb-tip[data-popper-placement^="left"].is-show,
.sb-tip[data-popper-placement^="right"].is-show {
    transform: translate(0, 0);
}

/* 箭頭：left / top 由 Popper 的 arrow modifier 寫入，此處只決定貼在哪一邊 */
.sb-tip-arrow,
.sb-tip-arrow::before {
    position: absolute;
    width: var(--sb-tip-arrow-size);
    height: var(--sb-tip-arrow-size);
}
.sb-tip-arrow::before {
    content: "";
    background-color: var(--sb-tip-bg);
    transform: rotate(45deg);
}
.sb-tip[data-popper-placement^="top"] .sb-tip-arrow {
    bottom: -4px;
}
.sb-tip[data-popper-placement^="bottom"] .sb-tip-arrow {
    top: -4px;
}
.sb-tip[data-popper-placement^="left"] .sb-tip-arrow {
    right: -4px;
}
.sb-tip[data-popper-placement^="right"] .sb-tip-arrow {
    left: -4px;
}

/* 運動圖示清單：頁面上的尺寸規則綁在 .friend-box / .user-details 等祖先下
   （global-style.css 的 .friend-box .sport-icon-box .sport-icon-img），
   浮層在 body 內套不到，因此在這裡補上同樣的尺寸，避免圖片用原始尺寸顯示。 */
/* 與頁面一致的呈現方式：圖示一律是父層背景（tooltip.js 會把 <img> 轉過去並隱藏），
   30px × 80% = 24px 置中、四周留白；缺 background-repeat 會平鋪成多個圖示重疊。 */
.sb-tip .sport-icon-img {
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    margin: 3px;
    border-radius: 5px;
    display: inline-block;
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
}
/* tooltip.js 轉成父層背景後會隱藏 <img>；這裡不寫 display:none，
   是為了在轉換失敗時還有 <img> 可以顯示（只是沒有 80% 的內縮） */
.sb-tip .sport-icon-img img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* 有時 tooltip 內容本身就是 HTML（例如運動圖示清單），移除不必要的間距干擾 */
.sb-tip-content > *:first-child {
    margin-top: 0;
}
.sb-tip-content > *:last-child {
    margin-bottom: 0;
}

@media (max-width: 576px) {
    .sb-tip {
        max-width: calc(100vw - 32px);
        padding: 5px 10px;
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sb-tip,
    .sb-tip.is-show {
        transition: none;
    }
    .sb-tip[data-popper-placement^="top"],
    .sb-tip[data-popper-placement^="bottom"],
    .sb-tip[data-popper-placement^="left"],
    .sb-tip[data-popper-placement^="right"] {
        transform: none;
    }
}

/* ==========================================================================
   class 改名記錄：.tooltip-text-box → .text-badge
   原名 .tooltip-text-box 經查證全站無任何頁面使用（僅 style.css 內有 CSS 規則），
   且其行為是「永遠顯示」的常駐標籤，並非 hover 才出現的提示，故不納入 Tooltip 元件，
   另行改名為 .text-badge。日後搜尋「tooltip-text-box」時請改查「text-badge」。
   ========================================================================== */
.text-badge {
    /* 原 .tooltip-text-box .tooltip-cls 的樣式（已去掉舊的定位與 transform） */
    background-color: #ffffff;
    border-radius: 4px;
    text-transform: capitalize;
    color: #51595e;
    box-shadow: 0 0 16px -4px rgba(0, 20, 40, 0.2), 0 0 80px -10px rgba(0, 20, 40, 0.3);
    padding: 0.5rem 1rem;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
}