/*
 * 新版介面的共用樣式（取代原本的 BootsFaces）
 * 元件外觀由 PrimeFaces saga 主題負責，排版使用 PrimeFlex；這裡只放頁面框架與表單的共用規則。
 * class 一律加上 eco- 前綴，避免與 css/core.css 中的 Bootstrap 3 樣式（舊前台頁仍在使用）衝突。
 */

/*
 * 基準字級：css/core.css 中的 Bootstrap 3 把 html 設為 10px，
 * 但 saga 主題與 PrimeFlex 的尺寸都以 rem 計算，若沿用 10px，所有 PrimeFaces 元件都會縮小約三成。
 * 改為 15px，與原本 Bootstrap 的內文字級（15px）一致；網站使用者年齡層偏高，字級不宜小於原本的大小。
 * Bootstrap 3 本身沒有使用 rem，調整 html 字級不影響其樣式。
 */
html {
    font-size: 15px;
}

/* 頁面寬度與外框 */
.eco-page {
    margin: 0 auto;
    padding: 1.5rem 15px 1rem 15px;
}

/*
 * 內容寬度與改版前的 .container 相同，讓內容與頁首導覽列對齊。
 * 改版前 .container 的寬度實際由 css/core.css 決定（覆蓋了 Bootstrap 3 的 750／970／1170px）：
 * 540／720／960／1140px，1400px 以上為 1288px。
 */
@media (min-width: 576px) {
    .eco-page {
        width: 540px;
    }
}

@media (min-width: 768px) {
    .eco-page {
        width: 720px;
    }
}

@media (min-width: 992px) {
    .eco-page {
        width: 960px;
    }
}

@media (min-width: 1200px) {
    .eco-page {
        width: 1140px;
    }
}

@media (min-width: 1400px) {
    .eco-page {
        width: 1288px;
    }
}

/* 前台頁面：上方是 banner 與空行，內容直接接在下方，與改版前位置相同 */
.eco-page.eco-front {
    padding-top: 0;
}

.eco-card {
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    padding: 1.25rem 1.5rem;
}

.eco-card-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #343a40;
    margin: 0 0 1rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e9ecef;
}

/* 卡片標題列：標題在左、操作按鈕在右（列表頁） */
.eco-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e9ecef;
}

.eco-card-head .eco-card-title {
    margin: 0;
    padding: 0;
    border: 0;
}

.eco-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/*
 * 後台列表最下方的說明與連結（WEB-INF/templates/listRange.xhtml）：
 * 「以上為 2025 年以後的活動。查看更早的活動 ›」，字級 1rem（15px）。
 */
.eco-list-more {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed #dee2e6;
    font-size: 1rem;
    color: #6c757d;
}

.eco-list-more a {
    margin-left: 0.25rem;
    color: #1565c0;
    font-weight: 600;
    text-decoration: none;
}

.eco-list-more a:hover,
.eco-list-more a:focus {
    text-decoration: underline;
}

/* 標題列右側的圖例，例如「尚未撰寫／已撰寫」 */
.eco-hint-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    color: #495057;
}

.eco-legend-todo {
    color: #2196f3;
}

.eco-legend-done {
    color: #689f38;
}

/*
 * 列表（jQuery DataTables）：沿用 DataTables 的排序與搜尋，外觀配合新版介面。
 * 字級維持改版前的 12pt；報名期間等附屬資訊為 11pt。
 * 表頭只設定 background-color，排序圖示是 DataTables 以 background-image 顯示的。
 */
table.dataTable.eco-dt {
    font-size: 12pt;
    color: #343a40;
    border: 1px solid #dee2e6;
    border-collapse: collapse;
}

table.dataTable.eco-dt thead th {
    background-color: #f8f9fa;
    color: #495057;
    font-weight: 600;
    padding: 0.75rem 1.75rem 0.75rem 0.75rem;
    border-bottom: 2px solid #dee2e6;
    text-align: left;
}

table.dataTable.eco-dt tbody td {
    padding: 0.65rem 0.75rem;
    border-top: 1px solid #e9ecef;
    vertical-align: middle;
}

table.dataTable.eco-dt.no-footer {
    border-bottom: 1px solid #dee2e6;
}

table.dataTable.eco-dt.stripe tbody tr.odd {
    background-color: #fafbfc;
}

table.dataTable.eco-dt.hover tbody tr:hover {
    background-color: #eef5fd;
}

.eco-dt-sub {
    font-size: 11pt;
    color: #6c757d;
}

/*
 * h:panelGroup layout="block" 在沒有 id、style、styleClass 時不會輸出 div，內容會與前後文字接在同一行；
 * 需要獨立成一行的（例如「證號：…」「生日：…」）加上 eco-line。
 */
.eco-line {
    display: block;
}

/* 只在窄螢幕（992px 以下）／小螢幕（768px 以下）顯示的區塊，例如列表內合併顯示的資訊 */
@media (min-width: 992px) {
    .eco-narrow-block {
        display: none;
    }
}

@media (min-width: 768px) {
    .eco-small-block {
        display: none;
    }
}

/* 活動報名管理：所選活動的標題區與名單中的志工資訊（改版前為 24px／14pt／16pt，名單姓名 11pt、資訊 9pt，這裡放大） */
.eco-reg-heading {
    text-align: center;
    padding: 1.25rem 0 1.25rem 0;
    margin-bottom: 1rem;
    border-top: 1px solid #e9ecef;
}

