/* 前台全站風格統一：比照首頁青綠主題 */
:root {
    --miaoli-primary: #57b0b7;
    --miaoli-primary-dark: #459aa1;
    --miaoli-primary-rgb: 87, 176, 183;
    --miaoli-accent: #fdb913;
    --miaoli-bg: #fbf7f0;
    --miaoli-surface: #fffef9;
    --miaoli-border: #e5ddd0;
    --miaoli-text: #2c2c2c;
    --miaoli-text-muted: #666;
    --miaoli-shadow: 0 3px 12px rgba(var(--miaoli-primary-rgb), 0.14);
    --miaoli-shadow-hover: 0 6px 20px rgba(var(--miaoli-primary-rgb), 0.22);
}

body {
    background: var(--miaoli-bg);
    color: var(--miaoli-text);
    /* frontref/css/all.css 給 body 設了 padding-top:164px 補固定導覽列高度，
       HomeLayout（#wrapper.index）才需要；MainLayout 內頁不需要，強制歸零 */
    padding-top: 0 !important;
}

/* HomeLayout 頁面（首頁、Services…）有固定 header .navbar，還原補偏移 */
body:has(#wrapper.index) {
    padding-top: 164px !important;
}
@media (max-width: 1199.98px) {
    body:has(#wrapper.index) {
        padding-top: 99px !important;
    }
}

/* 常見內頁容器、區塊 */
.page-header,
.filter-section,
.search-filter-section,
.services-list-section,
.content-section {
    color: var(--miaoli-text);
}

.page-header {
    background: linear-gradient(135deg, rgba(var(--miaoli-primary-rgb), 0.12), rgba(var(--miaoli-primary-rgb), 0.04));
    border-bottom: 2px solid rgba(var(--miaoli-primary-rgb), 0.25);
}

.filter-section,
.search-filter-section {
    background: var(--miaoli-surface);
    border-bottom: 1px solid var(--miaoli-border);
}

/* 卡片、面板 */
.card,
.service-card,
.news-card,
.feature-card {
    border: 1px solid rgba(var(--miaoli-primary-rgb), 0.08);
    border-radius: 14px;
    box-shadow: var(--miaoli-shadow);
}

.card:hover,
.service-card:hover,
.news-card:hover,
.feature-card:hover {
    box-shadow: var(--miaoli-shadow-hover);
}

/* 按鈕統一 */
.btn-primary,
.btn-theme,
.btn-search {
    background: var(--miaoli-primary);
    border-color: var(--miaoli-primary);
    color: #fff;
}

.btn-primary:hover,
.btn-theme:hover,
.btn-search:hover {
    background: var(--miaoli-primary-dark);
    border-color: var(--miaoli-primary-dark);
    color: #fff;
}

.btn-outline-primary,
.btn-outline-info {
    color: var(--miaoli-primary);
    border-color: var(--miaoli-primary);
}

.btn-outline-primary:hover,
.btn-outline-info:hover {
    background: var(--miaoli-primary);
    border-color: var(--miaoli-primary);
    color: #fff;
}

.btn-warning {
    background: var(--miaoli-accent);
    border-color: var(--miaoli-accent);
    color: #2c2c2c;
}

/* 表單與互動元素 */
.form-control,
.form-select {
    border: 1px solid var(--miaoli-border);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--miaoli-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--miaoli-primary-rgb), 0.2);
}

a {
    color: var(--miaoli-primary);
}

a:hover {
    color: var(--miaoli-primary-dark);
}

/* 分頁、標籤 */
.pagination .page-link {
    color: var(--miaoli-primary);
    border-color: var(--miaoli-border);
}

.pagination .page-item.active .page-link {
    background: var(--miaoli-primary);
    border-color: var(--miaoli-primary);
}

.badge.bg-primary {
    background: var(--miaoli-accent) !important;
    color: #2c2c2c !important;
}

/* 空狀態與說明文字 */
.empty-state h3,
.empty-state p,
.text-muted {
    color: var(--miaoli-text-muted) !important;
}

/* ===== 行動裝置底部導覽列（mobile-bottom）===== */

/* 桌面（lg+）隱藏，手機才顯示 */
.mobile-bottom {
    display: none !important;
}

@media (max-width: 1199.98px) {
    .mobile-bottom {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1040;
        background: #fff;
        border-top: 1px solid var(--miaoli-border);
        box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
        padding: 0.4rem 0;
        justify-content: space-around;
        align-items: center;
    }

    .mobile-bottom .mobile-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.2rem;
        font-size: 0.7rem;
        color: var(--miaoli-text-muted);
        text-decoration: none;
        padding: 0.25rem 0.5rem;
        border-radius: 8px;
        transition: color 0.2s;
    }

    .mobile-bottom .mobile-btn:hover,
    .mobile-bottom .mobile-btn:active {
        color: var(--miaoli-primary);
    }

    .mobile-bottom .mobile-btn .img {
        position: relative;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-bottom .mobile-btn .img img {
        width: 24px;
        height: 24px;
        object-fit: contain;
    }

    .mobile-bottom .mobile-btn .img .badge {
        position: absolute;
        top: -4px;
        right: -6px;
        font-size: 0.6rem;
        padding: 0.15em 0.35em;
    }

    /* 手機時讓頁面底部留空，避免被 mobile-bottom 遮蓋 */
    body {
        padding-bottom: 64px !important;
    }
}

/* ===== 首頁 header 右側控制列不換行修正 ===== */

