/* ============================================
   v82.45 Wayfinding — 強化導航視覺(Phase A) +
   Breadcrumb 樣式(Phase B) + Mini-context bar(Phase C)
   完全 additive overlay,不改既有 CSS,只用更高 specificity 蓋過。
   v82.58 主標題工具列:鎖定 container>row、md+ 操作欄 margin-auto 貼齊右緣+flex 覆寫
   v82.57 主標題列含右側操作區:md+ 靠右、按鈕寬度依內容(覆寫 width:100% 撐滿整列)
   v82.56 主標題淺灰帶與下方主內容統一留白(margin-bottom),免逐頁尾端 <br>
   v82.55 麵包屑+toast+標題列同一淺灰底(#FAFBF9),中間無橫線;僅標題列底部分隔主內容
   v82.54 麵包屑與大標同網格左對齊、白底連續帶;麵包屑改純文字(無內嵌 icon)
   v82.51 麵包屑 16px、主標 category-title 28px 行高呼應、首屏上距略縮(緊貼大標感)
   v82.73 修正:麵包屑 sticky 避開 header、大標灰底帶、container 對齊、標題 28px 不被頁內 CSS 蓋過
   ============================================ */

:root {
    --wf-header-offset: 60px;
}

/* ============================================
   Phase A:強化主選單 active 視覺
   ============================================ */

/* 主選單 active:粗體 + 底色 + 強烈下底框 */
.w3l-header .navbar-nav > li.active > .nav-link,
.w3l-header .navbar-nav > li > .nav-link.active {
    background: linear-gradient(180deg, transparent 55%, rgba(27, 55, 44,0.10) 100%) !important;
    border-bottom: 3px solid #1B372C !important;
    font-weight: 700 !important;
    color: #1B372C !important;
    box-shadow: inset 0 -3px 0 #1B372C !important;
}

/* dropdown 父選單若包含 active 子項,父也亮 */
.w3l-header .nav-item.dropdown.active > .nav-link.dropdown-toggle {
    background: linear-gradient(180deg, transparent 55%, rgba(27, 55, 44,0.10) 100%) !important;
    border-bottom: 3px solid #1B372C !important;
    font-weight: 700 !important;
    color: #1B372C !important;
    box-shadow: inset 0 -3px 0 #1B372C !important;
}

/* dropdown 子項 active:左 border + 底色 + 粗體 */
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:focus.active {
    background: #EFF7F4 !important;
    border-left: 4px solid #1B372C !important;
    font-weight: 600 !important;
    color: #1B372C !important;
    padding-left: 12px !important;
}

/* hover effect 加柔和過渡 */
.w3l-header .nav-link {
    transition: background 0.2s, color 0.2s, font-weight 0.15s !important;
}

/* ============================================
   Phase B:Breadcrumb
   ============================================ */
#wayfindingBreadcrumb {
    /* v82.55 與下方標題列同一條「頁首帶」,避免灰/白兩截 */
    background: #FAFBF9;
    border-bottom: none;
    padding: 10px 0 4px;
    font-size: 16px;
    color: #767F70;
    line-height: 1.45;
    box-shadow: none;
    position: sticky;
    top: var(--wf-header-offset, 60px);
    z-index: 999;
    user-select: none;
}
/* header 與標題列之間若有 toast 占位,維持同色不中斷 */
#wayfindingBreadcrumb ~ .toast-container {
    background: #FAFBF9;
}
/* 與 mapping.jsp / mappingTable.jsp 標題列相同外層 class,確保文字左緣對齊 */
#wayfindingBreadcrumb .wf-bc-grid {
    margin-left: auto;
    margin-right: auto;
}
#wayfindingBreadcrumb .wf-bc-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0;
    row-gap: 8px;
}
#wayfindingBreadcrumb .crumb {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
#wayfindingBreadcrumb .crumb a {
    color: #575E53;
    text-decoration: none;
    transition: color 0.15s;
}
#wayfindingBreadcrumb .crumb a:hover {
    color: #1B372C;
    text-decoration: underline;
}
#wayfindingBreadcrumb .crumb.last {
    color: #3B4D46;
    font-weight: 600;
}
#wayfindingBreadcrumb .sep {
    color: #D5DCD0;
    margin: 0 10px;
    font-size: 16px;
    font-weight: 400;
}
#wayfindingBreadcrumb .ctx-pill {
    display: inline-block;
    padding: 2px 10px;
    background: #E2F0EA;
    color: #29604A;
    border: 1px solid #D0E6DD;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 600;
    margin-left: 10px;
    vertical-align: middle;
}
#wayfindingBreadcrumb .ctx-pill.filename {
    background: #fef3c7;
    color: #92400e;
    border-color: #fde68a;
    max-width: min(380px, 46vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 與麵包屑垂直堆疊的大標(多數內頁 h3.category-title) */
h1.category-title,
h2.category-title,
h3.category-title {
    font-size: 28px;
    line-height: 1.3;
}

/* 麵包屑與大標之間僅占位的 py-1(如 mappingSuggestion):收掉高度、同色底不中斷 */
#wayfindingBreadcrumb + .py-1:not(:has(.category-title)),
#wayfindingBreadcrumb + .toast-container + .py-1:not(:has(.category-title)) {
    background: #FAFBF9;
    padding: 0 !important;
    margin: 0;
    border: 0;
    min-height: 0;
    line-height: 0;
}
#wayfindingBreadcrumb + .py-1:not(:has(.category-title)) > br,
#wayfindingBreadcrumb + .toast-container + .py-1:not(:has(.category-title)) > br {
    display: none;
}