.eco-reg-heading-main {
    font-size: 1.6rem;
    font-weight: 700;
    color: #2c3e50;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.eco-reg-heading-title {
    font-size: 14pt;
    color: #555555;
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.eco-reg-heading-sub {
    font-size: 16pt;
    font-weight: 700;
}

.eco-reg-name {
    font-weight: 700;
}

.eco-reg-detail {
    font-size: 11pt;
    color: #6c757d;
    margin-left: 0.5rem;
}

/* PrimeFaces 表格作為名單時（例如臨時任務的參與人員）：字級與列表一致為 12pt，改版前約 16.5px */
.ui-datatable.eco-ptable {
    font-size: 12pt;
}

/*
 * 列表的操作按鈕欄（修改、刪除）：寬螢幕時按鈕並排，窄螢幕時上下排列以讓出空間給內容欄。
 * 表格需設定 table-layout: fixed 才會依表頭寬度配置；表頭寬度不含內距（左右共 2.5rem）。
 */
table.dataTable.eco-dt th.eco-dt-actions {
    width: 10.5rem;
}

table.dataTable.eco-dt .eco-row-actions {
    justify-content: center;
}

/* 按鈕較多的操作欄（例如活動記錄的各區撰寫按鈕、人員的修改／離隊／刪除） */
table.dataTable.eco-dt th.eco-dt-actions.eco-dt-actions-wide {
    width: 20.5rem;
}

/*
 * 992～1199px（例如 iPad Pro 13 直放、iPad Air 橫放）時內容區較窄。
 * 原本操作欄只留兩個按鈕寬（11rem），人員的修改／離隊／刪除會排成 2＋1，2026-11 改為放得下一列三個
 */
@media (min-width: 992px) and (max-width: 1199.98px) {
    table.dataTable.eco-dt th.eco-dt-actions.eco-dt-actions-wide {
        width: 16rem;
    }
}

/*
 * 活動記錄的各區撰寫按鈕（eco-dt-actions-regions，最多 5 個：一～四區＋園區）：按鈕左右內距縮小一些；
 * 1200px 以上一列排完；992～1199px 放不下一列（會把活動名稱擠得太窄），改為等寬格狀排列：
 * 四個時 2＋2、兩個時一列、其他（五個）每列 3 個（3＋2），不再置中排成 2＋2＋1 或 4＋1。
 * 992px 以下與其他操作欄相同，上下排列
 */
table.dataTable.eco-dt .eco-row-actions-regions .ui-button .ui-button-text {
    padding-left: 1.9rem;
    padding-right: 0.6rem;
}

table.dataTable.eco-dt .eco-row-actions-regions .ui-button .ui-button-icon-left {
    left: 0.45rem;
}

@media (min-width: 1200px) {
    table.dataTable.eco-dt th.eco-dt-actions.eco-dt-actions-regions {
        width: 24.5rem;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    table.dataTable.eco-dt .eco-row-actions-regions {
        display: grid;
        grid-template-columns: repeat(3, max-content);
        justify-content: center;
    }

    table.dataTable.eco-dt .eco-row-actions-regions:has(> :nth-child(4):last-child),
    table.dataTable.eco-dt .eco-row-actions-regions:has(> :nth-child(2):last-child) {
        grid-template-columns: repeat(2, max-content);
    }
}

/*
 * 名稱欄（eco-dt-main-sm／-md）：桌機有多欄時用固定寬度；欄位變少時（-sm：768px 以下、-md：992px 以下）改為吸收剩下的寬度。
 * 原本在手機上「編號＋名稱＋操作」三欄都是固定寬度，加起來比畫面寬，表格超出卡片、整頁可以左右捲動
 * （植物／動物資料、科別、人員、離隊志工列表）。表頭的寬度寫在 style 屬性，所以要用 !important
 */
@media (max-width: 767.98px) {
    table.dataTable.eco-dt th.eco-dt-main-sm {
        width: auto !important;
    }
}

@media (max-width: 991.98px) {
    table.dataTable.eco-dt th.eco-dt-main-md {
        width: auto !important;
    }
}

@media (max-width: 991.98px) {
    table.dataTable.eco-dt th.eco-dt-actions,
    table.dataTable.eco-dt th.eco-dt-actions.eco-dt-actions-wide {
        width: 5.5rem;
    }

    table.dataTable.eco-dt .eco-row-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/*
 * 表格欄位依螢幕寬度顯示：eco-wide-only 只在寬螢幕顯示、eco-narrow-only 只在窄螢幕顯示。
 * 分界 992px 沿用改版前 Bootstrap 3 的 hidden-xs / hidden-sm（PrimeFlex 沒有 table-cell 的顯示類別）。
 * eco-medium-up 為 768px 以上顯示（對應 Bootstrap 3 只有 hidden-xs 的欄位）。
 */
.eco-wide-only,
.eco-medium-up,
.eco-wide-only-inline {
    display: none;
}

/* 行內文字（例如表頭的「姓名」）只在寬螢幕顯示 */
@media (min-width: 992px) {
    .eco-wide-only-inline {
        display: inline;
    }
}

@media (min-width: 768px) {
    .eco-medium-up {
        display: table-cell;
    }

    /* 只在 768px 以下顯示（對應 Bootstrap 3 的 hidden-sm hidden-md hidden-lg） */
    .eco-small-only {
        display: none;
    }
}

@media (min-width: 992px) {
    .eco-wide-only {
        display: table-cell;
    }

    .eco-narrow-only {
        display: none;
    }
}

/* 列表上方：左側筆數、右側搜尋框 */
.dataTables_wrapper .eco-dt-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.dataTables_wrapper .eco-dt-top .dataTables_info,
.dataTables_wrapper .eco-dt-top .dataTables_filter {
    float: none;
    padding: 0;
    font-size: 1rem;
    color: #495057;
}

.dataTables_wrapper .dataTables_filter label {
    font-weight: 600;
}

.dataTables_wrapper .dataTables_filter input {
    font-size: 1rem;
    font-weight: normal;
    color: #495057;
    min-width: 14rem;
    margin-left: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 6px;
    outline: none;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: #2196f3;
    box-shadow: 0 0 0 0.2rem #a6d5fa;
}

/*
 * 有分頁的列表（前台的活動公告、最新訊息）：上方左側「每頁顯示」、右側搜尋框；下方左側筆數、右側分頁按鈕。
 * 字級維持改版前的 15px。
 */
.dataTables_wrapper .eco-dt-top .dataTables_length,
.dataTables_wrapper .eco-dt-bottom .dataTables_info,
.dataTables_wrapper .eco-dt-bottom .dataTables_paginate {
    float: none;
    padding: 0;
    font-size: 1rem;
    color: #495057;
}

.dataTables_wrapper .dataTables_length select {
    font-size: 1rem;
    color: #495057;
    margin: 0 0.35rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid #ced4da;
    border-radius: 6px;
    background-color: #ffffff;
}

.dataTables_wrapper .eco-dt-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.dataTables_wrapper .eco-dt-bottom .dataTables_paginate .paginate_button {
    font-size: 1rem;
    min-width: 2.5rem;
    margin: 0 0.1rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #ffffff;
    color: #495057 !important;
}

.dataTables_wrapper .eco-dt-bottom .dataTables_paginate .paginate_button:hover {
    background: #eef5fd;
    border-color: #90caf9;
    color: #1565c0 !important;
}

.dataTables_wrapper .eco-dt-bottom .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .eco-dt-bottom .dataTables_paginate .paginate_button.current:hover {
    background: #2196f3;
    border-color: #2196f3;
    color: #ffffff !important;
}

.dataTables_wrapper .eco-dt-bottom .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .eco-dt-bottom .dataTables_paginate .paginate_button.disabled:hover {
    background: #ffffff;
    border-color: #e9ecef;
    color: #adb5bd !important;
}

/* 前台列表的標題連結：改版前為黑字，改為藍字較容易看出可以點選 */
.eco-front table.dataTable.eco-dt a {
    color: #1565c0;
}

.eco-front table.dataTable.eco-dt a:hover {
    text-decoration: underline;
}

/* 前台頁的標題（例如「活動與訊息 - 最新訊息」）：字級沿用 core.css，上方不留外距，與改版前位置相同 */
.eco-front h1.area-path {
    margin-top: 0;
}

/* 表單欄位 */
.eco-form .eco-field {
    margin-bottom: 1.1rem;
}

/* 表單中的 PrimeFlex 欄位：取消上下內距，避免與 .eco-field 的間距疊加 */
.eco-form .grid > [class*="col"] {
    padding-top: 0;
    padding-bottom: 0;
}

.eco-label {
    display: block;
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.4rem;
}

/* 勾選清單：多個核取方塊自動排成數欄（例如人員的身份類別、寄信對象） */
.eco-check-list > .eco-line {
    margin-bottom: 0.35rem;
}

.eco-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.35rem 1rem;
    margin: 0.25rem 0 0.5rem 0;
}

.eco-check-group-title {
    font-weight: 600;
    color: #495057;
    margin-top: 0.5rem;
}

/* 下拉選單（p:menuButton）中的分組標題：以停用的選項呈現（不可點選），但不顯示為灰色 */
body .ui-menu .ui-menuitem-link.eco-menu-header.ui-state-disabled {
    opacity: 1;
    cursor: default;
    background: #f1f3f5;
}

body .ui-menu .ui-menuitem-link.eco-menu-header .ui-menuitem-text {
    font-weight: 700;
    color: #343a40;
}

/* 未改用 PrimeFaces 元件的原生下拉選單與按鈕（例如寄信的「插入代碼」） */
.eco-native-select,
.eco-native-button {
    font-size: 1rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid #ced4da;
    border-radius: 6px;
    background: #ffffff;
    color: #495057;
}

.eco-native-button {
    cursor: pointer;
    margin-left: 0.25rem;
}

.eco-native-button:hover {
    background: #f1f5f9;
}

/* 欄位下的附屬設定（例如勾選後才出現的欄位），以左側色條表示從屬關係 */
.eco-sub {
    margin: 0.5rem 0 0 0.5rem;
    padding: 0.25rem 0 0.25rem 1rem;
    border-left: 3px solid #d0e4f7;
}

/* 文字與數字輸入框排在同一行，例如「採計服勤時數，共 [ 3 ] 小時」 */
.eco-inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.eco-inline .eco-hours {
    width: 5.5rem;
    text-align: right;
}

.eco-tip {
    color: #d32f2f;
}

.eco-hint {
    color: #1565c0;
}

/*
 * CKEditor 內容的字級基準：default.css 的 .ck-content 設為 1.2em（相對於外層），
 * 舊頁面外層是 15px 的 body，所以內容為 18px；放進 PrimeFaces 元件（saga 為 14px）後會變成 16.8px。
 * 凡是編輯器或前台顯示 CKEditor 內容的地方，都包一層 eco-ck-base，讓內容維持 18px，編輯時與前台所見一致。
 */
.eco-ck-base {
    font-size: 15px;
}

/* CKEditor 編輯區 */
.eco-editor {
    border: 2px dashed #ced4da;
    border-radius: 6px;
    padding: 10px;
    min-height: 160px;
}

/* 頁面底部的按鈕列 */
.eco-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
}

/* 表格中的操作按鈕 */
.eco-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

/* 問卷項目的選項預覽 */
.eco-preview {
    margin: 0.25rem 0 0 0.75rem;
    color: #495057;
}

.eco-preview-box {
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 0.2rem 0.5rem;
    font-size: 1rem;
    color: #868e96;
}

.eco-preview-box.is-multiline {
    min-height: 3.5rem;
}

/* 前台的主要操作按鈕（我要報名、修改報名等）：維持改版前的尺寸（16pt、內距 12px 28px） */
.eco-cta-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0 1rem 0;
}

