/* =========================================================
 * content.css — 前台各頁的專屬樣式
 * ---------------------------------------------------------
 * 載入順序:bootstrap → site-token → site → content → select2 → 各頁的第三方 / RCL 樣式
 * 所有寫死值都來自 site-token.css。兩頁以上共用的樣式放 site.css,不放這裡。
 *
 * 命名
 *   class 名稱以頁面或功能開頭(apply-*、open-*、fee-* ...),不靠 <body> 或外層容器的 class 限定頁面。
 *   不直接改寫 Bootstrap 的通用 class(.container、.form-check-label ...);需要調整時另取專屬的 class。
 *
 * 區段(一個頁面或功能一段,順序固定)
 *    1. 首頁
 *    2. 公告列表
 *    3. 場地列表
 *    4. 場館資訊
 *    5. 場館時段
 *    6. 借用場地(含載入中圖示)
 *    7. 借用資料確認
 *    8. 訊息頁(申請完成、無法借用、帳號已建立、帳號已啟用、登入錯誤)
 *    9. 登入、註冊、忘記密碼、重設密碼
 *   10. 會員頁首(訂單紀錄與帳號管理共用)
 *   11. 訂單紀錄
 *   12. 帳號管理
 *
 * 沒有專屬樣式的頁面:公告內容、場館圖片集、校內帳號登入、系統錯誤。
 * ======================================================= */


/* =========================================================
 * 1. 首頁
 *    命名:home-carousel 輪播圖、home-search 快速搜尋、home-bulletin-* 重要消息、home-category-* 場館分類
 * ======================================================= */

/* ---------- 輪播圖 ---------- */

.home-carousel {
    height: 292px;
    overflow: hidden;
}

.home-carousel .carousel-item {
    height: 292px;
    overflow: hidden;
    border-radius: var(--bs-border-radius-lg);
}

/* 圖片置中後以 min-width / min-height 填滿輪播框,超出的部分由 .carousel-item 裁掉 */
.home-carousel img {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    border-radius: var(--bs-border-radius-lg);
    transform: translate(-50%, -50%);
}

@media (max-width: 575.98px) {
    .home-carousel,
    .home-carousel .carousel-item {
        max-height: 150px;
    }
}

/* ---------- 快速搜尋 ---------- */

/* .home-search 整塊是品牌綠底(.bg-brand .rounded-3),間距都用 markup 的 utility,沒有專屬樣式。
   它沒有白底的內容區,所以不套 site.css 的 .card-brand。 */

/* ---------- 重要消息 ---------- */

/* 外框是 site.css 的 .card .card-brand。每一則公告一列,列高與行高同為 --nv-size-bar */
.home-bulletin-item {
    line-height: var(--nv-size-bar);
}

/* ---------- 場館分類 ---------- */

/* 標題列:只有一條橘色列,下方的縮圖直接壓在頁面背景上,沒有白底內容區,所以不用 Bootstrap 的 .card */
.home-category-title {
    height: var(--nv-size-bar);
    background-color: var(--nv-accent);
}

/* 場地縮圖區塊 */
.home-category {
    width: 250px;
    padding-top: var(--nv-space-40);
}

/* 場地縮圖連結:作為遮罩的定位基準 */
.home-category-link {
    position: relative;
    display: block;
    min-height: 150px; /* 無縮圖時遮罩仍撐得起高度 */
}

/* 場地縮圖 */
.home-category-photo {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: var(--nv-border-radius-2xl);
}

/* 原始遮罩:左緣貼齊縮圖,預設右側內縮 */
.home-category-cover {
    position: absolute;
    top: 0;
    right: 12%;
    bottom: 0;
    left: 0;
    color: var(--bs-white);
    /* 透明度做在背景色上,避免連同標題文字一起淡出 */
    background-color: var(--nv-overlay-brand);
    border-radius: var(--nv-border-radius-2xl); /* 與縮圖圓角一致 */
    transition-duration: var(--nv-duration-slow);
}

/* 遮罩上的分類名稱。定位、字級與字重由 markup 的 utility 決定 */
.home-category-name {
    width: 95%;
    word-wrap: break-word;
    text-shadow: var(--nv-text-shadow-overlay); /* 遮罩淡出時維持文字可讀性 */
}

/* 遮罩滑動:僅向右展開至縮圖邊界為止,最大不超過縮圖本身 */
.home-category-link:hover .home-category-cover {
    right: 0;
    background-color: var(--nv-overlay-hover);
    transition-duration: var(--nv-duration-slower);
}


/* =========================================================
 * 2. 公告列表
 *    外框是 site.css 的 .card .card-brand。
 * ======================================================= */

/* 表格左右各留 5%。與 Bootstrap 的 .table-responsive、.mx-auto 併用 */
.bulletin-table {
    width: 90%;
}


/* =========================================================
 * 3. 場地列表
 *    命名:space-card-* 卡片、space-tag-* 標籤、space-text-* 文字、space-capacity-* 容納人數、space-list-* 清單下方
 * ======================================================= */

