/* ============================================================
   側欄收合（電腦版窄軌）
   ‧ 手機版(<1200px)完全不套用，維持原本抽屜式滑出
   ‧ 對齊 Material Dashboard：側欄 max-width 14.5rem、主內容 margin-left 15rem
   ============================================================ */

:root {
    --sf-rail: 5.25rem; /* 收合後的窄軌寬度 */
}

/* 展開時的完整 Logo
   ‧ 需覆蓋主題的 .navbar-vertical .navbar-brand>img{max-height:2rem}
   ‧ 寬度上限 9.5rem：側欄 14.5rem 扣掉 navbar-brand 的 px-4(左右各 1.5rem)後，
     右側要留給收合鈕(2rem+0.5rem)，再寬就會被壓到 */
.sf-logo-full {
    display: block;
    width: 9.5rem;
    height: auto;
    max-width: 100% !important;
    max-height: none !important;
}

/* 這兩顆只在電腦版出現 */
.sf-brand-mini,
#sfCollapseBtn {
    display: none;
}

/* ---------- 手機版側欄關閉 X：維持原本樣式，只放大一點 ----------
   ‧ 只在 <1200px 顯示（HTML 掛 d-xl-none），位置沿用原本右上角
   ‧ #iconSidenav 的 id 會保留到 FA 換成的 <svg>，font-size 控制 svg 大小（.svg-inline--fa 用 height:1em） */
@media (max-width: 1199.98px) {
    #iconSidenav {
        font-size: 1.5rem;   /* 原本約 1em，放大一點 */
        transition: opacity .15s ease;
    }

        /* 滑過時清楚一點（原本 opacity-5 偏淡） */
        #iconSidenav:hover {
            opacity: 1 !important;
        }
}

/* ---------- 收合時 hover 浮出的標籤／子選單 ----------
   ‧ 掛在 <body> 用 position:fixed，由 JS 依項目座標定位。
     不能用 absolute 掛在側欄內：側欄有 overflow-y:auto（主題設定），
     會建立裁切區把浮出面板裁掉。
   ‧ 只由 JS 在「電腦版且收合中」時建立，故不需包在媒體查詢內。 */