.eco-cta.ui-button {
    font-size: 16pt;
}

/* saga 主題的按鈕規則以 body 開頭，這裡也需加上 body 才能覆蓋 */
body .eco-cta.ui-button .ui-button-text {
    padding: 12px 28px;
}

/* 有圖示的按鈕：圖示放大並留出左側空間 */
body .eco-cta.ui-button.ui-button-text-icon-left .ui-button-text {
    padding-left: 56px;
}

body .eco-cta.ui-button .ui-icon {
    font-size: 16pt;
    width: 1em;
    height: 1em;
    margin-top: -0.5em;
    left: 24px;
}

/*
 * 下拉選單的選項面板：寬度由 js/eco-ui.js 限制在可視範圍內（PrimeFaces 預設會依不換行的選項撐寬，跑出畫面），
 * 放不下的長選項（例如活動名稱）換行顯示
 */
body .ui-selectonemenu-panel .ui-selectonemenu-item {
    white-space: normal;
    overflow-wrap: anywhere;
}

/*
 * 選項面板的高度：PrimeFaces 預設最高 200px（以 inline style 設定），長選項換行後一次只看得到 3 項。
 * 改為最高 400px，但不超過視窗高度的 60%，一般螢幕一次可看到約 7～10 項
 */
body .ui-selectonemenu-panel .ui-selectonemenu-items-wrapper {
    max-height: min(400px, 60vh) !important;
}

/*
 * 日期選擇器的日期與星期：jQuery UI 預設為外層的 0.9 倍，在 saga 主題下只有 13.5px，
 * 改版前約 14.85px，改為與外層相同（15px）。
 */
body .ui-datepicker table {
    font-size: 1em;
}

/* 對話框中的資訊列、欄位標籤與提示：維持改版前的 14pt */
.ui-dialog .eco-info,
.ui-dialog .eco-label,
.ui-dialog .eco-hint,
.ui-dialog .eco-tip {
    font-size: 14pt;
}