/* 同一列的卡片等高:外層連結撐滿欄位,卡片再撐滿連結 */
.space-card-link {
    display: block;
    height: 100%;
    color: var(--bs-black);
    text-decoration: none;
}

/* 圖片、名稱、人數共用同一個左右內距,左緣才會對齊 */
.space-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--nv-space-12);
    cursor: pointer;
    background-color: var(--bs-primary-bg-subtle);
    border-radius: var(--bs-border-radius-lg);
}

/* 場館縮圖收放特效 */
.space-card:hover {
    color: var(--bs-black);
    transition: transform var(--nv-duration-base) ease;
    transform: scale(1.05, 1.05);
}

/* 場地封面縮圖:寬度撐滿卡片內距,以 aspect-ratio 4:3 定框、object-fit 裁切,卡片高度不隨圖片比例跳動。 */
.space-card-photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--bs-border-radius);
}

/* 標籤:Bootstrap .badge 的在地變體,一律與 .badge 併用。
   尺寸比 .badge 大(14px 字、方角),與 site.css 的 .badge-lg(18px 字、時段用)也不同,所以另外定義。
   開放狀態與開放對象文字固定不縮;標籤列不換行,同一列卡片的圖片位置才會一致。
     顏色  .space-tag-open        開放租借:白字配深橘底(對比 4.79:1;.badge-accent 的橘底配白字只有 2.42:1)
           .text-bg-secondary     暫不開放:Bootstrap 原生的灰底白字
           .bg-white .text-accent-dark   開放對象、管轄單位:白底深橘字 */
.space-tag {
    --bs-badge-padding-x: var(--nv-space-8);
    --bs-badge-padding-y: var(--nv-space-4);
    --bs-badge-font-size: var(--nv-font-size-sm);
    --bs-badge-font-weight: var(--nv-font-weight-black);
    --bs-badge-border-radius: var(--bs-border-radius-sm);
    flex-shrink: 0;
    overflow: hidden;
    line-height: var(--bs-body-line-height);
    text-overflow: ellipsis;
}

.space-tag-open {
    background-color: var(--nv-accent-dark);
}

/* 管轄單位名稱長度不固定,空間不足時只縮這個標籤,文字截斷為刪節號;完整名稱放在 title */
.space-tag-unit {
    flex-shrink: 1;
    min-width: 0;
}

/* 英文名稱:固定保留一行高度,沒有英文名稱的卡片才不會比較矮 */
.space-text-en-name {
    min-height: 1.5em;
    margin-bottom: var(--nv-space-8);
    line-height: var(--bs-body-line-height);
}

.space-capacity-icon {
    width: 20px;
    height: 20px;
}

/* ---------- 清單下方的返回鈕 ---------- */

/* 與最後一列卡片的距離。超過 Bootstrap 間距刻度的上限(3rem),所以不用 utility */
.space-list-actions {
    margin-top: var(--nv-space-90);
}


/* =========================================================
 * 4. 場館資訊
 *
 *    版面是「左標題、右內容」的資訊列。以往用 d-flex 搭配固定寬度的 w-15 標題欄,
 *    窄畫面下標題欄會被壓成一字一行;改用 Bootstrap 的斷點欄位,
 *    md 以下標題與內容上下堆疊,md 以上才回到兩欄。
 *
 *    場館資訊、場館時段、圖片集三頁共用的頁籤列(.space-tabs)與白底外框都用 Bootstrap utility,沒有專屬樣式。
 * ======================================================= */

/* 場館中、英文名稱:字級隨視窗寬度縮放。間距與顏色由 markup 的 utility 決定 */
.venue-title {
    font-size: var(--nv-font-size-fluid-title);
}

.venue-subtitle {
    font-size: var(--nv-font-size-fluid-subtitle);
}

.venue-info-row {
    border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}

.venue-info-row:last-child {
    border-bottom: 0;
}

.venue-info-label {
    padding: var(--nv-space-16);
    font-weight: var(--nv-font-weight-bold);
    line-height: var(--bs-body-line-height);
}

.venue-info-label-en {
    font-size: var(--nv-font-size-sm);
    font-weight: var(--bs-body-font-weight);
    color: var(--bs-secondary);
}

.venue-info-body {
    padding: var(--nv-space-16);
    /* 管理端貼上的長網址與無空白的長字串不得撐破版面 */
    overflow-wrap: anywhere;
}

.venue-info-body > :last-child {
    margin-bottom: 0;
}

/* 管理端貼上的圖片常帶原始尺寸(例如 808px 寬的附表截圖),
   內容欄較窄時會溢出白色卡片,故一律縮到欄寬並保持比例。 */
.venue-info-body img {
    max-width: 100%;
    height: auto;
}

