/* =========================================================
 * site.css — 前台全域樣式與共用元件
 * ---------------------------------------------------------
 * 載入順序:bootstrap → site-token → site → content → select2 → 各頁的第三方 / RCL 樣式
 * 所有寫死值都來自 site-token.css。頁面專屬的樣式放 content.css,不放這裡。
 *
 * 內容
 *   1. Bootstrap 主題覆寫
 *        按鈕、分頁、表單、accordion、list-group、導覽連結的 focus
 *   2. 基底
 *        body、捲軸、連結、主要內容區
 *   3. 頁首與導覽列
 *   4. Utility
 *        .fw-black、Bootstrap 沒有對應顏色的色彩 utility
 *   5. 共用元件
 *        .member-header        會員頁首列
 *        .card-brand           標題列上色的區塊卡(Bootstrap .card 的變體)
 *        .badge-*              色塊標籤(Bootstrap .badge 的變體)
 *        .btn-accent           橘色按鈕
 *        .btn-inverse          深綠底區塊上的白底按鈕
 *        .form-control-qty     數量小輸入框
 *        .cal-*                月曆
 *   6. 第三方元件:SweetAlert2
 *
 * 共用元件的命名:功能前綴 + kebab-case,不用 id 選擇器。
 * 兩頁以上使用的元件才放這裡;只有一頁使用的放 content.css 該頁的區段。
 * ======================================================= */


/* =========================================================
 * 1. Bootstrap 主題覆寫
 * ---------------------------------------------------------
 * Bootstrap 編譯後的元件把藍色寫死在元件變數或規則裡,不會跟著 --bs-primary 變。
 * 這裡逐一改指向主題色:能設元件變數(--bs-btn-*、--bs-pagination-* ...)的就設變數,
 * 沒有變數的才覆寫規則。
 * ======================================================= */

/* ---------- 按鈕 ---------- */