/* 對話框中的資料列，例如「活動名稱：…」 */
.eco-info {
    margin: 0 0 0.75rem 0;
    line-height: 1.7;
}

.eco-info-label {
    color: #6c757d;
}

/* 手機：卡片內距縮小、按鈕改為整列寬度，方便點按 */
@media (max-width: 576px) {
    .eco-page {
        /* 底部多留空間，避免右下角的「回到頂端」按鈕蓋住頁尾的操作按鈕 */
        padding: 0.5rem 0.5rem 5rem 0.5rem;
    }

    .eco-card {
        padding: 1rem;
    }

    .eco-actions .ui-button,
    .eco-cta-bar .ui-button {
        flex: 1 1 100%;
    }

    .eco-toolbar {
        width: 100%;
    }

    /*
     * 工具列按鈕每列兩個、等寬；個數為奇數時，最後一個自動佔滿一整列（例如人員資料管理的 2＋2＋「重新載入」）。
     * 文字較長、半列放不下時（例如 320px 的「新增活動公告」）不縮小到文字斷行，改為各自佔滿一整列。
     * 下拉選單按鈕（p:menuButton，例如「QR碼無框」）外面多一層，外層與裡面的按鈕都要撐開，否則會維持原本寬度
     */
    .eco-toolbar > .ui-button,
    .eco-toolbar > .ui-menubutton {
        flex: 1 1 calc(50% - 0.25rem);
        min-width: max-content;
    }

    .eco-toolbar > .ui-menubutton > .ui-button {
        width: 100%;
    }

    .eco-toolbar .ui-selectonemenu {
        flex: 1 1 100%;
    }

    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_filter label {
        width: 100%;
    }

    .dataTables_wrapper .dataTables_filter input {
        min-width: 0;
        width: calc(100% - 3.5rem);
    }

    table.dataTable.eco-dt thead th,
    table.dataTable.eco-dt tbody td {
        padding-left: 0.5rem;
    }
}

/*
 * 志工時數（我的志工時數、志工時數報表）
 * 篩選標籤沿用改版前的 12pt；明細中的「院區／園區車馬費」標籤原為 10px，放大為 0.85rem 方便閱讀。
 */
.eco-label.eco-label-lg {
    font-size: 12pt;
}

/* 明細上方的年度、編號、姓名，維持改版前的 14pt（頁面與對話框皆同） */
.eco-info.eco-info-lg {
    font-size: 14pt;
}

.eco-badge {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 2px 6px;
    border-radius: 3px;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: bold;
    line-height: 1.4;
    vertical-align: middle;
}

.eco-badge-as {
    background-color: #5cb85c;
}

.eco-badge-nbrp {
    background-color: #0275d8;
}

/*
 * 志工時數明細（WEB-INF/templates/volunteerhoursDetail.xhtml）在手機上（寬度 576px 以下）：
 * 表格外面有頁面卡片、展開區塊、分類小框三層，原本各留 15px 內距，表格只剩約 260px 寬，
 * 「項目」欄被擠到 84px，項目名稱斷成 3～4 行，每筆約 120px 高。
 * 改為縮小展開區塊與分類小框的內距，每筆排成兩行：第一行項目名稱，第二行日期（灰字）與車馬費標籤，
 * 時數靠右並加上「小時」；欄位名稱列不顯示。字級不變，平板與桌機仍是三欄表格。
 * 「項目」格設為 display: contents，讓其中的項目名稱（hours-title）與標籤（hours-badges）可以分別排到兩行
 */
@media (max-width: 576px) {
    .volunteer-hours-tabs .ui-accordion .ui-accordion-content {
        padding: 0.5rem 0.4rem;
    }

    .volunteer-hours-tabs .ui-panel .ui-panel-content {
        padding: 0 0.6rem;
    }

    .volunteer-hours-tabs .hours-table,
    .volunteer-hours-tabs .hours-table tbody {
        display: block;
    }

    .volunteer-hours-tabs .hours-table thead {
        display: none;
    }

    .volunteer-hours-tabs .hours-table tbody tr {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        column-gap: 0.75rem;
        row-gap: 2px;
        padding: 8px 0;
        border-bottom: 1px solid #ddd;
    }

    .volunteer-hours-tabs .hours-table tbody tr:last-child {
        border-bottom: 0;
    }

    .volunteer-hours-tabs .hours-table tbody td {
        padding: 0;
        border-bottom: 0;
    }

    /* 日期：第二行 */
    .volunteer-hours-tabs .hours-table tbody td:nth-child(1) {
        grid-row: 2;
        grid-column: 1;
        color: #6c757d;
    }

    /* 項目：名稱在第一行（橫跨日期與標籤兩欄），車馬費標籤在第二行日期右邊 */
    .volunteer-hours-tabs .hours-table tbody td:nth-child(2) {
        display: contents;
    }

    .volunteer-hours-tabs .hours-table .hours-title {
        grid-row: 1;
        grid-column: 1 / span 2;
    }

    .volunteer-hours-tabs .hours-table .hours-badges {
        grid-row: 2;
        grid-column: 2;
        align-self: center;
    }

    .volunteer-hours-tabs .hours-table .hours-badges .eco-badge {
        margin-left: 0;
        margin-right: 0.35rem;
    }

    /* 時數：靠右，跨兩行置中 */
    .volunteer-hours-tabs .hours-table tbody td:nth-child(3) {
        grid-row: 1 / span 2;
        grid-column: 3;
        align-self: center;
        white-space: nowrap;
    }

    .volunteer-hours-tabs .hours-table tbody td:nth-child(3)::after {
        content: " 小時";
    }
}

/* 報表表頭兩列（分類＋欄位）置中；點擊一列開啟明細 */
table.dataTable.eco-dt.eco-dt-report thead th {
    text-align: center;
    vertical-align: middle;
    padding-left: 0.5rem;
    padding-right: 1.5rem;
}

table.dataTable.eco-dt.eco-dt-report thead th.eco-dt-group {
    padding-right: 0.5rem;
    border-bottom: 1px solid #dee2e6;
}