@media (min-width: 768px) {
    /* 標題欄與內容欄之間的分隔線:比列與列之間的 --bs-border-color 淡。.08 只有這裡用,不另設 token */
    .venue-info-label {
        border-right: var(--bs-border-width) solid rgba(var(--bs-black-rgb), .08);
    }
}

/* 窄畫面標題改為單行小標:中英文並排,省下一整行高度 */
@media (max-width: 767.98px) {
    .venue-info-label {
        display: flex;
        gap: var(--nv-space-8);
        align-items: baseline;
        padding-bottom: var(--nv-space-4);
    }

    .venue-info-body {
        padding-top: var(--nv-space-4);
    }
}

/* 借用條件(租借對象、申請期限)
   接在場館介紹之後,是使用者決定要不要申請的依據,故以粗體與上方留白與介紹文字分開。
   管理端貼進來的介紹結尾常帶一個空段落,上方留白用相鄰兄弟間距會失準,直接在 markup 給固定值(.mt-3)。 */
.venue-rental-notice {
    line-height: var(--nv-line-height-relaxed);
}

/* 附件 */
.venue-attach-list {
    padding-left: var(--nv-space-20);
    margin-bottom: 0;
}

.venue-attach-list li + li {
    margin-top: var(--nv-space-4);
}


/* =========================================================
 * 5. 場館時段
 *    月曆用 site.css 的 .cal-*;這裡是圖例與時段格(open-slot)。
 * ======================================================= */

/* 月曆、圖例與時段:md 以上佔白底面板的 80% 並置中,手機佔滿 */
.open-calendar {
    width: 80%;
}

@media (max-width: 767.98px) {
    .open-calendar {
        width: 100%;
    }
}

/* 圖例 */
.date-status {
    margin: 0 auto;
    border: solid 2px;
    border-color: var(--nv-brand);
}

/* 上午、下午、夜間的時段:只供查看。標題的字重由 markup 的 .fw-black 決定 */
.open-slot {
    font-weight: var(--nv-font-weight-black);
}

/* 已被借用的時段:點擊後顯示借用資訊 */
.open-slot-rented {
    cursor: pointer;
    background-color: var(--bs-gray-300);
    border-radius: var(--bs-border-radius-pill);
}


/* =========================================================
 * 6. 借用場地
 *    月曆用 site.css 的 .cal-*;時段格是 apply-slot。
 * ======================================================= */

/* ---------- 頁首 ---------- */

.apply-page-header {
    padding: var(--nv-space-24) var(--nv-space-20) 0;
}

/* ---------- 載入中圖示 ---------- */

/* 蓋在內容上的旋轉圓圈,顯示與隱藏由 JavaScript 切換 display */
.apply-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: var(--nv-zindex-loader);
    width: var(--nv-size-loader);
    height: var(--nv-size-loader);
    /* 往左上移半個外徑(半徑加邊框)才會置中 */
    margin: calc(-1 * (var(--nv-size-loader) / 2 + var(--nv-size-loader-border))) 0 0 calc(-1 * (var(--nv-size-loader) / 2 + var(--nv-size-loader-border)));
    border: var(--nv-size-loader-border) solid var(--bs-border-color);
    border-top-color: var(--nv-brand);
    border-radius: 50%;
    animation: apply-loader-spin var(--nv-duration-spin) linear infinite;
}

@keyframes apply-loader-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ---------- 場地頁籤 ---------- */

/* Bootstrap .nav-tabs 的變體:未選取的頁籤退到背景(淺綠底、內文色字),選取中的是白底主色(深綠)粗體字,
   上緣再加一條強調色(橘)的粗線,多個場館時一眼看得出目前在哪一個頁籤。
   文字色、選取中的底色與左右邊框走 Bootstrap 的元件變數(選取中的底色與邊框沿用預設值);
   未選取的底色與邊框沒有對應的變數,才另外寫規則。不換行與不壓縮由 markup 的 utility 決定 */
.venue-tabs {
    --bs-nav-link-color: var(--bs-body-color);
    --bs-nav-link-hover-color: var(--bs-body-color);
    /* Bootstrap 的 :focus 與 :hover 共用這個變數;hover 的邊框在下方另外指定 */
    --bs-nav-tabs-link-hover-border-color: var(--bs-primary-bg-subtle);
    --bs-nav-tabs-link-active-color: var(--bs-primary);
}

/* 未選取的頁籤沒有下邊框,比選取中的矮 1px,頁籤列的底線才會露出來 */
.venue-tabs .nav-link {
    margin-right: var(--nv-space-2);
    background-color: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary-bg-subtle);
    border-bottom-width: 0;
}

/* 滑鼠移入:亮綠底,文字維持內文色 */
.venue-tabs .nav-link:not(.active):hover {
    background-color: var(--nv-brand);
    border-color: var(--nv-brand);
}

/* 上緣的橘線用 inset 陰影畫,不改邊框寬度,頁籤高度才不會因選取而跳動。3px 只有這裡用,不另設 token */
.venue-tabs .nav-link.active {
    font-weight: var(--nv-font-weight-bold);
    border-bottom-width: var(--bs-nav-tabs-border-width);
    box-shadow: inset 0 3px 0 var(--nv-accent);
}