.btn-primary {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--nv-primary-active);
    --bs-btn-hover-border-color: var(--nv-primary-active);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--nv-primary-active);
    --bs-btn-active-border-color: var(--nv-primary-active);
    --bs-btn-disabled-color: var(--bs-white);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-close {
    --bs-btn-close-focus-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

/* ---------- 分頁:頁碼文字用主色(亮綠在白底上對比不足),目前頁的底色用品牌色(亮綠) ---------- */

.pagination {
    --bs-pagination-color: var(--bs-primary);
    --bs-pagination-hover-color: var(--bs-primary);
    --bs-pagination-focus-color: var(--bs-primary);
    --bs-pagination-focus-box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
    --bs-pagination-active-bg: var(--nv-brand);
    --bs-pagination-active-border-color: var(--nv-brand);
}

/* ---------- 表單 ---------- */

/* 欄位邊框:Bootstrap 預設的 --bs-border-color 在白底上對比只有 1.3:1,改用灰(4.69:1)。
   .input-group-text 與欄位相連,邊框要同色 */
.form-control,
.form-select,
.form-check-input,
.input-group-text {
    border-color: var(--bs-secondary);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

/* 排在 :focus 之後:勾選且 focus 時邊框用主色,與 Bootstrap 的順序相同 */
.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* ---------- accordion ---------- */

/* 展開列的底色跟著 --bs-primary-bg-subtle,不必另外設。
   文字與箭頭圖示 Bootstrap 預設用 --bs-primary-text-emphasis,這裡改成與收合時相同:內文色、收合時的圖示 */
.accordion {
    --bs-accordion-btn-focus-box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
    --bs-accordion-active-color: var(--bs-body-color);
    --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
}

/* ---------- list-group ---------- */

.list-group {
    --bs-list-group-active-bg: var(--bs-primary);
    --bs-list-group-active-border-color: var(--bs-primary);
}

/* ---------- 導覽連結 ---------- */

.nav-link:focus-visible {
    box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

/* 前台沒有用到的 Bootstrap 元件(.dropdown-menu、.progress、.link-primary ...)不在這裡覆寫,
   它們的互動狀態仍是 Bootstrap 預設的藍色;開始使用時再比照上面的寫法補上。 */


/* =========================================================
 * 2. 基底
 * ======================================================= */

/* 字型由 --bs-body-font-family 設定,底色用 Bootstrap 的 --bs-body-bg */
body {
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    background-image: linear-gradient(var(--nv-page-overlay), var(--nv-page-overlay)), url("/images/background1.jpg");
    background-attachment: fixed;
    background-position: 50% center;
    background-size: cover;
    background-blend-mode: multiply;
}

::-webkit-scrollbar {
    display: none;
}

a {
    text-decoration: none;
}

/* 主要內容顯示區 */
main {
    max-width: var(--nv-content-max-width);
    margin: var(--nv-space-8) auto;
}


/* =========================================================
 * 3. 頁首與導覽列
 * ---------------------------------------------------------
 * 結構:.site-header(與 Bootstrap 的 .navbar 併用) > .site-header-logo + .site-header-menu + .site-header-toggle × 2
 *       .site-nav(手機版展開的選單) > .site-nav-link
 * 選單的顯示與隱藏由 JavaScript 依視窗寬度切換 inline 的 display,斷點與這裡的 767.98px 一致;
 * 所以 .site-header-toggle 與 .site-nav 的 display: none 不能改用帶 !important 的 .d-none。
 * ======================================================= */

.site-header {
    max-width: var(--nv-content-max-width);
    margin: var(--nv-space-30) auto var(--nv-space-20);
    background-color: var(--bs-white);
    border-radius: var(--bs-border-radius-pill);
}

.site-header-logo {
    width: 35%;
    margin-left: 2%;
}

/* 桌機版的文字選單:未登入時是「登入」連結本身,登入後是包著數個連結的 span */
.site-header-menu {
    margin-right: 2%;
    margin-left: auto;
    font-weight: var(--nv-font-weight-black);
    text-shadow: var(--nv-text-shadow-nav);
}

.site-header-menu,
.site-header-menu a {
    color: var(--bs-black);
}

/* 手機版的選單開關(展開、收合各一顆)。內距與字重由 markup 的 utility 決定 */
.site-header-toggle {
    display: none;
    margin-right: var(--nv-space-20);
    margin-left: auto;
    color: var(--bs-white);
    cursor: pointer;
    background-color: var(--nv-brand);
    border-radius: var(--bs-border-radius);
}

/* 手機版展開的選單。置中、底色與圓角由 markup 的 utility 決定 */
.site-nav {
    display: none;
    margin-top: var(--nv-space-20);
    line-height: var(--nv-size-row);
}

.site-nav-link {
    color: var(--bs-black);
}

@media (max-width: 767.98px) {
    .site-header-logo {
        width: 75%;
    }
}


/* =========================================================
 * 4. Utility
 * ======================================================= */

/* 超粗字重。Bootstrap 的 .fw-bold 是 700,沒有 900 */
.fw-black {
    font-weight: var(--nv-font-weight-black) !important;
}

/* 色彩 utility:Bootstrap 沒有對應顏色的才定義在這裡。
   主色、紅、灰直接用 Bootstrap 的 .text-primary、.text-danger、.text-secondary,淺綠底用 .bg-primary-subtle */
.text-accent { color: var(--nv-accent); }
.text-accent-dark { color: var(--nv-accent-dark); }
.bg-brand { background-color: var(--nv-brand); }


/* =========================================================
 * 5. 共用元件
 * ======================================================= */

/* ---------------------------------------------------------
 * .member-header — 會員頁首列
 * 用途:訂單紀錄、帳號管理頁最上方的橘色列,左起頭像、姓名與信箱、選單連結。
 * 結構:.member-header > .member-header-avatar(內含 img) + .member-header-info(內含 p)
 *       + .member-header-menu(內含 a.member-header-link)
 * ------------------------------------------------------- */
.member-header {
    display: flex;
    width: 100%;
    margin-top: 5%;
    line-height: var(--nv-size-member-header);
    color: var(--bs-white);
    background-color: var(--nv-accent);
    border-radius: var(--nv-border-radius-2xl);
}

.member-header-avatar {
    width: 10%;
    margin-right: var(--nv-space-20);
    user-select: none;
}

.member-header-avatar img {
    width: 90px;
    height: auto;
}

.member-header-info {
    width: 30%;
    padding-top: var(--nv-space-20);
    line-height: var(--nv-line-height-sm);
}

.member-header-info p {
    line-height: var(--nv-line-height-condensed);
    user-select: none;
}

.member-header-menu {
    width: 70%;
    margin-right: 2%;
    text-align: right;
}

.member-header-link,
.member-header-link:hover {
    margin-right: var(--nv-space-8);
    color: var(--bs-white);
    text-decoration: none;
    cursor: pointer;
}

@media (max-width: 767.98px) {
    .member-header-info p {
        display: none;
    }
}

/* ---------------------------------------------------------
 * .card-brand — 標題列上色的區塊卡
 * 用途:上方一條品牌綠標題列、下方白底內容的區塊(首頁的重要消息、公告列表)。
 * 是 Bootstrap .card 的變體,結構照 Bootstrap:
 *   <div class="card card-brand"><div class="card-header">標題</div><div class="card-body">…</div></div>
 * ------------------------------------------------------- */
.card-brand {
    --bs-card-border-width: 0;
    --bs-card-border-radius: var(--bs-border-radius-lg);
    --bs-card-inner-border-radius: var(--bs-border-radius-lg);
    --bs-card-cap-color: var(--bs-white);
    --bs-card-cap-bg: var(--nv-brand);
}

.card-brand > .card-header {
    font-weight: var(--nv-font-weight-black);
    text-align: center;
}

/* ---------------------------------------------------------
 * .badge-* — 色塊標籤
 * 用途:時段等短文字標籤。是 Bootstrap .badge 的變體,一律與 .badge 併用。
 *   尺寸  .badge-lg       大標籤(時段)
 *   顏色  .badge-accent   橘底白字
 *   主色(深綠)底直接用 Bootstrap 的 .text-bg-primary,不另外定義。
 * ------------------------------------------------------- */
.badge-lg {
    --bs-badge-padding-x: var(--nv-space-8);
    --bs-badge-padding-y: 0;
    --bs-badge-font-size: var(--nv-font-size-md);
    --bs-badge-font-weight: var(--nv-font-weight-black);
    line-height: var(--nv-size-chip);
}

.badge-accent {
    background-color: var(--nv-accent);
}

/* ---------------------------------------------------------
 * .btn-accent — 橘色按鈕
 * 用途:次要的強調動作(首頁搜尋、編輯)。與 .btn 併用。
 * ------------------------------------------------------- */
.btn-accent {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--nv-accent);
    --bs-btn-border-color: var(--nv-accent);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--nv-accent-active);
    --bs-btn-hover-border-color: var(--nv-accent-active);
    --bs-btn-focus-shadow-rgb: var(--nv-accent-rgb);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--nv-accent-active);
    --bs-btn-active-border-color: var(--nv-accent-active);
    --bs-btn-disabled-color: var(--bs-white);
    --bs-btn-disabled-bg: var(--nv-accent);
    --bs-btn-disabled-border-color: var(--nv-accent);
}