table.dataTable.eco-dt.eco-dt-report tbody td {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

table.dataTable.eco-dt.eco-dt-report tbody tr {
    cursor: pointer;
}

table.dataTable.eco-dt.eco-dt-report.hover tbody tr:hover {
    background-color: #ffe4b5;
}

/*
 * 志工時數報表的姓名（eco-dt-name）不換行：原本姓名欄只分到約 46～62px，三個字的名字在各寬度都會斷成兩行。
 * 992px 以下（平板 12 欄、手機 4 欄）縮小儲存格左右內距，讓出姓名欄需要的寬度，表格不超出卡片
 * （320px 這類最窄的手機會伸進卡片留白，但不超出卡片邊框，也不會整頁左右捲動；改版前在 320px 就已超出 17px）。字級不變
 */
table.dataTable.eco-dt.eco-dt-report tbody td.eco-dt-name {
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    table.dataTable.eco-dt.eco-dt-report tbody td {
        padding-left: 0.3rem;
        padding-right: 0.3rem;
    }
}

/* 頁尾：版權與到訪人次各一行置中，與改版前相同 */
.eco-footer {
    padding: 10px 15px;
    text-align: center;
    line-height: 1.4;
}

/*
 * 最新消息對話框（latestnews.xhtml）：標題沿用改版前的 25px 綠色粗體；
 * 內容外層加 eco-ck-base，CKEditor 內容維持 18px（標題、日期、上一則／下一則的樣式在 core.css）。
 */
#latestNewsModal .ui-dialog-titlebar {
    display: flex;
    align-items: center;
}

/* 標題置中：左側留出與右側關閉鈕相同的寬度 */
#latestNewsModal .ui-dialog-title {
    flex: 1 1 auto;
    padding-left: 2rem;
    text-align: center;
    font-size: 25px;
    font-weight: bold;
    color: #2a9d8f;
    letter-spacing: 5px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

/* 消息內容中的圖片與表格不超出對話框；過寬的表格在表格內左右捲動 */
#latestNewsModal .ck-content img {
    max-width: 100%;
    height: auto;
}

/* CKEditor 的 figure.table 為 display: table，會隨內容撐寬，改為 block 才能限制寬度 */
#latestNewsModal .ck-content figure.table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

#latestNewsModal .eco-news-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 2.5rem;
}

#latestNewsModal .eco-news-nav.is-top {
    padding-bottom: 20px;
}

#latestNewsModal .eco-news-nav.is-bottom {
    padding-top: 30px;
}

/*
 * 登入、變更密碼、忘記密碼等獨立頁（WEB-INF/templates/auth.xhtml）
 * 改版前這些頁面的外觀靠 BootsFaces 載入的 Bootstrap 3，這裡改為自己定義，不再依賴 Bootstrap。
 * 配色與網站一般頁面一致（2026-11 由綠色系改回）：白色卡片（同 eco-card 的淺灰框線）、藍色主按鈕。
 * 這些頁面沒有頁首選單，白色卡片放在白底上會與背景融在一起，所以頁面底色用很淡的灰藍襯出卡片；有選單的頁面維持白底。
 * 字級不小於改版前：標題 14pt → 18pt、說明 11pt → 12pt、標籤 10pt～11pt → 12pt、輸入框 12pt。
 * saga 主題的規則以 body 開頭，覆寫時也加上 body。
 */
body.eco-auth-page {
    min-height: 100vh;
    box-sizing: border-box;
    margin: 0;
    padding: 28px 16px 40px 16px;
    background: #f5f7fa;
    background-attachment: fixed;
    color: #495057;
    font-family: "Microsoft JhengHei", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

/* 卡片上方的網站標誌（點選回首頁）；登入頁有自己的形象區，不顯示 */
.eco-auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin: 0 auto 1.25rem auto;
    width: fit-content;
    color: #343a40;
    font-size: 18pt;
    font-weight: bold;
    letter-spacing: 3px;
    text-decoration: none;
}

.eco-auth-brand img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 3px solid #ffffff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    object-fit: cover;
}

.eco-login-page .eco-auth-brand {
    display: none;
}

.eco-auth-card {
    box-sizing: border-box;
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem 2.5rem 2.25rem 2.5rem;
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.eco-auth-title {
    margin: 0 0 1.25rem 0;
    text-align: center;
    font-size: 18pt;
    font-weight: bold;
    color: #343a40;
    letter-spacing: 2px;
}

/* 說明文字（密碼規則等）：淡藍底的提示框 */
.eco-auth-intro {
    margin-bottom: 1.5rem;
    padding: 0.85rem 1rem;
    font-size: 12pt;
    line-height: 1.7;
    text-align: justify;
    background-color: #eef5fd;
    border-left: 4px solid #2196f3;
    border-radius: 6px;
}

.eco-auth-intro .eco-em {
    color: #c62828;
    font-weight: bold;
}

.eco-auth-intro a,
.eco-auth-message a {
    color: #1565c0;
    text-decoration: underline;
}

/* 錯誤訊息：卡片內的紅色提示框，登入頁也使用（WEB-INF/templates/authErrors.xhtml、login.xhtml） */
.eco-auth-errors {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    margin-bottom: 1.25rem;
    padding: 0.75rem 1rem;
    font-size: 12pt;
    line-height: 1.6;
    color: #a12622;
    background-color: #fdecea;
    border-left: 4px solid #d32f2f;
    border-radius: 6px;
}

.eco-auth-errors > .pi {
    margin-top: 0.3rem;
}

/* 欄位標籤：寬度貼齊文字，有錯誤時由後端加上淡紅底（與登入頁相同） */
body .eco-auth-card .eco-label {
    display: inline-block;
    padding: 0 2px;
    font-size: 12pt;
    font-weight: bold;
    color: #495057;
}

.eco-auth-card .eco-required {
    color: #d32f2f;
}

/* 輸入框：高度加大、圓角，取得焦點時為藍框 */
body .eco-auth-card .ui-inputfield {
    height: 44px;
    font-size: 12pt;
    font-family: inherit;
    color: #495057;
    border: 1px solid #ced4da;
    border-radius: 8px;
    background-color: #ffffff;
}

body .eco-auth-card .ui-inputfield:enabled:hover {
    border-color: #2196f3;
}

body .eco-auth-card .ui-inputfield:enabled:focus {
    border-color: #2196f3;
    box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.2);
    background-color: #ffffff;
}

/* 密碼欄位：占滿欄寬，右側為顯示／隱藏密碼的圖示（p:password 的 toggleMask） */
body .eco-auth-card .ui-password {
    display: block;
    width: 100%;
    padding: 0;
}

body .eco-auth-card .ui-password .ui-inputfield {
    width: 100%;
    padding-right: 2.75rem;
}

body .eco-auth-card .ui-password-icon {
    right: 0.95rem;
    font-size: 1.1rem;
    color: #6c757d;
}