/* 頁籤內的英文名稱:比中文名稱淡 */
.venue-tab-en-name {
    color: var(--bs-secondary);
}

/* 頁籤滾動容器 */
.tab-scroll-container {
    margin: 0 var(--nv-space-40); /* 為左右箭頭預留空間 */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* iOS 滑動優化 */
    scrollbar-width: none; /* Firefox 隱藏滾動條 */
    -ms-overflow-style: none; /* IE/Edge 隱藏滾動條 */
}

.tab-scroll-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari 隱藏滾動條 */
}

/* 左右箭頭按鈕。.show 由 JavaScript 依可捲動範圍切換 */
.tab-scroll-btn {
    position: absolute;
    top: 50%;
    z-index: var(--nv-zindex-tab-scroll);
    display: none; /* 預設隱藏 */
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--bs-secondary);
    cursor: pointer;
    /* 壓在頁籤上的按鈕,略透出底下的頁籤。.95 只有這裡用,不另設 token */
    background: rgba(var(--bs-white-rgb), .95);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: 50%;
    box-shadow: var(--bs-box-shadow-sm);
    transition: all var(--nv-duration-fast);
    transform: translateY(-50%);
}

.tab-scroll-btn:hover {
    color: var(--bs-body-color);
    box-shadow: var(--nv-box-shadow-md);
}

.tab-scroll-btn:active {
    transform: translateY(-50%) scale(.95);
}

.tab-scroll-btn.show {
    display: flex;
}

.tab-scroll-left {
    left: var(--nv-space-4);
}

.tab-scroll-right {
    right: var(--nv-space-4);
}

@media (max-width: 767.98px) {
    .tab-scroll-btn {
        width: 30px;
        height: 30px;
        font-size: var(--nv-font-size-sm);
    }
}

/* ---------- 月曆與時段 ---------- */

/* 月曆與時段的外框。左右邊界、下內距與欄間距由 markup 的 utility 決定:
   手機版欄間距是 0(.gx-0),md 以上回到 Bootstrap 預設(.gx-md-4) */
.apply-calendar-area {
    border: solid 2px var(--nv-brand);
}

/* 可選的時段。[selected] 屬性代表已在表單內(預選擇或已選擇時段組合) */
.apply-slot {
    margin-top: var(--nv-space-30);
    font-size: var(--nv-font-size-sm);
    font-weight: var(--nv-font-weight-black);
    color: var(--bs-secondary);
    cursor: pointer;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.apply-slot:hover {
    color: var(--bs-white);
    background-color: var(--nv-accent);
}

.apply-slot[selected] {
    color: var(--bs-white);
    cursor: not-allowed;
    background-color: var(--nv-accent);
}

/* 已被借用、他人選取中(查表 HeldByOthers)的時段:不可點選,兩者同一個畫法,他人選取中以 title 提示。
   排在 :hover 與 [selected] 之後並串接 .apply-slot,滑鼠移入或已選取時仍維持灰底 */
.apply-slot.apply-slot-rented,
.apply-slot.apply-slot-held {
    color: var(--bs-white);
    cursor: not-allowed;
    background-color: var(--bs-secondary);
}

/* 圖例 */
.apply-legend span {
    display: inline-block;
    white-space: nowrap;
}

/* ---------- 「新增組合時段」對話框 ---------- */

/* Select2 載入後會隱藏原生的 select,這裡是 Select2 未生效時的外觀 */
.apply-batch-slots {
    height: 300px;
    padding: var(--nv-space-12);
    overflow-y: auto;
}

/* ---------- 預選擇時段組合:每個頁籤的 #pending-{venueId},一個日期一張卡片(.pending-day),內含時段(.pending-time)、設備與人事 ---------- */

.pending-day {
    margin-top: var(--nv-space-20);
}

/* 標題列右側的刪除鈕 */
.pending-day-remove {
    width: 28px;
    height: 28px;
}

/* 文字置中;移除鈕以絕對定位固定在右側,寬度不足時不會被擠到下一行 */
.pending-time {
    position: relative;
    max-width: 50%;
    min-height: var(--nv-size-chip);
    padding: 0 var(--nv-space-40);
    margin-top: var(--nv-space-20);
    margin-bottom: 0;
    font-size: var(--nv-font-size-md);
    font-weight: var(--nv-font-weight-black);
    line-height: var(--nv-size-chip);
    color: var(--bs-white);
    text-align: center;
    background-color: var(--nv-accent);
    border-radius: var(--bs-border-radius-lg);
}

/* 移除鈕 */
.pending-time .remove-slot {
    position: absolute;
    top: 0;
    right: var(--nv-space-16);
    line-height: var(--nv-size-chip);
    cursor: pointer;
}

/* ---------- 設備與人事項目 ---------- */

/* 數量欄位用 site.css 的 .form-control-qty */

/* 人事項目最長的名稱是「非上班人員」5 個字,以此為欄寬讓計時/計次對齊並緊接在名稱之後 */
.human-check .form-check-label {
    min-width: 5em;
}

/* ---------- 「新增場地」對話框的場地清單 ---------- */

/* 已選擇的場地:按鈕是 disabled(點了沒有作用),文字色走 Bootstrap list-group 的 disabled 變數,底色沿用它的預設值(白)。
   Bootstrap 對 disabled 的項目設 pointer-events: none,滑鼠事件會穿到後面的元素,游標樣式因此不會生效;
   這裡改回 auto 才顯示得出禁止游標。改回 auto 後 .list-group-item-action 的 :hover / :active 會套上來,
   所以把那兩組變數也指到 disabled 的顏色。串接 .list-group-item 是為了與 Bootstrap 的 :disabled 規則同權重 */
.list-group-item.space-selected {
    --bs-list-group-disabled-color: var(--bs-secondary);
    --bs-list-group-action-hover-color: var(--bs-secondary);
    --bs-list-group-action-hover-bg: var(--bs-list-group-disabled-bg);
    --bs-list-group-action-active-color: var(--bs-secondary);
    --bs-list-group-action-active-bg: var(--bs-list-group-disabled-bg);
    pointer-events: auto;
    cursor: not-allowed;
    /* 整列淡化,連同「已選擇」標籤與圖示。Bootstrap 的 .opacity-* 是 .25 一級(.75),.7 只有這裡用,不另設 token */
    opacity: .7;
}

/* ---------- 「已選取時段組合」:標題只出現一次,區塊內每一組是一張卡片 ---------- */

.ready-submit-section {
    counter-reset: ready-group;
}

.ready-submit-title {
    padding-bottom: var(--nv-space-8);
    margin-bottom: 0;
    font-weight: var(--nv-font-weight-black);
    border-bottom: solid 2px var(--nv-brand);
}

.ready-group {
    padding: var(--nv-space-12) var(--nv-space-16);
    margin-top: var(--nv-space-12);
    counter-increment: ready-group;
    background-color: var(--bs-white);
    border: solid 2px var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
}

.ready-group-header,
.ready-day-header {
    display: flex;
    gap: var(--nv-space-8);
    align-items: center;
    justify-content: space-between;
}

.ready-group-title {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nv-space-8);
    align-items: center;
    min-width: 0;
    margin-bottom: 0;
    font-weight: var(--nv-font-weight-black);
}

