/* =============================================================================
   客家幣2.0 主題樣式（載入順序：bootstrap.min.css → bootstrap-icons → 本檔）
   視覺語彙：客家藍染靛藍為主色、桐花金為點綴（呼應「幣」）、花布桃紅為輔助。
   Bootstrap 5.3 以 CSS 變數接管配色，避免改動原始碼或重新編譯 Sass。
   ============================================================================= */

/* ---------- 色票與全域 token ---------- */
:root {
    --hk-indigo: #275b87;         /* 藍染主色 */
    --hk-indigo-dark: #1e4668;
    --hk-indigo-deeper: #142f47;
    --hk-indigo-tint: #eaf1f8;    /* 主色淡底 */
    --hk-gold: #d9a441;           /* 桐花金 */
    --hk-gold-dark: #b98a2e;
    --hk-rose: #c85c8e;           /* 花布桃紅（點綴用） */

    --bs-primary: var(--hk-indigo);
    --bs-primary-rgb: 39, 91, 135;
    --bs-link-color: var(--hk-indigo);
    --bs-link-color-rgb: 39, 91, 135;
    --bs-link-hover-color: var(--hk-indigo-dark);
    --bs-link-hover-color-rgb: 30, 70, 104;
    --bs-body-color: #2a3440;
    --bs-tertiary-bg: #f2f5f9;    /* body 使用 bg-body-tertiary */
    --bs-border-radius: 0.5rem;
    --bs-border-radius-lg: 0.75rem;
    --bs-body-font-family: "Segoe UI", "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", system-ui, -apple-system, sans-serif;
}

a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- 按鈕 ---------- */
.btn-primary {
    --bs-btn-bg: var(--hk-indigo);
    --bs-btn-border-color: var(--hk-indigo);
    --bs-btn-hover-bg: var(--hk-indigo-dark);
    --bs-btn-hover-border-color: var(--hk-indigo-dark);
    --bs-btn-active-bg: var(--hk-indigo-deeper);
    --bs-btn-active-border-color: var(--hk-indigo-deeper);
    --bs-btn-disabled-bg: #8aa9c4;
    --bs-btn-disabled-border-color: #8aa9c4;
    --bs-btn-focus-shadow-rgb: 39, 91, 135;
}
.btn-outline-primary {
    --bs-btn-color: var(--hk-indigo);
    --bs-btn-border-color: var(--hk-indigo);
    --bs-btn-hover-bg: var(--hk-indigo);
    --bs-btn-hover-border-color: var(--hk-indigo);
    --bs-btn-active-bg: var(--hk-indigo-dark);
    --bs-btn-active-border-color: var(--hk-indigo-dark);
    --bs-btn-focus-shadow-rgb: 39, 91, 135;
}
.btn-hk-gold {
    --bs-btn-color: #2d2005;
    --bs-btn-bg: var(--hk-gold);
    --bs-btn-border-color: var(--hk-gold);
    --bs-btn-hover-color: #241a04;
    --bs-btn-hover-bg: #e5b258;
    --bs-btn-hover-border-color: #e5b258;
    --bs-btn-active-color: #241a04;
    --bs-btn-active-bg: var(--hk-gold-dark);
    --bs-btn-active-border-color: var(--hk-gold-dark);
    --bs-btn-focus-shadow-rgb: 217, 164, 65;
    font-weight: 600;
}