/* ---------------------------------------------------------
 * .btn-inverse — 深綠底區塊上的白底按鈕
 * 用途:主色(深綠)區塊內的動作(登入頁的校內人士登入)。與 .btn 併用。
 * 白底面板上的主要動作一律用 Bootstrap 的 .btn-primary。
 * ------------------------------------------------------- */
.btn-inverse {
    --bs-btn-font-weight: var(--nv-font-weight-bold);
    --bs-btn-color: var(--bs-primary);
    --bs-btn-bg: var(--bs-white);
    --bs-btn-border-color: var(--bs-white);
    --bs-btn-hover-color: var(--nv-primary-active);
    --bs-btn-hover-bg: var(--bs-white);
    --bs-btn-hover-border-color: var(--bs-white);
    --bs-btn-focus-shadow-rgb: var(--bs-white-rgb);
    --bs-btn-active-color: var(--nv-primary-active);
    --bs-btn-active-bg: var(--bs-white);
    --bs-btn-active-border-color: var(--bs-white);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-bg: var(--bs-white);
    --bs-btn-disabled-border-color: var(--bs-white);
}

/* ---------------------------------------------------------
 * .form-control-qty — 數量小輸入框
 * 用途:接在勾選項目後面、與文字同一行的數量欄位(設備數量、人事人數)。
 * 與 Bootstrap 的 .form-control .form-control-sm 併用,這裡只補行內顯示與寬度。
 * ------------------------------------------------------- */