.ready-group-no::before {
    content: "組合 " counter(ready-group);
}

.ready-group-space {
    font-size: var(--nv-font-size-sm);
    text-align: left;
    white-space: normal;
}

.ready-remove-btn {
    flex-shrink: 0;
}

.ready-day {
    padding-top: var(--nv-space-12);
    margin-top: var(--nv-space-12);
    border-top: var(--bs-border-width) solid var(--bs-border-color);
}

.ready-day-times {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nv-space-8);
    margin-top: var(--nv-space-8);
}

/* 時段標籤用 site.css 的 .badge .badge-lg .badge-accent */

/* 預約的設備與人事。下邊距由 markup 的 .mb-1 決定 */
.ready-day-item {
    margin-left: var(--nv-space-20);
    font-weight: var(--nv-font-weight-black);
}

/* 人事費併計的提示,與預約人事的項目對齊。字級、顏色與下邊距由 markup 的 .small .text-danger .mb-0 決定 */
.ready-day-note {
    margin-left: var(--nv-space-20);
}

/* ---------- RWD ---------- */

/* 手機版:月曆與時段上下排列,收掉桌面版並排用的留白 */
@media (max-width: 767.98px) {
    .apply-page-header {
        padding: var(--nv-space-16) var(--nv-space-16) 0;
    }

    .apply-calendar-area > .apply-legend {
        padding: var(--nv-space-8) var(--nv-space-8) 0;
    }

    /* 上午/下午/晚上三欄改為上下排列,每欄內的時段依寬度並排(最少兩欄),減少捲動長度 */
    .apply-timelist-row > .col-sm {
        display: grid;
        flex: 0 0 100%;
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: var(--nv-space-8);
        padding-top: var(--nv-space-8);
    }

    .apply-slot {
        padding: var(--nv-space-4) 0;
        margin: 0;
    }

    .pending-time {
        max-width: 100%;
        margin-top: var(--nv-space-8);
    }

    .ready-group {
        padding: var(--nv-space-8) var(--nv-space-12);
    }
}


/* =========================================================
 * 7. 借用資料確認
 *    命名:fee-* 金額統計、apply-info-* 基本問項與按鈕、attach-* 附件清單
 * ======================================================= */

/* 白底面板內的內距 */
.apply-info-body {
    padding: var(--nv-space-20) var(--nv-space-40) var(--nv-space-30);
}

@media (max-width: 767.98px) {
    .apply-info-body {
        padding: var(--nv-space-16);
    }
}