/* 右側第二個 navbar-nav（字型切換 + 登入按鈕）：不壓縮、不換行 */
header .navbar .header-top .navbar-collapse .navbar-nav:last-child {
    flex-shrink: 0 !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
}

/* 字型切換的三顆按鈕（小中大）確保排在同一行 */
header .navbar .header-top .nav-item[data-toggle="button"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px;
    flex-shrink: 0;
}

/* ===== 強制統一覆蓋（優先級高，覆蓋各元件 <style> 區塊設定） ===== */

/* body 背景統一使用米色，避免各頁用 #fafafa 覆蓋 */
body {
    background: var(--miaoli-bg) !important;
    color: var(--miaoli-text) !important;
}

/* page-header 統一漸層背景（覆蓋白底 / 橘底設定） */
section.page-header,
div.page-header {
    background: linear-gradient(
        135deg,
        rgba(var(--miaoli-primary-rgb), 0.11) 0%,
        rgba(var(--miaoli-primary-rgb), 0.04) 100%
    ) !important;
    border-bottom: 2px solid rgba(var(--miaoli-primary-rgb), 0.22) !important;
    box-shadow: 0 2px 8px rgba(var(--miaoli-primary-rgb), 0.08) !important;
}

/* 頂部導覽列 hover：由紫色改為主色 */
.top-nav-link:hover {
    color: var(--miaoli-primary) !important;
    background: rgba(var(--miaoli-primary-rgb), 0.1) !important;
    border-color: rgba(var(--miaoli-primary-rgb), 0.45) !important;
}

.top-nav-link.active {
    color: var(--miaoli-primary) !important;
}

/* dropdown hover 統一主色 */
.dropdown-item:hover {
    background-color: rgba(var(--miaoli-primary-rgb), 0.1) !important;
    color: var(--miaoli-primary-dark) !important;
}

/* nav-pills（用於 Downloads、VenueCatalog 等頁）active 狀態使用主色 */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--miaoli-primary) !important;
    border-color: var(--miaoli-primary) !important;
}

.nav-pills .nav-link:hover:not(.active) {
    color: var(--miaoli-primary) !important;
    background-color: rgba(var(--miaoli-primary-rgb), 0.1) !important;
}

/* spinner 使用主色 */
.spinner-border.text-primary {
    color: var(--miaoli-primary) !important;
}

/* 統一 text-primary 顏色 */
.text-primary {
    color: var(--miaoli-primary) !important;
}

/* 統一 border-primary */
.border-primary {
    border-color: var(--miaoli-primary) !important;
}

/* 導覽列（News/Announcements 型）logo-badge */
.logo-badge {
    background: var(--miaoli-primary) !important;
}

/* 導覽列（News/Announcements 型）btn-home */
.btn-home {
    background: var(--miaoli-primary) !important;
    color: #fff !important;
}

/* FAQ 頁的 faq-header hover 使用主色輕底 */
.faq-header:hover {
    background: rgba(var(--miaoli-primary-rgb), 0.04) !important;
}

/* FAQ 展開內容背景 */
.faq-content {
    background: rgba(var(--miaoli-primary-rgb), 0.02) !important;
    border-top: 1px solid rgba(var(--miaoli-primary-rgb), 0.12) !important;
}

/* 修正 FAQ pagination hover 紫色 */
.pagination .page-link:hover {
    background: rgba(var(--miaoli-primary-rgb), 0.1) !important;
    border-color: var(--miaoli-primary) !important;
    color: var(--miaoli-primary) !important;
}

/* 統一 location-badge（Contact 頁）使用主色 */
.location-badge {
    background: rgba(var(--miaoli-primary-rgb), 0.12) !important;
    color: var(--miaoli-primary-dark) !important;
}

/* 統一 info-icon（Contact 頁）背景使用主色 */
.info-icon {
    background: var(--miaoli-primary) !important;
}

/* 統一 navigation-section 麵包屑連結（如 Downloads 的舊藍色） */
.navigation-section .breadcrumb-item a,
.back-button-container .btn {
    color: var(--miaoli-primary) !important;
    border-color: var(--miaoli-primary) !important;
}

.navigation-section .breadcrumb-item a:hover,
.back-button-container .btn:hover {
    background-color: var(--miaoli-primary) !important;
    color: #fff !important;
}

/* Downloads 下載按鈕（.btn-download 覆蓋） */
.btn-download {
    background: var(--miaoli-primary) !important;
    border: none !important;
    box-shadow: 0 3px 10px rgba(var(--miaoli-primary-rgb), 0.3) !important;
}

.btn-download:hover {
    background: var(--miaoli-primary-dark) !important;
    box-shadow: 0 5px 15px rgba(var(--miaoli-primary-rgb), 0.4) !important;
}

/* Downloads 文件資訊左邊框與 icon 包裹器 */
.file-info-row {
    border-left-color: var(--miaoli-primary) !important;
}

.file-icon-wrapper {
    background: rgba(var(--miaoli-primary-rgb), 0.1) !important;
}

/* Downloads 分頁（覆蓋舊深藍） */
.pagination .page-item.active .page-link {
    background-color: var(--miaoli-primary) !important;
    border-color: var(--miaoli-primary) !important;
}

.pagination .page-link {
    color: var(--miaoli-primary) !important;
}

/* card 卡片 hover border 統一主色 */
.download-card:hover {
    border-color: var(--miaoli-primary) !important;
}

/* ===== 使用者登入頁 icon ===== */
.login-icon-wrapper {
    background: rgba(var(--miaoli-primary-rgb), 0.1) !important;
    color: var(--miaoli-primary) !important;
}