/* 唯讀的欄位值（例如重設密碼頁的帳號） */
.eco-auth-value {
    font-size: 12pt;
    padding: 0.25rem 0;
}

/* 欄位下方的提示（例如輸入帳號後提示的電子信箱），改版前為 10pt 藍字靠右 */
.eco-auth-hint {
    display: block;
    margin-top: 0.4rem;
    text-align: right;
    font-size: 11pt;
    color: #1565c0;
}

/* 結果訊息（密碼更改成功、確認信已寄出、網址失效） */
.eco-auth-message {
    padding: 0.5rem 0 1rem 0;
    font-size: 12pt;
    line-height: 1.7;
    text-align: center;
}

/* 底部按鈕列（確定、重填、返回）：主按鈕為藍色，字級 12pt */
.eco-auth-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e9ecef;
}

.eco-auth-actions.is-center {
    justify-content: center;
}

body .eco-auth-actions .ui-button {
    border-radius: 8px;
    text-decoration: none;
}

/* p:linkButton 內層是連結，去除底線並沿用按鈕的文字顏色 */
body .eco-auth-actions .ui-linkbutton a {
    color: inherit;
    text-decoration: none;
}

body .eco-auth-actions .ui-button .ui-button-text {
    font-size: 12pt;
}

body .eco-auth-actions .ui-button:not(.ui-button-secondary) {
    background: #2196f3;
    border-color: #2196f3;
    color: #ffffff;
}

body .eco-auth-actions .ui-button:not(.ui-button-secondary):enabled:hover {
    background: #0d89ec;
    border-color: #0d89ec;
}

body .eco-auth-actions .ui-button.ui-button-secondary.ui-button-outlined {
    color: #495057;
    border-color: #ced4da;
}

body .eco-auth-actions .ui-button.ui-button-secondary.ui-button-outlined:enabled:hover {
    background: #eef5fd;
    color: #343a40;
    border-color: #2196f3;
}

@media (max-width: 576px) {
    body.eco-auth-page {
        padding: 16px 12px 30px 12px;
    }

    .eco-auth-card {
        padding: 1.25rem 1.25rem 1.5rem 1.25rem;
    }

    .eco-auth-actions .ui-button {
        flex: 1 1 auto;
    }
}

/*
 * 頁首導覽列（WEB-INF/templates/header.xhtml）：固定在畫面上方，高度 50px；開合由 js/eco-ui.js 處理。
 * 字級與改版前相同（16.5px），顏色沿用改版前的藍色（#008cba，目前所在頁面 #006687）。
 * - 992px 以上：選單橫排（992～1199px 項目間距隨寬度縮小、工具鈕只顯示圖示），下拉選單滑過或點選即開啟。
 * - 992px 以下：改為「選單」按鈕開啟的下拉面板，下拉選單改為點選展開。
 * - 寬螢幕但一列放不下時（例如區域名稱變長），js/eco-ui.js 的 ecoCheckNavFit 會加上 is-compact，
 *   同樣收合成「選單」按鈕，不會擠成兩列或超出畫面。
 * 因此以下先寫收合時的樣式，再於 992px 以上、沒有 is-compact 時改為橫排。
 * 改版前 default.css 讓 body 留出 46px、core.css 另在 768～1199px 讓 banner 與後台頁再下移 45px（舊導覽列在這個寬度會折成兩行），
 * 新的導覽列不會折行，統一由 body 留出導覽列的高度。
 */
body.eco-site {
    padding-top: 50px;
}

body.eco-site .background-image,
body.eco-site .admin-div {
    margin-top: 0;
}

.eco-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    height: 50px;
    background-color: #008cba;
    border-bottom: 1px solid #006687;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    font-size: 16.5px;
}

.eco-nav-inner {
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    height: 100%;
    margin: 0 auto;
    padding: 0 15px;
}

/* 網站名稱：只在選單收合時顯示（橫排時 banner 已有網站名稱） */
.eco-nav-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: auto;
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 2px;
    text-decoration: none;
    white-space: nowrap;
}

.eco-nav-brand:hover,
.eco-nav-brand:focus {
    color: #ffffff;
    text-decoration: none;
}

.eco-nav-brand img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.85);
}

/* 選單：收合時是「選單」按鈕開啟的下拉面板 */
.eco-nav-links {
    list-style: none;
    margin: 0;
    display: none;
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    max-height: calc(100vh - 50px);
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    padding: 0.25rem 0 0.75rem 0;
    background-color: #ffffff;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
}

.eco-nav.is-menu-open .eco-nav-links {
    display: flex;
}

.eco-nav-links > li {
    position: relative;
    display: block;
}

/* 第一層選單項目（連結與下拉選單的按鈕） */
.eco-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.3rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0.8rem 1.25rem;
    color: #343a40;
    font-family: inherit;
    font-size: 16.5px;
    line-height: 1.4;
    white-space: nowrap;
    text-align: left;
    text-decoration: none;
    background: none;
    border: 0;
    border-bottom: 1px solid #eef1f3;
    cursor: pointer;
}

.eco-nav-link:hover,
.eco-nav-link:focus,
.eco-nav-dd.is-open > .eco-nav-link {
    color: #006687;
    text-decoration: none;
    background-color: #e6f4f9;
}

.eco-nav-link.is-active {
    color: #006687;
    font-weight: bold;
    background-color: #e6f4f9;
    box-shadow: inset 4px 0 0 #008cba;
}

.eco-nav a:focus-visible,
.eco-nav button:focus-visible {
    outline: 3px solid #ffd54f;
    outline-offset: -3px;
}

.eco-nav-caret {
    font-size: 0.8em;
    transition: transform 0.2s;
}

.eco-nav-dd.is-open .eco-nav-caret {
    transform: rotate(180deg);
}

/* 下拉選單：收合時在面板中往下展開 */
.eco-nav-menu {
    display: none;
    padding: 0.25rem 0 0.5rem 0;
    background-color: #f7fafb;
    border-bottom: 1px solid #eef1f3;
}

.eco-nav-dd.is-open > .eco-nav-menu {
    display: block;
}

.eco-nav-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 1.25rem 0.7rem 2rem;
    color: #343a40;
    font-size: 16.5px;
    line-height: 1.4;
    white-space: normal;
    text-decoration: none;
}

.eco-nav-item .pi {
    width: 1.1rem;
    font-size: 1rem;
    color: #008cba;
    text-align: center;
}