/* ---------- 金額統計 ----------
   摘要列 + 場館 → 日期卡片。partial:_FeeSummaryBar.cshtml、_FeeDayCard.cshtml。
   結構:.fee-summary-bar > .fee-summary-amounts > .fee-summary-amount(金額數字) + 紅色小字說明(.small .text-danger)
         .fee-venue > 場館名稱(h4,.badge .badge-lg .text-bg-primary) + .fee-day(一個日期一張卡片)
         .fee-day > .fee-day-toggle(標題列,點擊展開) + .collapse > (.fee-day-times + .fee-line-list > .fee-line(名稱 + .fee-line-amount))
   卡片外觀比照借用頁的 .ready-group;「第 N 組」與時段標籤用 site.css 的 .badge .badge-lg .badge-accent,「併計」用 .badge .text-bg-secondary。 */

/* 摘要列:跟著頁面捲動,不固定在上方 */
.fee-summary-bar {
    padding: var(--nv-space-12) var(--nv-space-16);
    margin-bottom: var(--nv-space-20);
    border: solid 2px var(--nv-brand);
    border-radius: var(--bs-border-radius-lg);
}

.fee-summary-amounts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nv-space-8) var(--nv-space-24);
    font-size: var(--nv-font-size-md);
    font-weight: var(--nv-font-weight-black);
}

.fee-summary-amount {
    font-size: var(--nv-font-size-xl);
    color: var(--bs-primary);
}

.fee-venue {
    margin-bottom: var(--nv-space-20);
}

/* 一個日期一張卡片,外觀同 .ready-group */
.fee-day {
    margin-top: var(--nv-space-12);
    background-color: var(--bs-white);
    border: solid 2px var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
}

/* 卡片標題列整列可點,收合與展開由 Bootstrap 的 collapse 切換 aria-expanded */
.fee-day-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nv-space-8);
    align-items: center;
    width: 100%;
    padding: var(--nv-space-12) var(--nv-space-16);
    color: inherit;
    text-align: left;
    background: none;
    border: 0;
}

.fee-day-title {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nv-space-8);
    align-items: center;
}

/* 小計靠右,圖示接在它後面 */
.fee-day-subtotal {
    margin-left: auto;
    font-weight: var(--nv-font-weight-black);
}

.fee-day-icon {
    transition: transform var(--nv-duration-fast);
}

.fee-day-toggle[aria-expanded="true"] .fee-day-icon {
    transform: rotate(180deg);
}

/* 展開後先列該日借用的時段,排法同借用頁的 .ready-day-times */
.fee-day-times {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nv-space-8);
    padding: 0 var(--nv-space-16) var(--nv-space-12);
}

/* 展開後的收費明細:每行只有名稱與金額 */
.fee-line-list {
    padding: 0 var(--nv-space-16) var(--nv-space-12);
    margin: 0;
    list-style: none;
}

.fee-line {
    display: flex;
    gap: var(--nv-space-8);
    justify-content: space-between;
    padding: var(--nv-space-8) 0;
    border-top: var(--bs-border-width) solid var(--bs-border-color);
}

.fee-line-amount {
    flex-shrink: 0;
    font-weight: var(--nv-font-weight-bold);
}

/* ---------- 基本問項 ---------- */

/* 字重由 markup 的 .fw-black 決定;欄位之間的間距由 .row .g-3 決定,標題與欄位的間距由 .form-label 決定 */
.apply-info-form {
    font-size: var(--nv-font-size-md);
}

/* 附件清單。清單符號、上內距與上邊距由 markup 的 utility 決定 */
.attach-list {
    padding-left: 2%;
}

.attach-item {
    height: 15px;
}

/* ---------- 下方按鈕列 ---------- */

/* 上一步、預覽、編輯、確認送出。顏色用 .btn-secondary / .btn-primary / .btn-accent;
   md 以下由外層的 .d-grid 撐滿整列 */
@media (min-width: 768px) {
    .apply-info-action {
        width: 20%;
    }
}


/* =========================================================
 * 8. 訊息頁
 *    申請完成、無法借用、帳號已建立、帳號已啟用、登入錯誤:只有一段訊息與一顆導向按鈕的頁面。
 *    白底面板用 Bootstrap utility,按鈕用 .btn-primary,沒有專屬樣式。
 * ======================================================= */


/* =========================================================
 * 9. 登入、註冊、忘記密碼、重設密碼
 *    左右分欄的面板:左欄深綠底放標題與說明,右欄白底放表單。md 以下改為上下堆疊。
 *    結構:.auth-panel > .auth-aside(標題 h1、說明 p、小標 h2、清單 ul) + .auth-main(表單)
 *    標題字級、欄位分組標題、連結與送出按鈕都用 markup 的 utility。
 * ======================================================= */

.auth-panel {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    max-width: 900px;
    margin: var(--nv-space-40) auto 0;
    overflow: hidden;
    background-color: var(--bs-white);
    border-radius: var(--bs-border-radius-xl);
    box-shadow: var(--nv-box-shadow-md);
}