/* 由 wayfinding.js 標記:實際含大標的區塊,與麵包屑同一條淺灰帶,底部單線與主內容分開 */
.py-1.wf-heading-band-end {
    background: #FAFBF9 !important;
    padding-top: 0.15rem !important;
    padding-bottom: 0.55rem !important;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid #E8EBE7;
}
.py-1.wf-heading-band-end > br:first-of-type {
    display: none;
}
div.container.wf-heading-band-end {
    background: #FAFBF9 !important;
    padding-top: 0.35rem !important;
    padding-bottom: 0.55rem !important;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid #E8EBE7;
}
/* 標題列 container.row 與下方主內容 .container 左緣對齊（抵消 Bootstrap .row 負 margin） */
.wf-heading-band-end .container.row.col-12 {
    margin-left: auto !important;
    margin-right: auto !important;
}
.wf-heading-band-end h1.category-title,
.wf-heading-band-end h2.category-title,
.wf-heading-band-end h3.category-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 28px !important;
    line-height: 1.3 !important;
    font-weight: 600;
}

/* 標準網格主標題列:若未套上 wf-heading-band-end 仍與下方區塊留白(與尾端 <br> 擇一即可) */
.py-1:has(> .container.row.col-12):where(:has(.category-title), :has(.page-header), :has(.page-title)) {
    margin-bottom: 1.25rem;
}

/*
 * 主標題列 + 右側操作鈕:與內容區 .container 同寬,按鈕貼右;列上 align-items-center = 與大標垂直置中。
 * (loincSearch / 知識庫 / LOINC 版本 / twLOINC 申請等: py-1 > .container.row.col-12 > .row.align-items-center.g-2)
 */
@media (min-width: 768px) {
    .py-1:has(h1.category-title, h2.category-title, h3.category-title)
        .container.row.col-12 > .row.align-items-center.g-2 {
        flex-wrap: nowrap;
        width: 100%;
    }
    .py-1:has(h1.category-title, h2.category-title, h3.category-title)
        .container.row.col-12 > .row.align-items-center.g-2 > .col-12.col-md {
        flex: 1 1 0% !important;
        min-width: 0 !important;
    }
    .py-1:has(h1.category-title, h2.category-title, h3.category-title)
        .container.row.col-12 > .row.align-items-center.g-2 > .col-md-auto {
        margin-inline-start: auto !important;
        flex: 0 0 auto !important;
    }
    .py-1:has(h1.category-title, h2.category-title, h3.category-title)
        .container.row.col-12 > .row.align-items-center.g-2 > .col-md-auto .btn {
        width: auto !important;
    }
}

/* ============================================
   Phase C:Mini-context bar(右上角浮動小卡)
   控制旗標:WAYFINDING_CONFIG.miniContextEnabled,在 wayfinding.js 內
   ============================================ */
#wayfindingContextBar {
    position: fixed;
    top: 88px;
    right: 14px;
    width: 240px;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(8px);
    border: 1px solid #D5DCD0;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.02);
    /* v82.46 padding-top 加大,讓內容不被右上角 × 蓋到 */
    padding: 26px 14px 12px 14px;
    font-size: 11.5px;
    color: #3B4D46;
    z-index: 1000;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
#wayfindingContextBar.collapsed {
    opacity: 0.35;
    transform: translateX(195px);
    cursor: pointer;
}
#wayfindingContextBar:hover {
    opacity: 1;
    transform: translateX(0);
}
#wayfindingContextBar .ctx-header {
    /* v82.46 header 文字 padding 縮小(因卡片 padding-top 已加大) */
    font-size: 10.5px;
    color: #A5ACA0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    margin-bottom: 6px;
    padding-right: 0;
    margin-top: -10px;
}
#wayfindingContextBar .ctx-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 3px 0;
}
#wayfindingContextBar .ctx-row .label {
    color: #A5ACA0;
    font-size: 10.5px;
    flex: 0 0 auto;
    min-width: 36px;
}
#wayfindingContextBar .ctx-row .value {
    color: #1C362B;
    font-weight: 600;
    font-size: 11.5px;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#wayfindingContextBar .progress-track {
    height: 5px;
    background: #E8EBE7;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 6px;
}
#wayfindingContextBar .progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #3E8F6E, #29604A);
    border-radius: 3px;
    transition: width 0.4s ease;
}
#wayfindingContextBar .ctx-close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: transparent;
    border: 0;
    color: #A5ACA0;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}
#wayfindingContextBar .ctx-close:hover {
    color: #1C362B;
    background: #F5F6F4;
}

/* RWD:行動裝置隱藏 mini bar(避免擠到 header) */
@media (max-width: 768px) {
    #wayfindingContextBar { display: none !important; }
    #wayfindingBreadcrumb { padding: 8px 0 4px; font-size: 16px; }
    #wayfindingBreadcrumb .sep { margin: 0 6px; font-size: 16px; }
    #wayfindingBreadcrumb .ctx-pill { font-size: 12px; margin-left: 6px; }
    .py-1.wf-heading-band-end,
    div.container.wf-heading-band-end { padding-bottom: 0.45rem !important; }
}