.eco-nav-item:hover,
.eco-nav-item:focus {
    color: #006687;
    background-color: #e6f4f9;
    text-decoration: none;
}

/* 「志工專區」：依權限分組（收合時上下排列，橫排時分欄） */
.eco-nav-dd.is-open > .eco-nav-mega {
    display: flex;
    flex-direction: column;
}

.eco-nav-col {
    min-width: 230px;
    padding-bottom: 0.25rem;
}

.eco-nav-col + .eco-nav-col {
    border-top: 1px solid #e9ecef;
}

.eco-nav-group,
.eco-nav-subgroup {
    padding: 0.55rem 1.25rem 0.3rem 2rem;
    font-size: 15px;
    font-weight: bold;
    color: #00799f;
    letter-spacing: 1px;
}

.eco-nav-subgroup {
    margin-top: 0.35rem;
    border-top: 1px dashed #e3e7ea;
    color: #6c757d;
}

/* 右側工具鈕：最新消息、檢索、選單 */
.eco-nav-tools {
    display: flex;
    align-items: stretch;
}

.eco-nav-news {
    display: flex;
}

.eco-nav-tool {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 12px;
    color: #ffffff;
    font-family: inherit;
    font-size: 16.5px;
    white-space: nowrap;
    text-decoration: none;
    background: none;
    border: 0;
    cursor: pointer;
}

.eco-nav-tool:hover,
.eco-nav-tool:focus,
.eco-nav-tool[aria-expanded="true"] {
    color: #ffffff;
    text-decoration: none;
    background-color: rgba(0, 0, 0, 0.14);
}

.eco-nav-tool .pi {
    font-size: 1.05rem;
}

/* 最新消息的圖示沿用改版前的黃色 */
.eco-nav-news .pi {
    color: #ffd54f;
}

/*
 * 最新消息圖示右上角的則數（紅底白字圓點，外圈一圈導覽列的藍色，與圖示分開）。
 * 以絕對位置疊在圖示上，不佔導覽列寬度；有文字時，文字與圖示之間多留一點空間，避免被圓點蓋住
 */
.eco-nav-news-icon {
    position: relative;
    display: inline-flex;
}

.eco-nav-news-count {
    position: absolute;
    top: -9px;
    right: -11px;
    box-sizing: border-box;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background-color: #d32f2f;
    box-shadow: 0 0 0 2px #008cba;
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
    text-align: center;
}

.eco-nav-news .eco-nav-tool-text {
    margin-left: 6px;
}

/* 檢索面板 */
.eco-nav-search {
    display: none;
    position: absolute;
    top: 100%;
    right: 15px;
    z-index: 1000;
    box-sizing: border-box;
    width: 420px;
    max-width: calc(100vw - 30px);
    padding: 0.75rem;
    background-color: #ffffff;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
}

.eco-nav.is-search-open .eco-nav-search {
    display: block;
}

.eco-nav-search-form {
    display: flex;
    gap: 0.5rem;
}

body .eco-nav-search-form .ui-inputfield {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 16px;
}

/*
 * 992px 以上且一列放得下（沒有 is-compact）：選單橫排，下拉選單浮在導覽列下方。
 * 992～1199px 空間較小：項目左右間距由 6px 隨寬度逐漸加大，到 1200px 時與寬螢幕相同（14px）；工具鈕只顯示圖示
 */
@media (min-width: 992px) {
    .eco-nav:not(.is-compact) .eco-nav-brand,
    .eco-nav:not(.is-compact) .eco-nav-menu-btn {
        display: none;
    }

    .eco-nav:not(.is-compact) .eco-nav-links {
        display: flex;
        position: static;
        flex: 1 1 auto;
        flex-direction: row;
        max-height: none;
        overflow: visible;
        padding: 0;
        background: none;
        box-shadow: none;
    }

    .eco-nav:not(.is-compact) .eco-nav-links > li {
        display: flex;
    }

    .eco-nav:not(.is-compact) .eco-nav-link {
        width: auto;
        justify-content: flex-start;
        padding: 0 6px;
        padding: 0 calc(6px + (100vw - 992px) * 0.0385);
        color: #ffffff;
        border-bottom: 0;
    }

    .eco-nav:not(.is-compact) .eco-nav-link:hover,
    .eco-nav:not(.is-compact) .eco-nav-link:focus,
    .eco-nav:not(.is-compact) .eco-nav-dd.is-open > .eco-nav-link {
        color: #ffffff;
        background-color: rgba(0, 0, 0, 0.14);
    }

    .eco-nav:not(.is-compact) .eco-nav-link.is-active {
        color: #ffffff;
        font-weight: normal;
        background-color: #006687;
        box-shadow: none;
    }

    .eco-nav:not(.is-compact) .eco-nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        min-width: 240px;
        padding: 0.4rem 0;
        background-color: #ffffff;
        border-bottom: 0;
        border-radius: 0 0 8px 8px;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
    }

    .eco-nav:not(.is-compact) .eco-nav-dd-end > .eco-nav-menu {
        left: auto;
        right: 0;
    }

    .eco-nav:not(.is-compact) .eco-nav-item {
        padding: 0.6rem 1.25rem;
        white-space: nowrap;
    }

    .eco-nav:not(.is-compact) .eco-nav-dd.is-open > .eco-nav-mega {
        flex-direction: row;
    }

    .eco-nav:not(.is-compact) .eco-nav-col + .eco-nav-col {
        border-top: 0;
        border-left: 1px solid #e9ecef;
    }

    .eco-nav:not(.is-compact) .eco-nav-group,
    .eco-nav:not(.is-compact) .eco-nav-subgroup {
        padding-left: 1.25rem;
    }

    /* 1400px 以下空間不足，工具鈕只顯示圖示 */
    .eco-nav:not(.is-compact) .eco-nav-tool-text {
        display: none;
    }

    .eco-nav:not(.is-compact) .eco-nav-tool {
        padding: 0 8px;
    }

    /* 最新消息的則數圓點凸出圖示右側，右邊多留一點空間，不貼著檢索圖示 */
    .eco-nav:not(.is-compact) .eco-nav-news .eco-nav-tool {
        padding-right: 12px;
    }
}