/* ---------- 左欄:標題與說明 ---------- */

.auth-aside {
    padding: var(--nv-space-40) var(--nv-space-30);
    color: var(--bs-white);
    background-color: var(--bs-primary);
}

.auth-aside p {
    margin: var(--nv-space-12) 0 0;
    line-height: var(--nv-line-height-relaxed);
}

/* 說明裡的小標(校內人士、密碼規則) */
.auth-aside h2 {
    margin: var(--nv-space-30) 0 0;
    font-size: var(--bs-body-font-size);
    font-weight: var(--nv-font-weight-bold);
}

/* 小標底下的說明緊接著小標 */
.auth-aside h2 + p {
    margin-top: var(--nv-space-4);
}

.auth-aside ul {
    padding-left: var(--nv-space-20);
    margin: var(--nv-space-8) 0 0;
    line-height: var(--nv-line-height-relaxed);
}

/* 深綠底上的文字連結:白字加底線,不用預設的連結色 */
.auth-aside a:not(.btn) {
    font-weight: var(--nv-font-weight-bold);
    color: var(--bs-white);
    text-decoration: underline;
}

/* ---------- 右欄:表單 ---------- */

.auth-main {
    padding: var(--nv-space-40);
}

.auth-main .form-label {
    margin-bottom: var(--nv-space-4);
    font-weight: var(--nv-font-weight-bold);
}

/* 欄位分組(帳號資料、申請人資料):第二組起以上邊線與前一組分開 */
.auth-main fieldset + fieldset {
    padding-top: var(--nv-space-16);
    margin-top: var(--nv-space-8);
    border-top: var(--bs-border-width) solid var(--bs-border-color);
}

/* ---------- RWD ---------- */

@media (max-width: 767.98px) {
    .auth-panel {
        grid-template-columns: 1fr;
    }

    .auth-aside,
    .auth-main {
        padding: var(--nv-space-24);
    }

    .auth-aside h2 {
        margin-top: var(--nv-space-16);
    }
}

/* 手機版:縮小左右內距,驗證碼(固定 303px 寬)才放得進表單 */
@media (max-width: 575.98px) {
    .auth-panel {
        margin-top: var(--nv-space-16);
    }

    .auth-aside,
    .auth-main {
        padding: var(--nv-space-20) var(--nv-space-16);
    }
}


/* =========================================================
 * 10. 會員頁首
 *     訂單紀錄與帳號管理兩頁共用。樣式是 site.css 的 .member-header,沒有專屬樣式。
 * ======================================================= */


/* =========================================================
 * 11. 訂單紀錄
 *     命名:order-* 訂單清單、list-table 訂單清單的表格、rental-* 訂單資訊對話框的租借時段、attachment-readonly 唯讀附件預覽
 * ======================================================= */

/* ---------- 訂單清單 ---------- */

/* 外框:壓在背景圖上的白底圓角面板。圓角 20px 在 Bootstrap 的 .rounded-4(16px)與 .rounded-5(32px)之間,
   沒有對應的 utility;內距由 markup 的 utility 決定 */
.order-panel {
    background-color: var(--bs-white);
    border-radius: var(--nv-border-radius-2xl);
}

/* 清單表格:每一列是一條圓角色塊,列與列之間留白。
   結構:table.list-table > thead > tr > th,tbody > tr > td。不與 Bootstrap 的 .table 併用。
   每一列左右兩端的圓角做在第一格與最後一格;md 以下隱藏的欄位(.d-none .d-md-table-cell)不能是第一欄或最後一欄 */
.list-table {
    max-width: 95%;
    margin: 0 auto;
    border: none;
    border-collapse: separate;
    border-spacing: 0 var(--nv-space-8);
}

.list-table th {
    width: 150px;
    height: var(--nv-size-row);
    color: var(--bs-white);
    text-align: center;
    background-color: var(--bs-secondary);
    border: 5px solid;
}

.list-table tbody tr {
    height: var(--nv-size-row);
    line-height: var(--nv-line-height-sm);
    color: var(--bs-black);
    text-align: center;
    background-color: var(--bs-gray-300);
}

.list-table tbody td:first-child {
    border-top-left-radius: var(--bs-border-radius-lg);
    border-bottom-left-radius: var(--bs-border-radius-lg);
}

.list-table tbody td:last-child {
    border-top-right-radius: var(--bs-border-radius-lg);
    border-bottom-right-radius: var(--bs-border-radius-lg);
}

/* 借用日期欄的表頭:固定寬高,這一欄才不會被其他欄擠窄。排版由 markup 的 utility 決定 */
.order-date-header {
    width: 150px;
    height: var(--nv-size-row);
}

/* 訂單狀態:預設品牌綠(已成立、已結束),訂單成立前的狀態加 .order-status-pending 改為橘色。
   字級與字重跟著內文,和 Bootstrap 的 .badge(小字、粗體)不同,所以不套 .badge */