.sf-flyout {
    position: fixed;
    z-index: 1080;
    min-width: 12rem;
    padding: .5rem;
    border: 1px solid #e5e5e5;
    border-radius: .75rem;
    background: #fff;
    box-shadow: 0 10px 30px rgba(20, 35, 80, .16);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-6px);
    transition: opacity .16s, transform .16s, visibility .16s;
}

    .sf-flyout.sf-open {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

.sf-fly-title {
    padding: .4rem .7rem .55rem;
    font-size: 1rem;
    font-weight: 700;
    color: #344767;
    white-space: nowrap;
}

.sf-fly-group {
    padding: .55rem .7rem .25rem;
    font-size: .85rem;
    font-weight: 700;
    color: #8392ab;
    white-space: nowrap;
}

.sf-flyout a {
    display: block;
    padding: .5rem .7rem;
    border-radius: .45rem;
    font-size: .95rem;
    color: #344767;
    text-decoration: none;
    white-space: nowrap;
}

    /* 移到項目上＝黑底白字，比照主題的 bg-gradient-dark */
    .sf-flyout a:hover {
        background-image: linear-gradient(195deg, #42424a 0%, #191919 100%);
        color: #fff;
    }

@media (min-width: 1200px) {

    /* ---------- 展開狀態：右上角收合鈕 ---------- */
    #sfCollapseBtn {
        position: absolute;
        top: .5rem;
        right: .5rem;
        z-index: 3;
        display: grid;
        place-items: center;
        width: 2rem;
        height: 2rem;
        padding: 0;
        border: 0;
        border-radius: .5rem;
        background: transparent;
        color: #67748e;
        cursor: pointer;
        transition: background .15s, color .15s;
    }

        #sfCollapseBtn:hover {
            background: #f0f2f7;
            color: #344767;
        }

        #sfCollapseBtn svg {
            width: 1.15rem;
            height: 1.15rem;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.9;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

    /* ---------- 收合狀態 ---------- */
    body.sf-mini .sidenav.navbar-vertical.navbar-expand-xs {
        max-width: var(--sf-rail) !important;
    }

    body.sf-mini .sidenav.fixed-start + .main-content {
        margin-left: calc(var(--sf-rail) + 1rem);
    }

    body.sf-mini #sfCollapseBtn,
    body.sf-mini .sidenav-header .navbar-brand {
        display: none !important;
    }

    /* 建築標兼展開鈕：平常顯示品牌標，hover 換成箭頭 */
    body.sf-mini .sf-brand-mini {
        position: relative;
        display: grid;
        place-items: center;
        width: 3rem;
        height: 3rem;
        margin: .85rem auto;
        padding: 0;
        border: 0;
        border-radius: .75rem;
        background: transparent;
        cursor: pointer;
        transition: background .15s;
    }

        body.sf-mini .sf-brand-mini:hover {
            background: #f0f2f7;
        }

    .sf-mini-img,
    .sf-mini-arrow {
        grid-area: 1 / 1;
        transition: opacity .16s;
    }

    .sf-mini-img {
        width: 2.4rem;
        height: auto;
    }

    .sf-mini-arrow {
        display: grid;
        place-items: center;
        opacity: 0;
    }

        .sf-mini-arrow svg {
            width: 1.4rem;
            height: 1.4rem;
            fill: none;
            stroke: #17408B;
            stroke-width: 2.6;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

    body.sf-mini .sf-brand-mini:hover .sf-mini-img {
        opacity: 0;
    }

    body.sf-mini .sf-brand-mini:hover .sf-mini-arrow {
        opacity: 1;
    }

    /* 收合時：只留圖示、置中，不顯示內嵌子選單 */
    body.sf-mini #sidenav-main .nav-link-text {
        display: none !important;
    }

    /* 主題的展開箭頭：.nav-link[data-bs-toggle=collapse]:after 是 Font Awesome 字符，
       且帶 margin-left:auto 會把圖示擠到左邊。收合時子選單改用 hover 浮出，
       不靠點擊展開，所以這個箭頭要拿掉。 */
    body.sf-mini #sidenav-main .navbar-nav > li.nav-item > .nav-link[data-bs-toggle="collapse"]:after {
        display: none !important;
    }

    /* 圖示整排偏左 7px 的根因：選單容器長出原生捲軸，吃掉右邊 15px
       （82px 內容區 → 實際只剩 67px），不是 margin/padding 問題。
       窄軌不需要看到捲軸，滾輪照樣能捲，隱藏它就正了。 */
    body.sf-mini #sidenav-main #sidenav-collapse-main {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* 舊 Edge/IE */
    }

        body.sf-mini #sidenav-main #sidenav-collapse-main::-webkit-scrollbar {
            width: 0;
            height: 0;
        }

    body.sf-mini #sidenav-main .navbar-nav {
        width: 100% !important;
    }

    /* nav-link 是 flex，置中要用 justify-content（text-align 無效）。
       固定成方塊，active 的底色才不會拉成整條。 */
    body.sf-mini #sidenav-main .navbar-nav > li.nav-item > .nav-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3rem;
        height: 3rem;
        margin: .15rem auto;
        padding: 0 !important;
        border-radius: .75rem;
    }

        /* 放大圖示：主題原本是 1.125rem，窄軌沒有文字，圖示可以大一點 */
        body.sf-mini #sidenav-main .navbar-nav > li.nav-item > .nav-link > i {
            margin: 0 !important;
            min-width: 0 !important;
            font-size: 1.5rem !important;
            font-variation-settings: 'opsz' 24;
        }

    body.sf-mini #sidenav-main .navbar-nav > ul.collapse {
        display: none !important;
    }

    /* 目前頁面若是子選單項目（例：媒合管理 > 契約資料查詢），收合後子項目看不到，
       等於沒有任何選取狀態 → 由 JS 把父項目標成 sf-parent-active，樣式比照主題 active */
    body.sf-mini #sidenav-main .navbar-nav > li.nav-item > .nav-link.sf-parent-active {
        background-image: linear-gradient(195deg, #42424a 0%, #191919 100%);
        box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 2px 5px 0 rgba(0, 0, 0, .14);
    }

    /* 深色底的圖示一律白色（只有選取狀態，hover 維持主題原本的樣子）。
       主題的 .opacity-5 是 opacity:0.5 !important，會讓圖示在深色底上變成灰的 */
    body.sf-mini #sidenav-main .navbar-nav > li.nav-item > .nav-link.active > i,
    body.sf-mini #sidenav-main .navbar-nav > li.nav-item > .nav-link.sf-parent-active > i {
        opacity: 1 !important;
        color: #fff !important;
    }

}

/* ============================================================
   側欄捲軸：無箭頭、細一點
   ‧ 原本是 Windows 原生捲軸（含上下箭頭按鈕）。
   ‧ ::-webkit-scrollbar-button 隱藏箭頭；width 變細；thumb 半透明圓角。
   ============================================================ */
/* ⚠ 不要在這裡設標準屬性 scrollbar-width / scrollbar-color！
   Chrome 121+ 一旦看到這兩個，就改用「標準捲軸」並完全忽略下面的
   ::-webkit-scrollbar 規則 → 箭頭藏不掉、寬度也不會變。
   讓 webkit pseudo-elements 獨自接管，才能細版且無箭頭。 */
    #sidenav-main::-webkit-scrollbar,
    #sidenav-collapse-main::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }

    #sidenav-main::-webkit-scrollbar-button,
    #sidenav-collapse-main::-webkit-scrollbar-button {
        display: none; /* 移除上下箭頭 */
        width: 0;
        height: 0;
    }

    #sidenav-main::-webkit-scrollbar-track,
    #sidenav-collapse-main::-webkit-scrollbar-track {
        background: transparent;
    }

    #sidenav-main::-webkit-scrollbar-thumb,
    #sidenav-collapse-main::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, .22);
        border-radius: 4px;
    }

        #sidenav-main::-webkit-scrollbar-thumb:hover,
        #sidenav-collapse-main::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 0, 0, .38);
        }