.form-control-qty {
    display: inline-block;
    width: 5rem;
    text-align: right;
}

/* ---------------------------------------------------------
 * .cal-* — 月曆
 * 用途:場館時段頁與借用場地頁共用同一套月曆,兩頁沒有各自的差異。
 * 寬度:月曆本身不設寬度上限,填滿外層容器;要多寬由各頁的格線欄位決定。
 * 結構:.cal-wrapper > .cal-panel > .cal-nav(同一行:.cal-nav-prev、.cal-title、.cal-nav-next)
 *       + table.cal-table(td 內的日期是 .cal-day)
 *       .cal-date-bar 是顯示所選日期的色條,上方間距由 markup 的 utility 決定。
 * 日期的狀態:[selected] 屬性(選取)、.holiday(假日)、.rented(有借用紀錄)。
 * ------------------------------------------------------- */

.cal-wrapper {
    margin: var(--nv-space-8) auto;
}

.cal-panel {
    padding: var(--nv-space-16);
    overflow: auto;
    background-color: var(--bs-white);
}

/* 年月在中間,上一月、下一月的箭頭在兩側 */
.cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--nv-space-16);
}

.cal-title {
    margin: 0;
    font-weight: var(--nv-font-weight-black);
    text-align: center;
}

/* 箭頭是圖示字型,沒有粗體;用 1px 的描邊加粗 */
.cal-nav button {
    display: inline-block;
    padding: var(--nv-space-4) var(--nv-space-8);
    font-size: var(--nv-font-size-xl);
    line-height: 1;
    color: var(--bs-primary);
    -webkit-text-stroke: 1px currentcolor;
    cursor: pointer;
    background-color: var(--bs-white);
    border: var(--bs-border-width) solid var(--bs-white);
    border-radius: var(--bs-border-radius-sm);
}

.cal-table {
    width: 100%;
    font-weight: var(--nv-font-weight-bold);
    border-collapse: collapse;
}

.cal-table td,
.cal-table th {
    height: 60px;
    padding: var(--nv-space-4);
    text-align: center;
    vertical-align: top;
    border: none;
}

/* 固定正方形,讓 1 位數與 2 位數日期的選取底色都是正圓 */
.cal-day {
    display: inline-block;
    width: var(--nv-size-calendar-day);
    height: var(--nv-size-calendar-day);
    font-weight: var(--nv-font-weight-black);
    line-height: var(--nv-size-calendar-day);
    text-align: center;
    cursor: pointer;
}

.cal-day[selected] {
    background-color: var(--nv-accent);
    border-radius: 50%;
}

.cal-day.holiday {
    color: var(--bs-danger);
}

/* 紅字在橘色選取底色上難以辨識,選取時改用內文顏色 */
.cal-day.holiday[selected] {
    color: var(--bs-body-color);
}

/* 有借用紀錄的日期:數字下方顯示灰點 */
.cal-day.rented {
    position: relative;
}