/* ---------- 表單 ---------- */
.form-control:focus, .form-select:focus {
    border-color: #7fa3c4;
    box-shadow: 0 0 0 .25rem rgba(39, 91, 135, .15);
}
.form-check-input:checked {
    background-color: var(--hk-indigo);
    border-color: var(--hk-indigo);
}
.form-label { font-weight: 500; color: #3a4a5c; }

/* ---------- 導覽列 ---------- */
.hk-navbar {
    background: linear-gradient(135deg, var(--hk-indigo-deeper) 0%, var(--hk-indigo-dark) 45%, var(--hk-indigo) 100%);
    box-shadow: 0 2px 14px rgba(20, 47, 71, .28);
    padding-top: .65rem;
    padding-bottom: .65rem;
}
.hk-navbar .navbar-brand { font-size: 1.12rem; letter-spacing: .02em; display: inline-flex; align-items: center; }
.hk-brand-coin {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.9rem; height: 1.9rem; margin-right: .55rem; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #f2cf7d, var(--hk-gold) 60%, var(--hk-gold-dark));
    color: #5a3f08; font-size: 1rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35), inset 0 0 0 2px rgba(255, 255, 255, .28);
}
.hk-navbar .nav-link {
    color: rgba(255, 255, 255, .82);
    border-radius: .5rem;
    padding: .45rem .9rem;
    transition: background-color .15s ease, color .15s ease;
}
.hk-navbar .nav-link:hover, .hk-navbar .nav-link:focus {
    color: #fff;
    background-color: rgba(255, 255, 255, .12);
}

/* ---------- 頁尾 ---------- */
.hk-footer {
    background: linear-gradient(135deg, var(--hk-indigo-deeper), var(--hk-indigo-dark));
    color: rgba(255, 255, 255, .78);
}
.hk-footer a { color: rgba(255, 255, 255, .9); }

/* ---------- 首頁 Hero（藍染底＋桐花紋＋桐花金光暈） ---------- */
.hk-hero {
    position: relative; overflow: hidden;
    background:
        radial-gradient(900px 380px at 88% -12%, rgba(217, 164, 65, .30), transparent 62%),
        linear-gradient(135deg, var(--hk-indigo-deeper) 0%, var(--hk-indigo-dark) 45%, var(--hk-indigo) 100%);
    color: #fff;
    border-radius: 1rem;
    padding: 3rem 2.5rem;
    box-shadow: 0 12px 32px rgba(20, 47, 71, .28);
}
.hk-hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='170'%20height='170'%20viewBox='0%200%20170%20170'%3E%3Cg%20fill='none'%20stroke='rgba(255,255,255,0.09)'%20stroke-width='2'%3E%3Cg%20transform='translate(46,50)'%3E%3Cellipse%20rx='7'%20ry='14'%20transform='rotate(0)%20translate(0,-16)'/%3E%3Cellipse%20rx='7'%20ry='14'%20transform='rotate(72)%20translate(0,-16)'/%3E%3Cellipse%20rx='7'%20ry='14'%20transform='rotate(144)%20translate(0,-16)'/%3E%3Cellipse%20rx='7'%20ry='14'%20transform='rotate(216)%20translate(0,-16)'/%3E%3Cellipse%20rx='7'%20ry='14'%20transform='rotate(288)%20translate(0,-16)'/%3E%3Ccircle%20r='3.5'/%3E%3C/g%3E%3Cg%20transform='translate(128,124)%20scale(0.62)'%20stroke='rgba(255,255,255,0.06)'%3E%3Cellipse%20rx='7'%20ry='14'%20transform='rotate(36)%20translate(0,-16)'/%3E%3Cellipse%20rx='7'%20ry='14'%20transform='rotate(108)%20translate(0,-16)'/%3E%3Cellipse%20rx='7'%20ry='14'%20transform='rotate(180)%20translate(0,-16)'/%3E%3Cellipse%20rx='7'%20ry='14'%20transform='rotate(252)%20translate(0,-16)'/%3E%3Cellipse%20rx='7'%20ry='14'%20transform='rotate(324)%20translate(0,-16)'/%3E%3Ccircle%20r='3.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-size: 170px 170px;
}
.hk-hero > .position-relative { z-index: 1; }
.hk-hero-lead { color: rgba(255, 255, 255, .85); }
.hk-hero-coin {
    position: absolute; right: 2.2rem; bottom: -2.2rem;
    font-size: 11rem; line-height: 1;
    color: rgba(217, 164, 65, .28);
    transform: rotate(-12deg);
    z-index: 0;
}

/* ---------- 首頁特色卡 ---------- */
.hk-feature {
    border: 0; border-radius: .9rem; height: 100%;
    box-shadow: 0 2px 10px rgba(31, 58, 86, .06);
    transition: transform .15s ease, box-shadow .15s ease;
}
.hk-feature:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(31, 58, 86, .12);
}
.hk-feature-icon {
    width: 2.9rem; height: 2.9rem; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: .8rem;
    background: var(--hk-indigo-tint);
    color: var(--hk-indigo);
    font-size: 1.35rem;
}