.order-status {
    padding-right: var(--nv-space-20);
    padding-left: var(--nv-space-20);
    color: var(--bs-white);
    background-color: var(--nv-brand);
    border-radius: var(--bs-border-radius-sm);
}

.order-status-pending {
    background-color: var(--nv-accent);
}

/* 「查看」鈕用 .btn .btn-primary,「取消」鈕用 Bootstrap 的 .btn-secondary */

/* ---------- 訂單資訊對話框 ---------- */

/* 租借時段刪除鈕:觸控目標 ≥ 44x44。圖示置中由 markup 的 utility 決定 */
.rental-delete-btn {
    min-width: 44px;
    min-height: 44px;
}

/* 費用明細表:與 Bootstrap 的 .table .table-borderless 併用,列與列之間留白,左右各留 2.5% */
.rental-fee-table {
    max-width: 95%;
    margin-right: auto;
    margin-left: auto;
    border-collapse: separate;
    border-spacing: 0 var(--nv-space-8);
}

/* 費用明細表「項目」欄寬 */
.fee-item-col {
    width: 200px;
}

/* 長租單日期收合:accordion-button 內摘要列版面(窄螢幕換行)。金額靠右由 markup 的 .ms-auto 決定 */
.rental-date-summary {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: var(--nv-space-4) var(--nv-space-12);
    align-items: center;
    min-width: 0;
    padding-right: var(--nv-space-12);
}

/* 各日期成獨立圓角卡片、之間留白,避免展開結尾與下一個日期混淆。
   串接 .accordion-item 以打平 Bootstrap 的 .accordion-item:not(:first-of-type){border-top:0},
   靠載入順序(本檔在 bootstrap 之後)取勝,不依賴 id、不過度膨脹特異性。 */
.accordion-item.rental-date-item {
    margin-bottom: var(--nv-space-12);
    overflow: hidden;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.accordion-item.rental-date-item:last-child {
    margin-bottom: 0;
}

/* 唯讀附件預覽。
   裡面的 preview-item、preview-image、file-link、file-icon、file-name 與檔案上傳元件用的是同一組名稱,
   但上傳元件的樣式都限定在 .file-uploader 底下,唯讀容器套不到,所以在這裡以 .attachment-readonly 補上版面。
   注意:這段註解裡不要寫出「星號接斜線」的字樣(例如把 class 名稱寫成萬用字元再用斜線分隔),
   註解會提前結束,緊接的 .attachment-readonly 規則會整條被瀏覽器丟棄。 */
.attachment-readonly {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nv-space-12);
    margin-top: var(--nv-space-4);
}

.attachment-readonly .preview-item {
    width: 110px;
    overflow: hidden;
    background-color: var(--bs-white);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
}

.attachment-readonly .preview-item > a {
    display: block;
}

.attachment-readonly .preview-image {
    display: block;
    width: 110px;
    height: 110px;
    object-fit: cover;
}

.attachment-readonly .file-link {
    display: flex;
    flex-direction: column;
    gap: var(--nv-space-8);
    align-items: center;
    justify-content: center;
    height: 110px;
    padding: var(--nv-space-8);
    color: inherit;
    text-decoration: none;
}

.attachment-readonly .file-icon {
    font-size: var(--nv-font-size-display);
    color: var(--bs-secondary);
}

.attachment-readonly .pdf-icon {
    color: var(--bs-danger);
}

.attachment-readonly .file-name {
    display: -webkit-box;
    padding: var(--nv-space-4) var(--nv-space-8);
    overflow: hidden;
    font-size: var(--nv-font-size-sm);
    color: var(--bs-secondary);
    text-align: center;
    word-break: break-all;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


/* =========================================================
 * 12. 帳號管理
 *     命名:account-* 帳號資訊、bank-* 銀行帳號
 *     白底外框、欄位標題的字重、銀行帳號列的外框、下方按鈕列都用 Bootstrap utility。
 * ======================================================= */

/* ---------- 帳號資訊 ---------- */

/* 標題。下邊距隨外框寬度縮放,所以不用 utility;字重與置中由 markup 的 utility 決定 */
.account-title {
    padding-top: var(--nv-space-20);
    margin-bottom: 2%;
}

/* ---------- 銀行帳號 ---------- */

/* 「設定銀行帳號」標題與列表開闔、加入帳號兩顆按鈕。與下方帳號列表的距離隨表單寬度縮放 */
.bank-toolbar {
    margin-bottom: 5%;
}

/* 一筆銀行帳號(.bank-account-item)內的一格欄位 */
.bank-cell {
    margin-bottom: var(--nv-space-20);
}

/* 存摺封面的 label 由檔案上傳元件輸出,加不了 utility,所以用後代選擇器讓它與其他欄位標題一致 */
.bank-cell .file-upload-field > label {
    display: inline;
    font-weight: var(--nv-font-weight-black);
}