.cal-day.rented::after {
    position: absolute;
    bottom: -10px;
    left: 50%;
    width: 7px;
    height: 7px;
    content: "";
    background-color: var(--bs-secondary);
    border-radius: 50%;
    transform: translateX(-50%);
}

.cal-date-bar {
    color: var(--bs-white);
    text-align: center;
    background-color: var(--nv-brand);
}

/* 手機:縮小內距與格高,讓 7 欄日期完整顯示 */
@media (max-width: 767.98px) {
    .cal-panel {
        padding: var(--nv-space-8) var(--nv-space-4) 0;
    }

    .cal-nav {
        margin-bottom: 0;
    }

    .cal-table td,
    .cal-table th {
        height: 46px;
        padding: var(--nv-space-4) 0;
    }
}

/* 平板:月曆與時段並排時月曆欄較窄,收掉左右內距讓 7 欄日期完整顯示 */
@media (min-width: 768px) and (max-width: 991.98px) {
    .cal-panel {
        padding-right: var(--nv-space-4);
        padding-left: var(--nv-space-4);
    }

    .cal-table td,
    .cal-table th {
        padding-right: 0;
        padding-left: 0;
    }
}


/* =========================================================
 * 6. 第三方元件:SweetAlert2
 * ---------------------------------------------------------
 * 對話框按鈕的配色集中在這裡,三種按鈕各一個 class:
 *   .swal-btn-confirm   確認(主色)
 *   .swal-btn-danger    破壞性動作的確認(紅)
 *   .swal-btn-cancel    取消(外框灰)
 *
 * 以 .swal2-popup 祖先選擇器拉高 specificity,
 * 蓋過 SweetAlert2 由 JS 動態注入的預設按鈕樣式(不需 !important)。
 * ======================================================= */

.swal2-popup .swal2-styled.swal-btn-confirm,
.swal2-popup .swal2-styled.swal-btn-danger,
.swal2-popup .swal2-styled.swal-btn-cancel {
    box-shadow: none;
}

.swal2-popup .swal2-styled.swal-btn-confirm:focus-visible,
.swal2-popup .swal2-styled.swal-btn-danger:focus-visible,
.swal2-popup .swal2-styled.swal-btn-cancel:focus-visible {
    outline: none;
}

/* ---------- confirm 一般(主要動作) ---------- */

.swal2-popup .swal2-styled.swal-btn-confirm {
    color: var(--bs-white);
    background-color: var(--bs-primary);
}

.swal2-popup .swal2-styled.swal-btn-confirm:hover {
    background-color: var(--nv-primary-active);
}

.swal2-popup .swal2-styled.swal-btn-confirm:focus-visible {
    box-shadow: 0 0 0 var(--bs-focus-ring-width) rgba(var(--bs-primary-rgb), var(--nv-focus-ring-strong-opacity));
}

/* ---------- confirm 破壞性 / deny ---------- */

/* 滑鼠移入的變化沿用 SweetAlert2 內建的效果(疊一層 10% 的黑) */

.swal2-popup .swal2-styled.swal-btn-danger {
    color: var(--bs-white);
    background-color: var(--bs-danger);
}

.swal2-popup .swal2-styled.swal-btn-danger:focus-visible {
    box-shadow: 0 0 0 var(--bs-focus-ring-width) rgba(var(--bs-danger-rgb), var(--nv-focus-ring-strong-opacity));
}

/* ---------- cancel(次要動作) ---------- */

.swal2-popup .swal2-styled.swal-btn-cancel {
    color: var(--bs-secondary);
    background-color: transparent;
    border: var(--bs-border-width) solid var(--bs-border-color);
}

.swal2-popup .swal2-styled.swal-btn-cancel:hover {
    background-color: var(--bs-gray-300);
}

.swal2-popup .swal2-styled.swal-btn-cancel:focus-visible {
    box-shadow: 0 0 0 var(--bs-focus-ring-width) rgba(var(--bs-secondary-rgb), var(--nv-focus-ring-strong-opacity));
}