/* ---------- 卡片與清單 ---------- */
.card { border: 1px solid #e3e9f0; border-radius: .9rem; }
.card > .card-header { background-color: #fff; border-bottom-color: #eef2f6; }
.card > .list-group:last-child .list-group-item:last-child,
.card > .card-footer { border-bottom-left-radius: .9rem; border-bottom-right-radius: .9rem; }
.shadow-sm { box-shadow: 0 2px 12px rgba(31, 58, 86, .07) !important; }
.list-group-item-action:hover { background-color: var(--hk-indigo-tint); }
.table thead th { font-weight: 600; color: #43566b; }
.table-light { --bs-table-bg: #f0f4f8; }

/* ---------- 頁面標題（Site_Out master 產生） ---------- */
.hk-page-title {
    display: flex; align-items: center; gap: .6rem;
    font-size: 1.35rem; font-weight: 700; color: #22384e;
    margin-bottom: 1.5rem;
}
.hk-page-title::before {
    content: ""; width: .35rem; height: 1.5rem; border-radius: 2rem;
    background: linear-gradient(180deg, var(--hk-gold), var(--hk-indigo));
}

/* ---------- 登入後版面（Site_Log：頂欄＋側欄選單） ---------- */
.hk-sidebar {
    background-color: #fff;
    border-right: 1px solid #e3e9f0;
    min-height: calc(100vh - 4.25rem);
    box-shadow: 1px 0 12px rgba(31, 58, 86, .04);
}
@media (max-width: 767.98px) {
    .hk-sidebar { border-right: 0; border-bottom: 1px solid #e3e9f0; min-height: auto; }
}
.hk-menu-title {
    color: #718398; font-size: .78rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    padding: .35rem .75rem 0;
}
.hk-sidebar .nav-link {
    color: #3a4a5c;
    border-radius: .5rem;
    padding: .45rem .75rem;
    font-size: .95rem;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.hk-sidebar .nav-link:hover,
.hk-sidebar .nav-link:focus {
    background-color: var(--hk-indigo-tint);
    color: var(--hk-indigo-dark);
}
.hk-sidebar .nav-pills .nav-link.active {
    background-color: var(--hk-indigo);
    color: #fff;
    box-shadow: 0 2px 8px rgba(39, 91, 135, .22);
    font-weight: 600;
}

.hk-userbox {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 2rem;
    padding: .28rem .75rem;
    font-size: .9rem;
    max-width: min(46rem, 58vw);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* min-width:0：.col 是 flex 項目，預設 min-width:auto 會被寬表格的最小內容寬撐開，
   撐到放不下就整欄換行到側欄下方；歸零後寬表格改在 .table-responsive 內橫向捲動。 */
.hk-main { max-width: 1320px; min-width: 0; }

/* ---------- 操作卡片與表格 ---------- */
.card-header.bg-white {
    padding-top: .9rem; padding-bottom: .9rem;
    font-weight: 600;
}
.table > :not(caption) > * > * {
    padding: .75rem .65rem;
    vertical-align: middle;
}
.table tbody tr:hover > * {
    --bs-table-accent-bg: #f6f9fc;
    color: var(--bs-table-hover-color);
}
.badge { letter-spacing: .02em; padding: .42em .55em; border-radius: .45rem; font-weight: 600; }

.btn { transition: transform .12s ease, box-shadow .12s ease; }
.btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(31,58,86,.08); }
.btn-primary:not(:disabled).active,
.btn-primary:not(:disabled):active { box-shadow: none; transform: none; }

/* ---------- 下拉選單（含可搜尋下拉） ---------- */
.dropdown-menu {
    border-radius: .75rem;
    border-color: #e3e9f0;
    box-shadow: 0 10px 30px rgba(31, 58, 86, .14);
}
.dropdown-item { border-radius: .5rem; }
.dropdown-item:hover { background-color: var(--hk-indigo-tint); }
.dropdown-item.active { background-color: var(--hk-indigo); }

/* ---------- 常見問題（Help/FAQ.aspx） ----------
   每個類別一個色系，以 CSS 變數傳給段落標題、篩選按鈕、accordion 題目列與左側色條：
     --hk-faq-accent  色塊、左側色條、按鈕框線（只當底色或線條，不承載文字）
     --hk-faq-tint    題目列淡底
     --hk-faq-tint-2  展開中的題目列、段落標題、選取中的篩選按鈕（稍深的淡底）
     --hk-faq-ink     配淡底的深色文字（對比 ≥ 4.5:1）
   html.hk-faq-js 由 Scripts/faq.js 加上；沒有 JS 時回應全展開、篩選列隱藏，頁面仍完整可讀。 */
.hk-faq {
    --hk-faq-accent: #8592a0;
    --hk-faq-tint: #f3f5f8;
    --hk-faq-tint-2: #e4e9ef;
    --hk-faq-ink: #2a3440;
}
.hk-faq .hk-faq-cat-1 { /* 資格條件：藍染 */
    --hk-faq-accent: var(--hk-indigo);
    --hk-faq-tint: var(--hk-indigo-tint);
    --hk-faq-tint-2: #d5e3f0;
    --hk-faq-ink: var(--hk-indigo-deeper);
}
.hk-faq .hk-faq-cat-2 { /* 名單填報：綠 */
    --hk-faq-accent: #3a8a5c;
    --hk-faq-tint: #ebf5ee;
    --hk-faq-tint-2: #d3eadb;
    --hk-faq-ink: #1d4d32;
}
.hk-faq .hk-faq-cat-3 { /* 領取通知：桐花金／琥珀 */
    --hk-faq-accent: var(--hk-gold);
    --hk-faq-tint: #fcf5e6;
    --hk-faq-tint-2: #f6e5bf;
    --hk-faq-ink: #5e420c;
}
.hk-faq .hk-faq-cat-4 { /* 諮詢窗口：花布桃紅 */
    --hk-faq-accent: var(--hk-rose);
    --hk-faq-tint: #fbedf3;
    --hk-faq-tint-2: #f4d6e4;
    --hk-faq-ink: #6e2647;
}

/* 篩選列：按鈕可換行，手機寬度不會撐破版面 */
.hk-faq-filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.hk-faq-filter {
    --bs-btn-color: var(--hk-faq-ink);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--hk-faq-accent);
    --bs-btn-hover-color: var(--hk-faq-ink);
    --bs-btn-hover-bg: var(--hk-faq-tint);
    --bs-btn-hover-border-color: var(--hk-faq-accent);
    --bs-btn-active-color: var(--hk-faq-ink);
    --bs-btn-active-bg: var(--hk-faq-tint-2);
    --bs-btn-active-border-color: var(--hk-faq-accent);
    --bs-btn-focus-box-shadow: 0 0 0 .2rem var(--hk-faq-accent);
    border-width: 1px 1px 1px 4px;
    font-weight: 600;
}
/* 前面加 .hk-faq 提高權重：蓋過本檔「.btn:not(:disabled):hover」的陰影，選取中的內框才不會滑過就消失 */
.hk-faq .hk-faq-filter.active { box-shadow: inset 0 0 0 1px var(--hk-faq-accent); }
/* 鍵盤焦點：選取中的按鈕同時保留內框與焦點框（未選取的走 Bootstrap .btn:focus-visible＋上面的 --bs-btn-focus-box-shadow） */
.hk-faq .hk-faq-filter.active:focus-visible {
    box-shadow: inset 0 0 0 1px var(--hk-faq-accent), var(--bs-btn-focus-box-shadow);
}
.hk-faq-filter-count {
    display: inline-block;
    min-width: 1.6em;
    margin-left: .25rem;
    padding: 0 .4em;
    border-radius: 1em;
    background: var(--hk-faq-ink);
    color: #fff;
    font-size: .8em;
    line-height: 1.6;
    text-align: center;
}
.hk-faq-search { max-width: 32rem; }

/* 段落標題：淡底＋深色字，左邊一塊類別色塊 */
.hk-faq-section { margin-bottom: 1.5rem; }
.hk-faq-heading {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 .75rem;
    padding: .6rem .9rem;
    border-radius: var(--bs-border-radius);
    background: var(--hk-faq-tint-2);
    color: var(--hk-faq-ink);
    font-size: 1.1rem;
    font-weight: 700;
}
.hk-faq-swatch {
    flex: 0 0 auto;
    width: .85rem;
    height: 1.35rem;
    border-radius: .25rem;
    background: var(--hk-faq-accent);
}
.hk-faq-heading-count {
    margin-left: auto;
    padding: .1rem .6rem;
    border-radius: 1rem;
    background: #fff;
    color: var(--hk-faq-ink);
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
}

/* accordion：題目列淡底（展開時稍深）、左側色條 */
.hk-faq-accordion {
    --bs-accordion-btn-color: var(--hk-faq-ink);
    --bs-accordion-btn-bg: var(--hk-faq-tint);
    --bs-accordion-active-color: var(--hk-faq-ink);
    --bs-accordion-active-bg: var(--hk-faq-tint-2);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem var(--hk-faq-accent);
}
/* 每題一張獨立卡片：完整框線＋圓角、題間以 gap 隔開。
   不能沿用 Bootstrap 的 :first-of-type／:last-of-type（只有第一題有上框線與上圓角、最後一題有下圓角）——
   那是看 DOM 位置，搜尋或篩選把第一題 hidden 之後，畫面上的第一題就沒有上框線。
   hidden 的題目是 display:none，不占 gap。下面三條按鈕／收合區的圓角規則權重要高過 Bootstrap 的
   .accordion-item:first-of-type > .accordion-header .accordion-button（0,4,0）。 */
.hk-faq-accordion { display: flex; flex-direction: column; gap: .5rem; }
.hk-faq .hk-faq-item {
    border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
    border-left: 5px solid var(--hk-faq-accent);
    border-radius: var(--bs-accordion-border-radius);
}
.hk-faq .hk-faq-accordion .hk-faq-item > .accordion-header .accordion-button {
    border-radius: var(--bs-accordion-inner-border-radius) var(--bs-accordion-inner-border-radius) 0 0;
}
.hk-faq .hk-faq-accordion .hk-faq-item > .accordion-header .accordion-button.collapsed {
    border-radius: var(--bs-accordion-inner-border-radius);
}
.hk-faq .hk-faq-accordion .hk-faq-item > .accordion-collapse {
    border-radius: 0 0 var(--bs-accordion-inner-border-radius) var(--bs-accordion-inner-border-radius);
}
.hk-faq .accordion-button { align-items: flex-start; gap: .65rem; font-weight: 600; line-height: 1.6; }
.hk-faq .accordion-button::after { margin-top: .2rem; }
.hk-faq-no {
    flex: 0 0 auto;
    min-width: 2rem;
    padding: .05rem .35rem;
    border-radius: .4rem;
    background: var(--hk-faq-ink);
    color: #fff;
    font-size: .85rem;
    text-align: center;
}
.hk-faq-q { flex: 1 1 auto; min-width: 0; }
.hk-faq-answer { line-height: 1.85; overflow-wrap: anywhere; }
.hk-faq-answer a { text-decoration: underline; word-break: break-all; }

/* 沒有 JS：回應全展開、篩選列與展開箭頭隱藏 */
html:not(.hk-faq-js) .hk-faq-toolbar { display: none; }
html:not(.hk-faq-js) .hk-faq .accordion-collapse.collapse { display: block; }
html:not(.hk-faq-js) .hk-faq .accordion-button { cursor: default; }
html:not(.hk-faq-js) .hk-faq .accordion-button::after { display: none; }
html:not(.hk-faq-js) .hk-faq .hk-faq-accordion .hk-faq-item > .accordion-header .accordion-button.collapsed {
    border-radius: var(--bs-accordion-inner-border-radius) var(--bs-accordion-inner-border-radius) 0 0;
}

/* ===== 統計分析（Admin/Report/Analysis.aspx）=====
   表頭可換行（計畫名稱很長）、數字欄不換行；第一欄（縣市／區域／學校）給最小寬度，
   欄位多時在外層 .table-responsive 框內橫捲，而不是把欄位擠成直排。 */
.hk-analysis-table thead th { white-space: normal; min-width: 5.5em; vertical-align: bottom; }
.hk-analysis-table thead th:first-child { min-width: 10em; }
.hk-analysis-table tbody th { min-width: 10em; }
.hk-analysis-table td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.hk-analysis-total th,
.hk-analysis-total td { border-top: 2px solid var(--bs-border-color); }
.hk-analysis-notes li + li { margin-top: .15rem; }

/* ===== 個人資料蒐集告知與同意（Applicant/Default.aspx）=====
   整張卡字級放大（10-12 再加大一級）：本文 1.25rem、標題 1.5rem（狀態 badge 是 .75em，跟著標題放大）。
   勾選框的寬高與位移都是 em，跟著本文放大；再略放大到 1.25em 配合文字，margin-top 讓它與第一行置中，
   左側留白同步加寬 .25em，框與文字的間距維持 Bootstrap 原本的 .5em。
   .btn 與 .form-text 用的是 rem／自身字級，要另外指定。 */
.hk-consent { font-size: 1.25rem; }
.hk-consent h6 { font-size: 1.5rem; }
.hk-consent .form-check { padding-left: 1.75em; }
.hk-consent .form-check-input { width: 1.25em; height: 1.25em; margin-top: .125em; margin-left: -1.75em; }
.hk-consent .btn { --bs-btn-font-size: 1.25rem; }
.hk-consent .form-text { font-size: 1.25rem; }