@media (min-width: 992px) and (hover: hover) {
    .eco-nav:not(.is-compact) .eco-nav-dd:hover > .eco-nav-menu {
        display: block;
    }

    .eco-nav:not(.is-compact) .eco-nav-dd:hover > .eco-nav-mega {
        display: flex;
    }

    .eco-nav:not(.is-compact) .eco-nav-dd:hover > .eco-nav-link {
        background-color: rgba(0, 0, 0, 0.14);
    }
}

@media (min-width: 1200px) {
    .eco-nav-inner {
        width: 1140px;
    }

    .eco-nav:not(.is-compact) .eco-nav-link {
        padding: 0 14px;
    }

    .eco-nav:not(.is-compact) .eco-nav-tool {
        padding: 0 12px;
    }
}

@media (min-width: 1400px) {
    .eco-nav-inner {
        width: 1288px;
    }

    .eco-nav:not(.is-compact) .eco-nav-tool-text {
        display: inline;
    }
}

/*
 * 手機：「檢索」只顯示圖示；「選單」保留文字。
 * 「最新消息」保留文字（2026-11 起，年長使用者只看圖示不易明白），只有 360px 以下放不下時才只顯示圖示
 */
@media (max-width: 576px) {
    .eco-nav-inner {
        padding: 0 6px 0 12px;
    }

    .eco-nav-tool {
        padding: 0 10px;
    }

    [data-eco-nav="search"] .eco-nav-tool-text {
        display: none;
    }

    .eco-nav-search {
        position: fixed;
        top: 50px;
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
        border-radius: 0;
    }
}

@media (max-width: 359.98px) {
    .eco-nav-news .eco-nav-tool-text {
        display: none;
    }
}

/*
 * 原本寫在頁面上的樣式（2026-11 由 style="..." 移出）。
 * 數值與原本完全相同（字級不變）；為了與內嵌樣式一樣不被元件主題（例如 .ui-fluid 的按鈕寬度）蓋過，皆加上 !important。
 * 置中、間距、寬度等 PrimeFlex 已有的（text-center、mb-2、w-auto 等，同樣是 !important）直接用 PrimeFlex，不在這裡重複定義。
 * 仍留在頁面上的：表格欄寬（th、td、col、p:column、table 的 width，DataTables 會讀取）、含 #{...} 的動態樣式、
 * 由 JS 切換顯示的 display: none（admin/checkin/checkin.xhtml），以及 location.xhtml 由編輯器貼入的內容。
 */

/* 所有對話框在窄螢幕不超出畫面（原本每個 p:dialog 各自寫 max-width: 95vw） */
.ui-dialog {
    max-width: 95vw !important;
}

/* 字級（PrimeFlex 的字級是 rem，與原本的 pt 不同，所以另外定義） */
.eco-fs-12pt {
    font-size: 12pt !important;
}

.eco-fs-14pt {
    font-size: 14pt !important;
}

/* PrimeFlex 間距級距（0.25、0.5、1rem…）以外的數值 */
.eco-mb-04 {
    margin-bottom: 0.4rem !important;
}

.eco-mb-075 {
    margin-bottom: 0.75rem !important;
}

.eco-mt-075 {
    margin-top: 0.75rem !important;
}

.eco-ml-075 {
    margin-left: 0.75rem !important;
}

.eco-indent {
    padding-left: 1.25rem !important;
}

.eco-maxw-32rem {
    max-width: 32rem !important;
}

.eco-minw-13rem {
    min-width: 13rem !important;
}

.eco-text-inherit {
    color: inherit !important;
}

.eco-text-success {
    color: #2e7d32 !important;
}

.eco-break-all {
    word-break: break-all !important;
}

.eco-spacer-10 {
    height: 10px !important;
}

.eco-spacer-50 {
    height: 50px !important;
}

/* 人員離隊、取消離隊、刪除確認對話框的說明文字 */
.eco-dialog-text {
    font-size: 14pt !important;
    line-height: 1.8 !important;
}

/* 新增／修改活動頁欄位下方的灰色說明 */
.eco-field-hint {
    color: #868e96 !important;
    font-size: 0.85rem !important;
}

/* 活動內頁（event.xhtml）：標題下方的活動日期、公告群組、報名日期、供餐 */
.eco-event-meta {
    padding: 5px 0px 5px 15px !important;
}

.eco-event-meta-text {
    color: #204d74 !important;
    font-size: 13pt !important;
}

/* 活動內頁：未登入時「請先登入以查看…」的提示（活動記錄頁籤等） */
.eco-login-prompt {
    text-align: center !important;
    padding: 40px 20px !important;
}

.eco-login-prompt-text {
    display: block !important;
    font-size: 14pt !important;
    color: #666 !important;
    margin-bottom: 20px !important;
}

/* 活動內頁「人員報到名單」：各區組的報到人員 */
.eco-checkin-box {
    margin-bottom: 20px !important;
    padding: 15px !important;
    background-color: #f5f5f5 !important;
    border-radius: 5px !important;
}

.eco-checkin-box-sm {
    max-width: 500px !important;
}

.eco-checkin-box-md {
    max-width: 650px !important;
}

.eco-checkin-box-title {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    color: #333 !important;
    font-size: 16pt !important;
}

.eco-checkin-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    gap: 10px !important;
    font-size: 14pt !important;
}

.eco-checkin-item {
    padding: 5px 10px !important;
    background-color: white !important;
    border-radius: 3px !important;
    border-left: 3px solid #337ab7 !important;
}

/* 測試報到頁（admin/checkin/testCheckin.xhtml） */
.eco-testcheckin {
    text-align: center !important;
    margin: 30px 0 !important;
}

.eco-testcheckin-box {
    background-color: #fff3cd !important;
    border: 1px solid #ffc107 !important;
    border-radius: 5px !important;
    padding: 20px !important;
    max-width: 400px !important;
    margin: 0 auto !important;
}

.eco-testcheckin-title {
    display: block !important;
    color: #856404 !important;
    font-weight: bold !important;
    font-size: 14pt !important;
    margin-bottom: 10px !important;
}

.eco-testcheckin-desc {
    display: block !important;
    color: #856404 !important;
    font-size: 10pt !important;
    margin-bottom: 20px !important;
}

.eco-testcheckin-field {
    margin-bottom: 15px !important;
}

.eco-testcheckin-label {
    display: block !important;
    text-align: left !important;
    margin-bottom: 5px !important;
    font-weight: bold !important;
}

.eco-testcheckin-input {
    width: 100% !important;
    padding: 10px !important;
    font-size: 14pt !important;
    border: 1px solid #ffc107 !important;
    border-radius: 3px !important;
}