/**
 * ==========================================
 * 義工服務系統 - 禪意綠金主題
 * Zen Green & Gold Theme for Volunteer System
 * Version: 3.0 - 整合版
 * ==========================================
 */

/* ============================================
   1. CSS Custom Properties (CSS 變數)
   ============================================ */

:root {
    /* ===== 禪意綠金色系 ===== */
    /* 主色調 - 禪意深綠 */
    --zen-primary-50:  #E8F5E9;
    --zen-primary-100: #C8E6C9;
    --zen-primary-200: #A5D6A7;
    --zen-primary-300: #81C784;
    --zen-primary-400: #66BB6A;
    --zen-primary: #2D5A27;
    --zen-primary-600: #256421;
    --zen-primary-700: #1B4D19;
    --zen-primary-800: #143912;
    --zen-primary-900: #0D260B;

    /* 強調色調 - 智慧金 */
    --zen-gold-50:  #FFF8E1;
    --zen-gold-100: #FFECB3;
    --zen-gold-200: #FFE082;
    --zen-gold-300: #FFD54F;
    --zen-gold-400: #FFCA28;
    --zen-gold: #D4AF37;
    --zen-gold-600: #C49A2A;
    --zen-gold-700: #A6821E;
    --zen-gold-800: #886A14;
    --zen-gold-900: #6A520A;

    /* 語義色彩 */
    --zen-success: #4CAF50;
    --zen-success-light: #E8F5E9;
    --zen-success-dark: #2E7D32;
    --zen-warning: #FF9800;
    --zen-warning-light: #FFF3E0;
    --zen-warning-dark: #EF6C00;
    --zen-error: #E53935;
    --zen-error-light: #FFEBEE;
    --zen-error-dark: #C62828;
    --zen-info: #1976D2;
    --zen-info-light: #E3F2FD;
    --zen-info-dark: #1565C0;

    /* 中性色彩 */
    --zen-gray-50:  #FAFAFA;
    --zen-gray-100: #F5F5F5;
    --zen-gray-200: #EEEEEE;
    --zen-gray-300: #E0E0E0;
    --zen-gray-400: #BDBDBD;
    --zen-gray-500: #9E9E9E;
    --zen-gray-600: #757575;
    --zen-gray-700: #616161;
    --zen-gray-800: #424242;
    --zen-gray-900: #212121;

    /* 禪意特殊色 */
    --zen-stone: #5A5A5A;
    --zen-bamboo: #6B8E23;
    --zen-lotus: #E8B4B8;
    --zen-incense: #8B7355;
    --zen-water: #5F9EA0;

    /* 背景色彩 */
    --zen-bg: #FAF8F5;
    --zen-bg-primary: #FFFFFF;
    --zen-bg-tertiary: #F5F2ED;

    /* 文字色彩 */
    --zen-text: #2C2C2C;
    --zen-text-secondary: #5A5A5A;
    --zen-text-muted: #5E5E5E; /* C1: 由 #8A8A8A 加深以符合 WCAG AA 對比（次要文字） */

    /* 邊框色彩 */
    --zen-border: #E8E4DE;
    --zen-border-medium: #D4CFC6;
    --zen-border-dark: #B8B0A4;

    /* ===== Bootstrap 覆寫變數 ===== */
    --bs-primary: var(--zen-primary);
    --bs-primary-rgb: 45, 90, 39;
    --bs-success: var(--zen-success);
    --bs-warning: var(--zen-warning);
    --bs-danger: var(--zen-error);
    --bs-info: var(--zen-info);
    --bs-body-bg: var(--zen-bg);
    --bs-body-color: var(--zen-text);
    --bs-border-color: var(--zen-border);

    /* 字體系統（系統字型堆疊，不相依 Google Fonts CDN）
       逐字後備：拉丁字優先用各平台 UI 字型，中文字落到各平台內建 CJK 字型。
       'Noto Serif/Sans TC' 保留在最前——使用者本機若已安裝 Noto 仍會採用。 */
    --zen-font-display: 'Noto Serif TC', 'Source Han Serif TC', Georgia, 'Songti TC', 'PMingLiU', serif;
    --zen-font-body: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        'PingFang TC', 'Microsoft JhengHei', 'Noto Sans CJK TC', sans-serif;

    /* 間距系統（8pt grid） */
    --zen-space-1: 0.25rem;   /*  4px */
    --zen-space-2: 0.5rem;    /*  8px */
    --zen-space-3: 0.75rem;   /* 12px */
    --zen-space-4: 1rem;      /* 16px */
    --zen-space-5: 1.5rem;    /* 24px */
    --zen-space-6: 2rem;      /* 32px */
    --zen-space-7: 3rem;      /* 48px */
    --zen-space-8: 4rem;      /* 64px */

    /* 圓角 */
    --zen-radius-sm: 0.25rem;
    --zen-radius: 0.5rem;
    --zen-radius-md: 0.5rem;
    --zen-radius-lg: 0.75rem;
    --zen-radius-xl: 1rem;
    --zen-radius-pill: 9999px;

    /* 陰影（數字別名：1=sm, 2=base, 3=lg） */
    --zen-shadow-sm: 0 2px 4px rgba(45, 90, 39, 0.08);
    --zen-shadow: 0 4px 12px rgba(45, 90, 39, 0.1);
    --zen-shadow-lg: 0 8px 24px rgba(45, 90, 39, 0.12);
    --zen-shadow-gold: 0 4px 16px rgba(212, 175, 55, 0.25);
    --zen-shadow-1: var(--zen-shadow-sm);
    --zen-shadow-2: var(--zen-shadow);
    --zen-shadow-3: var(--zen-shadow-lg);

    /* 字級（年長者友善：base=18px） */
    --zen-font-xs:   0.75rem;   /* 12px */
    --zen-font-sm:   0.875rem;  /* 14px */
    --zen-font-base: 1rem;      /* 16px */
    --zen-font-lg:   1.125rem;  /* 18px */
    --zen-font-xl:   1.25rem;   /* 20px */
    --zen-font-2xl:  1.5rem;    /* 24px */
    --zen-font-3xl:  2rem;      /* 32px */

    /* 過渡動畫 */
    --zen-transition: 0.25s ease-out;
    --zen-transition-fast: 0.15s ease-out;

    /* 相容舊變數 */
    --primary-color: var(--zen-primary);
    --success-color: var(--zen-success);
    --warning-color: var(--zen-warning);
    --danger-color: var(--zen-error);
    --info-color: var(--zen-info);
}

/* ============================================
   2. 基礎樣式
   ============================================ */

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--zen-font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--zen-text);
    background-color: var(--zen-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* 防止行動版水平溢出 */
}

/* 行動版全域溢出防護 */
main[role="main"] {
    overflow-x: hidden;
    max-width: 100vw;
}

/* 宣紙質感背景 */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(212, 175, 55, 0.01) 2px,
            rgba(212, 175, 55, 0.01) 4px
        );
    pointer-events: none;
    z-index: -1; /* 改為 -1，確保不干擾 sticky/fixed 元素的層疊 */
    opacity: 0.3;
}

/* 標題字體 */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--zen-font-display);
    font-weight: 600;
    color: var(--zen-text);
}

/* 保留 text-white 在標題上的效果 */
.text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6,
.text-white .h1, .text-white .h2, .text-white .h3, .text-white .h4, .text-white .h5, .text-white .h6,
h1.text-white, h2.text-white, h3.text-white, h4.text-white, h5.text-white, h6.text-white {
    color: #fff !important;
}

a {
    color: var(--zen-primary);
    text-decoration: none;
    transition: color var(--zen-transition-fast);
}

a:hover {
    color: var(--zen-primary-700);
}

/* ============================================
   3. Bootstrap 覆寫 - 按鈕
   ============================================ */

.btn {
    border-radius: var(--zen-radius);
    font-weight: 500;
    transition: all var(--zen-transition-fast);
    min-height: 44px;
    padding: 0.5rem 1rem;
}

/* 超小按鈕 - 用於卡片標題等緊湊空間 */
.btn-xs {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    min-height: 28px;
    line-height: 1.2;
}

.btn-primary {
    background: linear-gradient(135deg, var(--zen-primary) 0%, var(--zen-primary-600) 100%);
    border-color: var(--zen-primary);
    color: #fff;
    box-shadow: var(--zen-shadow-sm);
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, var(--zen-primary-600) 0%, var(--zen-primary-700) 100%);
    border-color: var(--zen-primary-700);
    box-shadow: var(--zen-shadow);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-outline-primary {
    color: var(--zen-primary);
    border-color: var(--zen-primary);
    border-width: 2px;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--zen-primary-50);
    color: var(--zen-primary-700);
    border-color: var(--zen-primary-700);
}

/* 金色按鈕 */
.btn-gold {
    background: linear-gradient(135deg, var(--zen-gold) 0%, var(--zen-gold-600) 100%);
    border-color: var(--zen-gold);
    color: var(--zen-text);
    font-weight: 500;
    box-shadow: var(--zen-shadow-gold);
}

.btn-gold:hover {
    background: linear-gradient(135deg, var(--zen-gold-400) 0%, var(--zen-gold) 100%);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.35);
    transform: translateY(-1px);
    color: var(--zen-text);
}

.btn-outline-gold {
    color: var(--zen-gold-600);
    border-color: var(--zen-gold);
    border-width: 2px;
    background: transparent;
}

.btn-outline-gold:hover {
    background-color: var(--zen-gold-50);
    color: var(--zen-gold-700);
}

/* ============================================
   4. Bootstrap 覆寫 - 卡片
   ============================================ */

.card {
    background: var(--zen-bg-primary);
    border: 1px solid var(--zen-border);
    border-radius: var(--zen-radius-xl);
    box-shadow: var(--zen-shadow-sm);
    transition: all var(--zen-transition);
    overflow: hidden;
}

.card:hover {
    box-shadow: var(--zen-shadow);
}

.card-header {
    background: linear-gradient(135deg, var(--zen-primary) 0%, var(--zen-primary-600) 100%);
    color: #fff;
    padding: 1rem 1.25rem;
    border-bottom: 3px solid var(--zen-gold);
    font-weight: 600;
}

.card-header h5,
.card-header h4,
.card-header h6,
.card-header .h6,
.card-header .card-title {
    color: #fff;
    margin-bottom: 0;
}

/* text-bg-* 的 Bootstrap color: #000 !important 會覆蓋上方 color: #fff，需補強 */
.card-header.text-bg-warning,
.card-header.text-bg-info {
    color: #fff !important;
}

/* 深綠底色上強制各種文字為白色（排除淺色 card-header 變體） */
.card-header:not(.bg-white):not(.bg-body-secondary):not(.bg-light) .text-zen-green-dark,
.card-header:not(.bg-white):not(.bg-body-secondary):not(.bg-light) .text-zen-green,
.card-header:not(.bg-white):not(.bg-body-secondary):not(.bg-light) .text-primary,
.card-header:not(.bg-white):not(.bg-body-secondary):not(.bg-light) .text-success,
.card-header:not(.bg-white):not(.bg-body-secondary):not(.bg-light) .text-info,
.card-header:not(.bg-white):not(.bg-body-secondary):not(.bg-light) .text-dark {
    color: #fff !important;
}

.card-header:not(.bg-white):not(.bg-body-secondary):not(.bg-light) .text-muted {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* bg-white card-header：清除漸層，確保真正顯示白底並改為深色文字 */
.card-header.bg-white {
    background-image: none !important;
    color: var(--zen-text) !important;
}

.card-header.bg-white h1, .card-header.bg-white h2, .card-header.bg-white h3,
.card-header.bg-white h4, .card-header.bg-white h5, .card-header.bg-white h6,
.card-header.bg-white .h6, .card-header.bg-white .card-title, .card-header.bg-white span {
    color: var(--zen-text) !important;
}

/* 使用 Bootstrap bg-body-secondary 的 card-header 需要覆寫樣式 */
.card-header.bg-body-secondary {
    background: var(--zen-bg-tertiary) !important;
    color: var(--zen-text) !important;
    border-bottom: 1px solid var(--zen-border);
}

.card-header.bg-body-secondary i {
    color: var(--zen-primary);
}

.card-body {
    padding: 1.25rem;
}

.card-footer {
    background: var(--zen-bg-tertiary);
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--zen-border);
}

/* 金邊卡片 */
.card-gold,
.card.border-warning {
    border: 2px solid var(--zen-gold);
}

/* ============================================
   5. Bootstrap 覆寫 - 表單
   ============================================ */

.form-control {
    padding: 0.75rem 1rem;
    font-size: 1rem;
    color: var(--zen-text);
    background: var(--zen-bg-primary);
    border: 2px solid var(--zen-border-medium);
    border-radius: var(--zen-radius);
    min-height: 48px;
    transition: all var(--zen-transition-fast);
}

.form-control:focus {
    border-color: var(--zen-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(45, 90, 39, 0.15);
}

.form-control:hover:not(:focus) {
    border-color: var(--zen-primary-300);
}

.form-control::placeholder {
    color: var(--zen-text-muted);
}

.form-label {
    font-weight: 500;
    color: var(--zen-text);
    margin-bottom: 0.5rem;
}

.form-select {
    padding: 0.75rem 1rem;
    border: 2px solid var(--zen-border-medium);
    border-radius: var(--zen-radius);
    min-height: 48px;
}

.form-select:focus {
    border-color: var(--zen-primary);
    box-shadow: 0 0 0 3px rgba(45, 90, 39, 0.15);
}

/* ============================================
   6. Bootstrap 覆寫 - 徽章
   ============================================ */

.badge {
    font-weight: 500;
    padding: 0.4em 0.8em;
    border-radius: 9999px;
}

.badge-primary,
.bg-primary {
    background-color: var(--zen-primary) !important;
}

.badge-gold {
    background: var(--zen-gold-100);
    color: var(--zen-gold-800);
}

.badge-success,
.bg-success {
    background-color: var(--zen-success) !important;
}

.badge-warning,
.bg-warning {
    background-color: var(--zen-warning) !important;
}

.badge-danger,
.bg-danger {
    background-color: var(--zen-error) !important;
}

/* ============================================
   7. Bootstrap 覆寫 - 警告框
   ============================================ */

.alert {
    padding: 1rem;
    border: none;
    border-left: 4px solid;
    border-radius: var(--zen-radius-lg);
}

.alert-success {
    background: var(--zen-success-light);
    border-color: var(--zen-success);
    color: var(--zen-success-dark);
}

.alert-warning {
    background: var(--zen-warning-light);
    border-color: var(--zen-warning);
    color: var(--zen-warning-dark);
}

.alert-danger {
    background: var(--zen-error-light);
    border-color: var(--zen-error);
    color: var(--zen-error-dark);
}

.alert-info {
    background: var(--zen-info-light);
    border-color: var(--zen-info);
    color: var(--zen-info-dark);
}

/* ============================================
   8. Bootstrap 覆寫 - Modal
   ============================================ */

.modal-content {
    border: none;
    border-radius: var(--zen-radius-xl);
    box-shadow: var(--zen-shadow-lg);
}

.modal-header {
    background: linear-gradient(135deg, var(--zen-primary) 0%, var(--zen-primary-600) 100%);
    color: #fff;
    border-bottom: 3px solid var(--zen-gold);
    padding: 1rem 1.25rem;
    border-radius: var(--zen-radius-xl) var(--zen-radius-xl) 0 0;
}

.modal-header .modal-title {
    color: #fff;
}

.modal-header .btn-close {
    filter: brightness(0) invert(1);
}

.modal-body {
    padding: 1.25rem;
}

.modal-footer {
    border-top: 1px solid var(--zen-border);
    padding: 1rem 1.25rem;
}

/* ============================================
   9. Bootstrap 覆寫 - 導航
   ============================================ */

.navbar-dark.bg-primary,
.navbar.bg-primary {
    background: linear-gradient(135deg, var(--zen-primary) 0%, var(--zen-primary-700) 100%) !important;
    border-bottom: 3px solid var(--zen-gold);
}

/* 導覽列防止折行 */
.navbar .navbar-collapse {
    flex-wrap: nowrap;
}

.navbar .navbar-nav {
    flex-wrap: nowrap;
    align-items: center;
}

.navbar-brand {
    font-family: var(--zen-font-display);
    font-weight: 600;
    color: #fff !important;
    white-space: nowrap;
    flex-shrink: 0;
}

.navbar-dark .navbar-brand,
.navbar-dark .navbar-brand:hover {
    color: #fff !important;
}

.navbar-dark .nav-link {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    padding: 0.5rem 0.625rem;
    border-radius: var(--zen-radius);
    transition: all var(--zen-transition-fast);
    white-space: nowrap;
    font-size: 0.9rem;
}

/* 大螢幕恢復正常間距 */
@media (min-width: 1200px) {
    .navbar-dark .nav-link {
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }
}

/* 超大螢幕更寬敞 */
@media (min-width: 1400px) {
    .navbar-dark .nav-link {
        padding: 0.75rem 1.25rem;
    }
}

.navbar-dark .nav-link:hover,
.navbar-dark .nav-link:focus {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
}

.navbar-dark .nav-link.active {
    color: var(--zen-gold);
    background-color: rgba(255, 255, 255, 0.15);
}

/* 使用者顯示資訊 - 名字完整顯示 + 圖示表示職位 */
.user-display-info {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.user-display-info .user-name {
    white-space: nowrap;
}

/* 職位圖示樣式 */
.user-display-info .bi {
    font-size: 0.85rem;
}

/* Dropdown */
.dropdown-menu {
    border: 1px solid var(--zen-border);
    border-radius: var(--zen-radius-lg);
    box-shadow: var(--zen-shadow-lg);
    padding: 0.5rem;
}

.dropdown-item {
    padding: 0.5rem 1rem;
    border-radius: var(--zen-radius);
    color: var(--zen-text);
    transition: all var(--zen-transition-fast);
}

.dropdown-item:hover {
    background: var(--zen-bg-tertiary);
    color: var(--zen-primary);
}

.dropdown-item.active,
.dropdown-item:active {
    background: var(--zen-primary-50);
    color: var(--zen-primary-700);
}

/* ============================================
   10. Bootstrap 覆寫 - 列表群組
   ============================================ */

.list-group-item {
    border: none;
    border-bottom: 1px solid var(--zen-border);
    padding: 0.75rem 1rem;
    transition: all var(--zen-transition-fast);
}

.list-group-item:last-child {
    border-bottom: none;
}

.list-group-item-action:hover {
    background: var(--zen-bg-tertiary);
    color: var(--zen-primary);
}

/* ============================================
   11. Bootstrap 覆寫 - 進度條
   ============================================ */

.progress {
    border-radius: var(--zen-radius);
    background-color: var(--zen-gray-200);
    height: 8px;
}

.progress-bar {
    border-radius: var(--zen-radius);
    background: linear-gradient(90deg, var(--zen-primary) 0%, var(--zen-primary-400) 100%);
}

.progress-bar.bg-success {
    background: linear-gradient(90deg, var(--zen-success) 0%, var(--zen-success-dark) 100%) !important;
}

/* ============================================
   行動版調整：避免內容被底部導航遮擋
   ============================================ */
@media (max-width: 991.98px) {
    main#main-content {
        padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ============================================
   12. 行動版底部導航
   ============================================ */

.bottom-nav {
    z-index: 1030;
    box-shadow: 0 -2px 10px rgba(45, 90, 39, 0.1);
    background: var(--zen-bg-primary) !important;
    border-top: 1px solid var(--zen-border) !important;
}

.bottom-nav .nav-link {
    color: var(--zen-text-secondary);
    padding: 0.5rem 0.25rem;
    font-size: 0.75rem;
    min-height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bottom-nav .nav-link.active {
    color: var(--zen-primary);
}

.bottom-nav .nav-link i {
    font-size: 1.25rem;
}


/* ============================================
   13. 行動版頂部標題
   ============================================ */

.mobile-header {
    position: sticky;
    top: 56px; /* 位於 navbar 下方 */
    z-index: 1045; /* 低於 navbar(1055)，高於一般內容 */
    background-color: #2D5A27 !important; /* Fallback for variable failure */
    background: linear-gradient(135deg, var(--zen-primary) 0%, var(--zen-primary-600) 100%) !important;
    border-bottom: 2px solid var(--zen-gold);
}

.mobile-header h1,
.mobile-header .h1,
.mobile-header .h5 {
    color: #fff !important;
}

/* 頂部標題列快捷按鈕 */
.mobile-header .btn-outline-light {
    opacity: 0.85;
    padding: 0.25rem 0.5rem;
    font-size: 1.1rem;
    width: 2.5rem;
    height: 2.5rem;
    line-height: 1;
}

.mobile-header .btn-outline-light:hover,
.mobile-header .btn-outline-light:focus,
.mobile-header .btn-outline-light.active {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.2);
}

/* ============================================
   14. Dashboard 專用樣式
   ============================================ */

.greeting-section h2 {
    color: var(--zen-text);
    font-family: var(--zen-font-display);
    font-size: 1.4rem;
}

/* 焦點卡片 */
.focus-card {
    min-height: 50vh;
    display: flex;
    flex-direction: column;
}

.focus-card .card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}

/* 焦點區主要行動按鈕：加大觸控區域 */
.focus-action-btn {
    min-height: 56px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* 幹部管理待辦提示條 */
.management-alert-bar .badge.rounded-circle {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 幹部管理快捷按鈕卡片 */
.management-shortcuts-card .card-body {
    padding: 0.5rem;
}

.management-shortcut-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.75rem 0.5rem;
    border-radius: var(--zen-radius-lg, 0.75rem);
    text-decoration: none;
    color: var(--bs-body-color);
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    transition: background-color 0.15s, border-color 0.15s;
    min-height: 80px;
}

.management-shortcut-btn:hover,
.management-shortcut-btn:focus {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-primary);
    text-decoration: none;
    color: var(--bs-body-color);
}

.management-shortcut-btn i {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.management-shortcut-title {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
}

.management-shortcut-desc {
    font-size: 0.7rem;
    color: var(--bs-secondary-color);
    line-height: 1.2;
    margin-top: 0.125rem;
}

/* 大字模式：管理快捷按鈕 */
.large-text .management-shortcut-btn {
    min-height: 96px;
    padding: 1rem 0.75rem;
}

.large-text .management-shortcut-btn i {
    font-size: 1.75rem;
}

.large-text .management-shortcut-title {
    font-size: 1rem;
}

.large-text .management-shortcut-desc {
    font-size: 0.8rem;
}

/* 狀態徽章 */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-weight: 500;
}

.status-badge.serving {
    background-color: var(--zen-success-light);
    color: var(--zen-success-dark);
}

.status-badge.starting-soon {
    background-color: var(--zen-warning-light);
    color: var(--zen-warning-dark);
}

.status-badge.has-invitation {
    background-color: var(--zen-primary-100);
    color: var(--zen-primary-700);
}

.status-badge.has-task {
    background-color: var(--zen-info-light);
    color: var(--zen-info-dark);
}

/* 緊急狀態 - 紅色背景配白色文字 */
.status-badge.bg-danger {
    background-color: var(--zen-error) !important;
    color: #fff !important;
}

.status-badge.bg-danger i {
    color: #fff !important;
}

/* 計時器 */
.timer-display {
    font-size: 2.5rem;
    font-weight: bold;
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
    color: var(--zen-success);
}

/* 倒數計時區塊（確保圖示/文字與背景有足夠對比） */
.countdown-block {
    text-align: center;
}

.countdown-normal {
    background-color: var(--zen-warning-light);
}

.countdown-normal .countdown-icon {
    color: var(--zen-warning-dark);
}

.countdown-urgent {
    background-color: var(--zen-error-light);
}

.countdown-urgent .countdown-icon {
    color: var(--zen-error-dark);
}

.countdown-display {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--zen-warning-dark);
}

/* "可以簽到了！" 狀態 — 更醒目的成功色 */
.countdown-display.countdown-ready {
    color: var(--zen-success-dark);
    font-weight: 700;
}

/* 呼吸燈動畫 */
.pulse-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: currentColor;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

/* ============================================
   15. 統計卡片
   ============================================ */

.stats-card,
.stat-card {
    text-align: center;
    padding: 1.5rem;
    background: var(--zen-bg-primary);
    border-radius: var(--zen-radius-xl);
    border: 1px solid var(--zen-border);
}

.stats-card h3,
.stat-card-number {
    font-family: var(--zen-font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--zen-primary);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.stat-card-label {
    font-size: 0.875rem;
    color: var(--zen-text-secondary);
}

/* ============================================
   16. PWA 安裝提示
   ============================================ */

.pwa-install-banner {
    position: fixed;
    bottom: 80px;
    left: 1rem;
    right: 1rem;
    background: linear-gradient(135deg, var(--zen-primary) 0%, var(--zen-primary-600) 100%);
    color: #fff;
    padding: 1rem;
    border-radius: var(--zen-radius-xl);
    box-shadow: var(--zen-shadow-lg);
    z-index: 1040;
    border: 2px solid var(--zen-gold);
}

@media (min-width: 992px) {
    .pwa-install-banner {
        bottom: 2rem;
        left: auto;
        right: 2rem;
        max-width: 350px;
    }
}

/* ============================================
   17. 深色模式 - 禪意深夜版
   ============================================ */

[data-bs-theme="dark"] {
    /* 深色背景色系 - 禪意夜竹 */
    --zen-bg: #1A1F1A;
    --zen-bg-primary: #232823;
    --zen-bg-tertiary: #2D332D;

    /* 深色文字色系 */
    --zen-text: #E8E6E3;
    --zen-text-secondary: #A8A6A3;
    --zen-text-muted: #7A7875;

    /* 深色邊框色系 */
    --zen-border: #3A403A;
    --zen-border-medium: #4A504A;
    --zen-border-dark: #5A605A;

    /* Bootstrap 深色覆寫 */
    --bs-body-bg: var(--zen-bg);
    --bs-body-color: var(--zen-text);
    --bs-secondary-bg: var(--zen-bg-primary);
    --bs-tertiary-bg: var(--zen-bg-tertiary);
    --bs-border-color: var(--zen-border);

    /* 深色模式 primary 色調亮化（原 #2D5A27 在深色背景不可見） */
    --bs-primary: var(--zen-primary-300);
    --bs-primary-rgb: 129, 199, 132;
    --bs-info: #4FC3F7;
    --bs-info-rgb: 79, 195, 247;

    /* 深色陰影 */
    --zen-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --zen-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    --zen-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* 深色模式宣紙質感 */
[data-bs-theme="dark"] body::before {
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(212, 175, 55, 0.02) 2px,
            rgba(212, 175, 55, 0.02) 4px
        );
    opacity: 0.2;
}

/* 深色模式卡片 */
[data-bs-theme="dark"] .card {
    background-color: var(--zen-bg-primary);
    border-color: var(--zen-border);
}

[data-bs-theme="dark"] .card-header {
    background: linear-gradient(135deg, var(--zen-primary-700) 0%, var(--zen-primary-800) 100%);
    border-bottom-color: var(--zen-gold-600);
}

[data-bs-theme="dark"] .card-footer {
    background-color: var(--zen-bg-tertiary);
    border-color: var(--zen-border);
}

/* 深色模式表單 */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: var(--zen-bg-tertiary);
    border-color: var(--zen-border);
    color: var(--zen-text);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    border-color: var(--zen-primary-400);
    box-shadow: 0 0 0 3px rgba(102, 187, 106, 0.2);
}

/* 深色模式列表 */
[data-bs-theme="dark"] .list-group-item {
    background-color: var(--zen-bg-primary);
    border-color: var(--zen-border);
    color: var(--zen-text);
}

[data-bs-theme="dark"] .list-group-item-action:hover {
    background-color: var(--zen-bg-tertiary);
}

/* 深色模式底部導航 */
[data-bs-theme="dark"] .bottom-nav {
    background-color: var(--zen-bg-primary) !important;
    border-color: var(--zen-border) !important;
}

/* 深色模式「更多」面板 */
[data-bs-theme="dark"] #mobileMoreMenu {
    background-color: var(--zen-bg-primary);
    color: var(--zen-text);
}

[data-bs-theme="dark"] #mobileMoreMenu .list-group-item {
    background-color: transparent;
    color: var(--zen-text);
    border-color: var(--zen-border);
}

[data-bs-theme="dark"] #mobileMoreMenu .list-group-item:hover,
[data-bs-theme="dark"] #mobileMoreMenu .list-group-item:focus {
    background-color: var(--zen-bg-secondary);
}

[data-bs-theme="dark"] #mobileMoreMenu .offcanvas-header {
    border-color: var(--zen-border) !important;
}

/* 底部導航「更多」按鈕重置 */
.bottom-nav button.nav-link {
    cursor: pointer;
}

/* 深色模式下拉選單 */
[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--zen-bg-primary);
    border-color: var(--zen-border);
}

[data-bs-theme="dark"] .dropdown-item {
    color: var(--zen-text);
}

[data-bs-theme="dark"] .dropdown-item:hover {
    background-color: var(--zen-bg-tertiary);
}

/* 深色模式 Alert 背景色調整 */
[data-bs-theme="dark"] .alert-success {
    background-color: rgba(76, 175, 80, 0.15);
    border-color: var(--zen-success);
    color: #81C784;
}

[data-bs-theme="dark"] .alert-danger {
    background-color: rgba(229, 57, 53, 0.15);
    border-color: var(--zen-error);
    color: #EF5350;
}

[data-bs-theme="dark"] .alert-warning {
    background-color: rgba(255, 152, 0, 0.15);
    border-color: var(--zen-warning);
    color: #FFB74D;
}

[data-bs-theme="dark"] .alert-info {
    background-color: rgba(25, 118, 210, 0.15);
    border-color: var(--zen-info);
    color: #64B5F6;
}

/* 深色模式 Alert 關閉按鈕 */
[data-bs-theme="dark"] .alert .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
}

/* 深色模式 Modal */
[data-bs-theme="dark"] .modal-content {
    background-color: var(--zen-bg-primary);
    border-color: var(--zen-border);
}

[data-bs-theme="dark"] .modal-header {
    background: linear-gradient(135deg, var(--zen-primary-700) 0%, var(--zen-primary-800) 100%);
}

[data-bs-theme="dark"] .modal-footer {
    border-color: var(--zen-border);
}

/* 深色模式進度條 */
[data-bs-theme="dark"] .progress {
    background-color: var(--zen-bg-tertiary);
}

/* 深色模式狀態徽章 */
[data-bs-theme="dark"] .status-badge.serving {
    background-color: rgba(76, 175, 80, 0.2);
    color: #81C784;
}

[data-bs-theme="dark"] .status-badge.starting-soon {
    background-color: rgba(255, 152, 0, 0.2);
    color: #FFB74D;
}

[data-bs-theme="dark"] .status-badge.has-invitation {
    background-color: rgba(102, 187, 106, 0.2);
    color: #A5D6A7;
}

[data-bs-theme="dark"] .status-badge.has-task {
    background-color: rgba(25, 118, 210, 0.2);
    color: #64B5F6;
}

/* 深色模式計時器 */
[data-bs-theme="dark"] .timer-display {
    color: #81C784 !important;
}

/* 深色模式倒數計時區塊 */
[data-bs-theme="dark"] .countdown-normal {
    background-color: rgba(255, 152, 0, 0.15);
}

[data-bs-theme="dark"] .countdown-normal .countdown-icon {
    color: #FFB74D;
}

[data-bs-theme="dark"] .countdown-urgent {
    background-color: rgba(244, 67, 54, 0.15);
}

[data-bs-theme="dark"] .countdown-urgent .countdown-icon {
    color: #EF9A9A;
}

[data-bs-theme="dark"] .countdown-display {
    color: #FFD54F;
}

[data-bs-theme="dark"] .countdown-display.countdown-ready {
    color: #81C784;
}

/* 深色模式焦點卡片內 text-primary 圖示可見性（補強） */
[data-bs-theme="dark"] .focus-card .bg-light .text-primary {
    color: var(--zen-primary-300) !important;
}

/* 深色模式 bg-light */
[data-bs-theme="dark"] .bg-light {
    background-color: var(--zen-bg-tertiary) !important;
    color: var(--zen-text);
}

/* 深色模式 table-light（表格標頭） */
[data-bs-theme="dark"] .table-light {
    --bs-table-bg: var(--zen-bg-tertiary);
    --bs-table-color: var(--zen-text);
    --bs-table-border-color: var(--zen-border);
}

/* 深色模式 table-warning（表格高亮列） */
[data-bs-theme="dark"] .table-warning {
    --bs-table-bg: rgba(255, 193, 7, 0.15);
    --bs-table-color: var(--zen-text);
    --bs-table-border-color: var(--zen-border);
}

/* 深色模式 table-success（權限已授權列） */
[data-bs-theme="dark"] .table-success {
    --bs-table-bg: rgba(76, 175, 80, 0.15);
    --bs-table-color: var(--zen-text);
    --bs-table-border-color: var(--zen-border);
}

/* 深色模式 table-danger（移除/錯誤列） */
[data-bs-theme="dark"] .table-danger {
    --bs-table-bg: rgba(229, 57, 53, 0.15);
    --bs-table-color: var(--zen-text);
    --bs-table-border-color: var(--zen-border);
}

/* 深色模式 table-info */
[data-bs-theme="dark"] .table-info {
    --bs-table-bg: rgba(25, 118, 210, 0.15);
    --bs-table-color: var(--zen-text);
    --bs-table-border-color: var(--zen-border);
}

/* 深色模式問候區 */
[data-bs-theme="dark"] .greeting-section h2 {
    color: var(--zen-text);
}

/* 深色模式 Offcanvas */
[data-bs-theme="dark"] .offcanvas {
    background-color: var(--zen-bg-primary);
    border-color: var(--zen-border);
}

/* 深色模式開發登入卡片 */
[data-bs-theme="dark"] .dev-quick-login .card-header.bg-warning {
    background: linear-gradient(135deg, #705A00 0%, #8B7000 100%) !important;
    color: #FFF8E1 !important;
    border-bottom-color: var(--zen-gold-600);
}

[data-bs-theme="dark"] .dev-quick-login .card-header.bg-warning strong,
[data-bs-theme="dark"] .dev-quick-login .card-header.bg-warning i {
    color: #FFF8E1 !important;
}

[data-bs-theme="dark"] .dev-hint-card {
    background-color: var(--zen-bg-tertiary) !important;
    color: var(--zen-text);
}

[data-bs-theme="dark"] .dev-hint-card code {
    background-color: var(--zen-bg-primary);
    color: var(--zen-gold);
    padding: 0.2em 0.4em;
    border-radius: 4px;
}

/* 深色模式 text-muted 修正 */
[data-bs-theme="dark"] .text-muted {
    color: var(--zen-text-secondary) !important;
}

/* 深色模式 outline 按鈕修正 */
[data-bs-theme="dark"] .btn-outline-primary {
    color: var(--zen-primary-300);
    border-color: var(--zen-primary-300);
}

[data-bs-theme="dark"] .btn-outline-primary:hover {
    color: #fff;
    background-color: var(--zen-primary);
    border-color: var(--zen-primary);
}

[data-bs-theme="dark"] .btn-outline-success {
    color: #81C784;
    border-color: #81C784;
}

[data-bs-theme="dark"] .btn-outline-success:hover {
    color: #fff;
    background-color: var(--zen-success-dark);
    border-color: var(--zen-success-dark);
}

[data-bs-theme="dark"] .btn-outline-secondary {
    color: var(--zen-gray-400);
    border-color: var(--zen-gray-500);
}

[data-bs-theme="dark"] .btn-outline-secondary:hover {
    color: #fff;
    background-color: var(--zen-gray-600);
    border-color: var(--zen-gray-600);
}

/* 深色模式 btn-warning 文字確保可見（使用深色文字配亮色背景） */
[data-bs-theme="dark"] .btn-warning {
    color: #212529 !important;
    background-color: var(--zen-gold);
    border-color: var(--zen-gold);
}

[data-bs-theme="dark"] .btn-warning:hover,
[data-bs-theme="dark"] .btn-warning:focus {
    color: #212529 !important;
    background-color: #d4a84a;
    border-color: #c9a044;
}

/* 深色模式連結色修正 */
[data-bs-theme="dark"] a {
    color: var(--zen-primary-300);
}

[data-bs-theme="dark"] a:hover {
    color: var(--zen-primary-200);
}

/* 深色模式 Bootstrap 文字顏色工具類修正 */
[data-bs-theme="dark"] .text-primary {
    color: var(--zen-primary-300) !important;
}

[data-bs-theme="dark"] .text-success {
    color: #81C784 !important;
}

[data-bs-theme="dark"] .text-info {
    color: #4FC3F7 !important;
}

[data-bs-theme="dark"] .text-warning {
    color: #FFD54F !important;
}

[data-bs-theme="dark"] .text-danger {
    color: #EF5350 !important;
}

/* 深色模式卡片內圖示確保可見（無顏色類別時） */
[data-bs-theme="dark"] .card-body .bi:not([class*="text-"]),
[data-bs-theme="dark"] .focus-card .bi:not([class*="text-"]) {
    color: var(--zen-text-secondary);
}

/* 深色模式下 Bootstrap text-bg-* 背景色卡片標題文字保持白色 */
[data-bs-theme="dark"] .text-bg-primary,
[data-bs-theme="dark"] .text-bg-secondary,
[data-bs-theme="dark"] .text-bg-success,
[data-bs-theme="dark"] .text-bg-info,
[data-bs-theme="dark"] .text-bg-warning,
[data-bs-theme="dark"] .text-bg-danger {
    color: #fff !important;
}

/* 深色模式 text-dark 修正（避免黑色文字在深色背景不可見） */
[data-bs-theme="dark"] .text-dark {
    color: var(--zen-text) !important;
}

/* 深色模式簽到掃描結果文字修正 */
[data-bs-theme="dark"] .result-code {
    color: var(--zen-text-secondary) !important;
}

[data-bs-theme="dark"] .result-time {
    color: var(--zen-text-muted) !important;
}

/* 深色模式簽到結果圖示保持鮮明 */
[data-bs-theme="dark"] .result-success .result-icon {
    color: #81C784 !important;
}

[data-bs-theme="dark"] .result-error .result-icon {
    color: #EF5350 !important;
}

[data-bs-theme="dark"] .result-warning .result-icon {
    color: #FFB74D !important;
}

/* 深色模式點名卡片狀態修正 */
[data-bs-theme="dark"] .card-pending {
    border-color: #6c757d;
    background: var(--zen-bg-primary);
}

[data-bs-theme="dark"] .card-checked {
    border-color: #81C784;
    background: rgba(76, 175, 80, 0.15);
}

[data-bs-theme="dark"] .card-completed {
    border-color: #4FC3F7;
    background: rgba(13, 202, 240, 0.15);
}

[data-bs-theme="dark"] .card-leave {
    border-color: #FFD54F;
    background: rgba(255, 193, 7, 0.15);
}

[data-bs-theme="dark"] .card-absent {
    border-color: #EF5350;
    background: rgba(220, 53, 69, 0.15);
}

/* 深色模式掃描結果 Toast 修正 */
[data-bs-theme="dark"] .scan-result-toast.success {
    background: rgba(76, 175, 80, 0.2);
    color: #81C784;
}

[data-bs-theme="dark"] .scan-result-toast.error {
    background: rgba(220, 53, 69, 0.2);
    color: #EF5350;
}

[data-bs-theme="dark"] .scan-result-toast.warning {
    background: rgba(255, 193, 7, 0.2);
    color: #FFD54F;
}

/* 深色模式排班日曆 hover 修正 */
[data-bs-theme="dark"] .day-cell:hover {
    background-color: var(--zen-bg-tertiary);
}

/* 深色模式自訂紫色/橘色修正 */
[data-bs-theme="dark"] .text-purple {
    color: #B39DDB !important;
}

[data-bs-theme="dark"] .bg-orange {
    background-color: #E65100 !important;
}

[data-bs-theme="dark"] .bg-purple {
    background-color: #4A148C !important;
}

/* 深色模式組織架構樹狀圖 hover 修正 */
[data-bs-theme="dark"] .tree-toggle:hover {
    color: var(--zen-primary-300);
}

/* 深色模式 PWA 安裝橫幅修正 */
[data-bs-theme="dark"] #pwa-install-banner {
    background: var(--zen-bg-primary) !important;
    border: 1px solid var(--zen-border);
}

[data-bs-theme="dark"] .pwa-banner-text strong {
    color: var(--zen-text) !important;
}

[data-bs-theme="dark"] .pwa-banner-text span {
    color: var(--zen-text-secondary) !important;
}

[data-bs-theme="dark"] .pwa-btn-dismiss {
    color: var(--zen-text-muted) !important;
}

/* 深色模式 iOS 安裝指引修正 */
[data-bs-theme="dark"] .ios-guide-content {
    background: var(--zen-bg-primary) !important;
}

[data-bs-theme="dark"] .ios-guide-header h3 {
    color: var(--zen-text) !important;
}

[data-bs-theme="dark"] .ios-guide-close {
    color: var(--zen-text-muted) !important;
}

[data-bs-theme="dark"] .ios-step {
    border-bottom-color: var(--zen-border) !important;
}

/* 深色模式列印匯出頁面（僅螢幕預覽時適用） */
@media screen {
    [data-bs-theme="dark"] .info-section {
        background: var(--zen-bg-tertiary);
    }

    [data-bs-theme="dark"] .info-label {
        color: var(--zen-text-secondary);
    }

    [data-bs-theme="dark"] .info-value {
        color: #64B5F6;
    }
}

/* ============================================
   18. 大字模式 - 中老年友善
   ============================================ */

.large-text {
    font-size: 1.25rem;
}

.large-text h1, .large-text .h1 { font-size: 2.5rem; }
.large-text h2, .large-text .h2 { font-size: 2.25rem; }
.large-text h3, .large-text .h3 { font-size: 2rem; }
.large-text h4, .large-text .h4 { font-size: 1.75rem; }
.large-text h5, .large-text .h5 { font-size: 1.5rem; }
.large-text h6, .large-text .h6 { font-size: 1.25rem; }

/* 大字模式按鈕 */
.large-text .btn {
    font-size: 1.2rem;
    padding: 0.75rem 1.5rem;
    min-height: 56px;
    border-width: 3px;
}

.large-text .btn-sm {
    font-size: 1.1rem;
    padding: 0.5rem 1rem;
    min-height: 48px;
}

.large-text .btn-xs {
    font-size: 0.95rem;
    padding: 0.35rem 0.75rem;
    min-height: 38px;
}

.large-text .btn-lg {
    font-size: 1.4rem;
    padding: 1rem 2rem;
    min-height: 64px;
}

/* 大字模式表單 */
.large-text .form-control,
.large-text .form-select {
    font-size: 1.2rem;
    padding: 0.875rem 1.25rem;
    min-height: 56px;
    border-width: 3px;
}

.large-text .form-label {
    font-size: 1.1rem;
    font-weight: 600;
}

/* 大字模式徽章 */
.large-text .badge {
    font-size: 1rem;
    padding: 0.6em 1em;
}

/* 大字模式小字 */
.large-text .small,
.large-text small {
    font-size: 1rem;
}

/* 大字模式導航 */
.large-text .navbar .dropdown-menu {
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}

.large-text .nav-link {
    font-size: 1.1rem;
}

.large-text .bottom-nav .nav-link {
    font-size: 0.95rem;
}

.large-text .bottom-nav .nav-link i {
    font-size: 1.75rem;
}

/* 大字模式卡片 */
.large-text .card-body {
    padding: 1.5rem;
}

.large-text .card-header {
    padding: 1.25rem 1.5rem;
    font-size: 1.2rem;
}

/* 大字模式列表 */
.large-text .list-group-item {
    padding: 1rem 1.25rem;
    font-size: 1.1rem;
}

/* 大字模式 focus 狀態 - 更明顯 */
.large-text *:focus-visible {
    outline: 4px solid var(--zen-gold) !important;
    outline-offset: 3px !important;
}

.large-text .form-control:focus,
.large-text .form-select:focus {
    box-shadow: 0 0 0 5px rgba(45, 90, 39, 0.2);
    border-color: var(--zen-primary);
}

.large-text .btn:focus-visible {
    box-shadow: 0 0 0 5px rgba(45, 90, 39, 0.25);
}

/* 大字模式計時器 */
.large-text .timer-display {
    font-size: 3rem;
}

.large-text .countdown-display {
    font-size: 1.75rem;
}

/* SweetAlert2 Toast - 基礎防截斷 */
.swal2-popup.swal2-toast .swal2-title {
    white-space: normal;
    word-break: break-word;
    overflow: visible;
    text-overflow: unset;
}

/* 大字模式 SweetAlert2 Toast - 自動擴展寬度，不截斷文字 */
.large-text .swal2-popup.swal2-toast {
    max-width: min(90vw, 600px);
    width: auto;
    padding: 0.75rem 1rem;
}

.large-text .swal2-popup.swal2-toast .swal2-title {
    font-size: clamp(1rem, 1.3vw, 1.25rem);
    white-space: normal;
    word-break: break-word;
    overflow: visible;
    text-overflow: unset;
    max-width: none;
}

.large-text .swal2-popup.swal2-toast .swal2-icon {
    width: 1.75rem;
    height: 1.75rem;
    min-width: 1.75rem;
    margin: 0 0.5rem 0 0;
}

/* 大字模式焦點卡片 */
.large-text .focus-card {
    font-size: 1.25rem;
}

.large-text .focus-card h4 {
    font-size: 2rem;
}

.large-text .focus-card h5 {
    font-size: 1.75rem;
}

/* 大字模式：行動按鈕更大 */
.large-text .focus-action-btn {
    min-height: 64px;
    font-size: 1.3rem !important;
}

/* 大字模式：管理提示條 */
.large-text .management-alert-bar {
    font-size: 1.1rem;
}

/* ============================================
   19. 工具類別
   ============================================ */

/* 圖示大小 - 用於空狀態、提示圖示等 */
.icon-xl {
    font-size: 5rem;
    line-height: 1;
}

.icon-lg {
    font-size: 4rem;
    line-height: 1;
}

.icon-md {
    font-size: 3rem;
    line-height: 1;
}

/* 頭像佔位符 */
.avatar-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.avatar-lg {
    width: 80px;
    height: 80px;
    font-size: 2rem;
}

.avatar-md {
    width: 56px;
    height: 56px;
    font-size: 1.5rem;
}

.avatar-sm {
    width: 40px;
    height: 40px;
    font-size: 1rem;
}

/* 加大版開關 - 適合年長者使用 */
.form-switch-lg .form-check-input {
    width: 3em;
    height: 1.5em;
}

/* 可捲動容器 */
.scroll-container {
    overflow-y: auto;
}

.scroll-container-sm {
    max-height: 150px;
    overflow-y: auto;
}

.scroll-container-md {
    max-height: 300px;
    overflow-y: auto;
}

.scroll-container-lg {
    max-height: 450px;
    overflow-y: auto;
}

/* 進度條高度變體 */
.progress-xs {
    height: 4px;
}

.progress-sm {
    height: 6px;
}

/* 預設 .progress 已是 8px */

.progress-lg {
    height: 12px;
}

/* 禪意色彩工具類 */
.text-zen-primary { color: var(--zen-primary) !important; }
.text-zen-gold { color: var(--zen-gold) !important; }
.text-zen-success { color: var(--zen-success) !important; }
.text-zen-warning { color: var(--zen-warning) !important; }
.text-zen-error { color: var(--zen-error) !important; }

.bg-zen-primary { background-color: var(--zen-primary) !important; }
.bg-zen-gold { background-color: var(--zen-gold) !important; }
.bg-zen { background-color: var(--zen-bg) !important; }
.bg-zen-tertiary { background-color: var(--zen-bg-tertiary) !important; }

.border-zen { border-color: var(--zen-border) !important; }
.border-zen-gold { border-color: var(--zen-gold) !important; }

/* 統一優化 Bootstrap bg-opacity-10 與 subtle 類別的視覺對比 (常見於圖示圓圈、過濾卡片) */
.bg-primary.bg-opacity-10, .bg-primary-subtle { background-color: var(--zen-primary-50) !important; }
.bg-success.bg-opacity-10, .bg-success-subtle { background-color: var(--zen-success-light) !important; }
.bg-warning.bg-opacity-10, .bg-warning-subtle { background-color: var(--zen-warning-light) !important; }
.bg-danger.bg-opacity-10, .bg-danger-subtle   { background-color: var(--zen-error-light) !important; }
.bg-info.bg-opacity-10, .bg-info-subtle       { background-color: var(--zen-info-light) !important; }

/* 配合上述背景，強化文字/圖示色彩，避免「同色系過淡」問題 */
.bg-primary.bg-opacity-10 .text-primary, .bg-primary-subtle .text-primary { color: var(--zen-primary) !important; }
.bg-success.bg-opacity-10 .text-success, .bg-success-subtle .text-success { color: var(--zen-success-dark) !important; }
.bg-warning.bg-opacity-10 .text-warning, .bg-warning-subtle .text-warning { color: var(--zen-warning-dark) !important; }
.bg-danger.bg-opacity-10 .text-danger, .bg-danger-subtle .text-danger     { color: var(--zen-error-dark) !important; }
.bg-info.bg-opacity-10 .text-info, .bg-info-subtle .text-info             { color: var(--zen-info-dark) !important; }

/* 全域表格樣式調整 */
.table-light {
    --bs-table-bg: var(--zen-bg-tertiary) !important;
    --bs-table-color: var(--zen-text) !important;
    --bs-table-border-color: var(--zen-border) !important;
}

/* 深色模式：文字工具類亮化，確保深色背景上可讀 */
[data-bs-theme="dark"] .text-zen-primary { color: var(--zen-primary-300) !important; }

/* 軟色 Badge — 確保文字與淡色背景有足夠對比 */
.badge-soft-success {
    background-color: var(--zen-success-light);
    color: var(--zen-success-dark);
}

.badge-soft-primary {
    background-color: var(--zen-primary-100);
    color: var(--zen-primary-700);
}

.badge-soft-warning {
    background-color: var(--zen-warning-light);
    color: var(--zen-warning-dark);
}

.badge-soft-info {
    background-color: var(--zen-info-light);
    color: var(--zen-info-dark);
}

.badge-soft-danger {
    background-color: var(--zen-error-light);
    color: var(--zen-error-dark);
}

[data-bs-theme="dark"] .badge-soft-success {
    background-color: rgba(76, 175, 80, 0.2);
    color: #81C784;
}

[data-bs-theme="dark"] .badge-soft-primary {
    background-color: rgba(45, 90, 39, 0.2);
    color: #A5D6A7;
}

[data-bs-theme="dark"] .badge-soft-warning {
    background-color: rgba(255, 152, 0, 0.2);
    color: #FFB74D;
}

[data-bs-theme="dark"] .badge-soft-info {
    background-color: rgba(25, 118, 210, 0.2);
    color: #64B5F6;
}

[data-bs-theme="dark"] .badge-soft-danger {
    background-color: rgba(244, 67, 54, 0.2);
    color: #EF9A9A;
}

/* 深色模式 Bootstrap 實心 badge：改半透明底 + 亮字（行事曆等全站通用） */
[data-bs-theme="dark"] .badge.bg-info      { background-color: rgba(79, 195, 247, 0.2) !important; color: #4FC3F7 !important; }
[data-bs-theme="dark"] .badge.bg-success   { background-color: rgba(76, 175, 80, 0.2) !important;  color: #81C784 !important; }
[data-bs-theme="dark"] .badge.bg-warning   { background-color: rgba(255, 193, 7, 0.2) !important;  color: #FFD54F !important; }
[data-bs-theme="dark"] .badge.bg-secondary { background-color: rgba(158, 158, 158, 0.2) !important; color: #BDBDBD !important; }
[data-bs-theme="dark"] .badge.bg-primary   { background-color: rgba(45, 90, 39, 0.2) !important;   color: #A5D6A7 !important; }
[data-bs-theme="dark"] .badge.bg-danger    { background-color: rgba(244, 67, 54, 0.2) !important;  color: #EF9A9A !important; }

/* 行事曆「今天」格子：淺色用淡黃底，深色用微光邊框 */
.calendar-today {
    background-color: rgba(255, 193, 7, 0.15);
    border: 1.5px solid #ffc107;
}
[data-bs-theme="dark"] .calendar-today {
    background-color: rgba(255, 193, 7, 0.08);
    border-color: #FFD54F;
}

.shadow-zen-sm { box-shadow: var(--zen-shadow-sm) !important; }
.shadow-zen { box-shadow: var(--zen-shadow) !important; }
.shadow-zen-lg { box-shadow: var(--zen-shadow-lg) !important; }
.shadow-zen-gold { box-shadow: var(--zen-shadow-gold) !important; }

.rounded-zen { border-radius: var(--zen-radius) !important; }
.rounded-zen-lg { border-radius: var(--zen-radius-lg) !important; }
.rounded-zen-xl { border-radius: var(--zen-radius-xl) !important; }

/* ============================================
   20. 響應式調整
   ============================================ */

/* 桌機版 */
@media (min-width: 992px) {
    body {
        background-color: var(--zen-bg);
    }

    [data-bs-theme="light"] body {
        background-color: var(--zen-bg);
    }

    [data-bs-theme="dark"] body {
        background-color: #0F140F;
    }

    main {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem;
    }

    .card {
        border-radius: var(--zen-radius-xl);
    }

    /* 表格 Hover 禪意化 */
    .table-hover > tbody > tr:hover > * {
        background-color: rgba(45, 90, 39, 0.04) !important;
        color: var(--zen-primary-700) !important;
        box-shadow: inset 0 0 0 9999px rgba(45, 90, 39, 0.04) !important;
    }
}

/* 行動版 */
@media (max-width: 991.98px) {
    main {
        padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
    }

    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* 焦點卡片行動版高度縮減 */
    .focus-card {
        min-height: 40vh;
    }

    /* 大圖示行動版縮小 */
    .display-1 {
        font-size: 3.5rem;
    }

    /* 任務資訊標籤對齊 */
    .task-info-label {
        min-width: 5rem;
        flex-shrink: 0;
    }
}

/* 小螢幕 */
@media (max-width: 575.98px) {
    .form-control {
        font-size: 16px; /* 防止 iOS 縮放 */
    }

    .large-text .btn:not(.btn-sm) {
        width: 100%;
    }

    /* 焦點卡片小螢幕進一步縮減 */
    .focus-card {
        min-height: 35vh;
    }

    /* 計時器字體適配小螢幕 */
    .timer-display {
        font-size: 2rem;
    }

    /* 倒數計時字體適配 */
    .countdown-display {
        font-size: 1.25rem;
    }
}

/* ============================================
   21. 無障礙支援
   ============================================ */

/* 空狀態元件 */
.empty-state h5 { color: var(--zen-text-secondary); font-weight: 500; }

/* Skip-to-Content 連結 */
.skip-link:focus {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    padding: 1rem 1.5rem;
    background: var(--zen-primary);
    color: #fff;
    font-weight: 600;
}

*:focus-visible {
    outline: 3px solid var(--zen-gold);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (prefers-contrast: high) {
    .card,
    .btn,
    .form-control {
        border-width: 3px;
    }
}

/* ============================================
   22. 動畫效果
   ============================================ */

.fade-in {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 載入指示器 */
.loading-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--zen-primary-200);
    border-top-color: var(--zen-primary);
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   23. QR Code 掃描器
   ============================================ */

#qr-reader {
    background: #000;
}

#qr-reader video {
    border-radius: var(--zen-radius);
}

/* ============================================
   24. 列印樣式
   ============================================ */

@media print {
    body::before {
        display: none;
    }

    .navbar,
    .bottom-nav,
    .pwa-install-banner,
    .btn {
        display: none !important;
    }

    .card,
    .table {
        box-shadow: none;
        border: 1px solid #ccc;
    }

    .card-header {
        background: #f0f0f0 !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ============================================
   25. 登入頁面專用樣式
   ============================================ */

/* 登入表單輸入框 - 接近 Bootstrap 預設，僅微調 */
#loginForm .form-control {
    padding: 0.4rem 0.75rem;
}

#loginForm .input-group-text {
    padding: 0.4rem 0.75rem;
}

/* 深色模式登入表單樣式 */
[data-bs-theme="dark"] #loginForm .form-control,
[data-bs-theme="dark"] #loginForm .input-group-text {
    background-color: var(--zen-bg-tertiary);
    border-color: var(--zen-border);
    color: var(--zen-text);
}

[data-bs-theme="dark"] #loginForm .form-control::placeholder {
    color: var(--zen-text-muted);
}

[data-bs-theme="dark"] #loginForm .form-control:focus {
    background-color: var(--zen-bg-primary);
    border-color: var(--zen-primary-300);
    box-shadow: 0 0 0 0.25rem rgba(129, 199, 132, 0.25);
}

[data-bs-theme="dark"] .dev-quick-login .form-select {
    background-color: var(--zen-bg-tertiary);
    border-color: var(--zen-border);
    color: var(--zen-text);
}

/* ============================================
   26. Inline Style Extractions
   從 Razor Views 抽離的 inline style
   ============================================ */

/* --- Activities --- */
.activity-step-connector { width: 40px; height: 3px; }
.activity-progress-thick { height: 8px; }
.activity-progress-medium { height: 6px; }
.activity-progress-thin { height: 4px; }

/* --- Calendar --- */
.calendar-month-card {
    cursor: pointer;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.calendar-month-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.calendar-day-cell { height: 60px; padding: 0.25rem; }
.calendar-event-label { font-size: 10px; line-height: 1.2; }
.calendar-cell-height { height: 50px; }

/* --- Staffing Chart --- */
.staffing-bar-container {
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}
.staffing-bar {
    min-height: 5px;
    width: 80%;
    border-radius: 4px 4px 0 0;
    transition: height 0.3s ease-in-out;
}

/* --- Task --- */
.task-info-label { width: 100px; flex-shrink: 0; }

/* --- Dashboard / Shared Progress Bars --- */
.progress-thinner { height: 4px; }
.progress-thin { height: 6px; }
.progress-medium { height: 10px; }
.progress-thick { height: 20px; }
.progress-mini { width: 80px; height: 6px; }

/* --- Font Size Utilities --- */
.fs-xxs { font-size: 0.65rem !important; }
.fs-xs { font-size: 0.75rem !important; }
.fs-micro { font-size: 8px !important; }

/* --- Interactive --- */
.cursor-pointer { cursor: pointer; }

/* --- Dispatch --- */
.dispatch-volunteer-list { margin-bottom: 160px !important; }
.dispatch-item-selected { border-left: 4px solid var(--bs-primary); }
.checkbox-lg { width: 1.2em !important; height: 1.2em !important; }
.dispatch-selection-card { max-width: 600px; }
.dispatch-selected-names { max-width: 150px; }

/* --- Delegation --- */
/* (uses .cursor-pointer from shared utilities) */

/* --- CheckIn --- */
.checkin-header-spacer { width: 40px; }
.checkin-countdown-container { max-width: 280px; }
.checkin-progress-thin { height: 6px; }
.checkin-section-icon { font-size: 0.5rem; }

/* --- RollCall --- */
.rollcall-progress-bar { height: 8px; }
.rollcall-scanner-area { max-width: 400px; }
.rollcall-team-progress-thin { height: 4px; }
.rollcall-mobile-progress-thin { height: 4px; border-radius: 0; }
.rollcall-mobile-search-sticky { top: 73px; }
.rollcall-desktop-progress-compact { width: 120px; height: 8px; }
.rollcall-desktop-sidebar-sticky { top: 20px; }
.rollcall-recent-list-scrollable { max-height: 200px; overflow-y: auto; }
.rollcall-desktop-search-compact { max-width: 280px; }
.rollcall-batch-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1040;
}

/* --- Records --- */
.records-chart-container { position: relative; height: 200px; }
.records-legend-badge { width: 12px; height: 12px; }

/* --- Records/ExportPrint --- */
.export-no-print-link { text-decoration: none; display: inline-block; }
.export-empty-state { text-align: center; padding: 40px; color: #666; }
.export-empty-message { font-size: 14pt; }
.export-info-value-small { font-size: 12pt; }
.export-table-col-date { width: 100px; }
.export-table-col-time { width: 80px; }

/* --- Facilities --- */
.facilities-table-status-col { width: 40px; }
.facilities-table-actions-col { width: 120px; }
.facility-carousel-img { max-height: 200px; object-fit: cover; }
.facility-info-label-col { width: 80px; }

/* --- Logistics --- */
.logistics-progress { height: 8px; }

/* --- CoOrganizers --- */
.coorganizer-progress { height: 12px; }
.progress-inline-sm { width: 150px; display: inline-block; vertical-align: middle; }
.task-selector-scroll { max-height: 150px; overflow-y: auto; }
.coorganizer-label-col { width: 80px; }

/* --- Scroll Boxes --- */
.scroll-box-sm { max-height: 300px; overflow-y: auto; }
.scroll-box-md { max-height: 360px; overflow-y: auto; }
.scroll-box-lg { max-height: 400px; overflow-y: auto; }
.scroll-box-xl { max-height: 500px; overflow-y: auto; }

/* --- Layout (_Layout.cshtml) --- */
.layout-notification-dropdown { width: 320px; max-height: 400px; overflow-y: auto; }
.layout-mobile-notification-dropdown { width: 300px; max-height: 360px; overflow-y: auto; }
.layout-notification-badge-tiny { font-size: 0.6rem; }
.layout-dev-account-dropdown { min-width: 280px; max-height: 400px; overflow-y: auto; }

/* --- JS Toggle Classes --- */
.js-conditional-block { display: none; }
.js-conditional-block.active { display: block; }
.meal-date-section { display: none; }
.meal-date-section.active { display: block; }

/* --- Print --- */
@media print {
    .export-info-value-small { font-size: 11pt; }
    .export-empty-message { font-size: 13pt; }
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .calendar-event-label { font-size: 11px; }
    .staffing-bar-container { height: 100px; }
}

/* --- Person Input Panel --- */
.pip-checkbox-col {
    width: 36px;
    min-width: 36px;
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    .calendar-month-card,
    .staffing-bar { transition: none; }
}

/* ============================================
   Admin 導航列樣式
   ============================================ */

/* Admin 導航列始終深色背景 */
.admin-navbar,
.admin-mobile-header {
    background-color: #1a1a2e !important;
    background-image: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.admin-navbar .navbar-brand,
.admin-navbar .nav-link,
.admin-mobile-header h1 {
    color: rgba(255, 255, 255, 0.85) !important;
}

.admin-navbar .navbar-brand:hover,
.admin-navbar .nav-link:hover,
.admin-navbar .nav-link:focus {
    color: #fff;
}

.admin-navbar .nav-link.active {
    color: #fff;
    font-weight: 600;
}

/* Admin 導航列內 UserDisplayInfo 文字確保白色 */
.admin-navbar .user-display-info .user-name {
    color: rgba(255, 255, 255, 0.85);
}

.admin-navbar .user-display-info i {
    opacity: 0.85;
}

/* Admin 麵包屑深色模式 */
[data-bs-theme="dark"] .breadcrumb-item.active {
    color: var(--zen-text-secondary);
}

/* 大字模式 - 主站導航列調整（防止項目超出螢幕） */
.large-text .main-site-navbar .navbar-brand {
    font-size: 1rem;
    letter-spacing: 0;
}

.large-text .main-site-navbar .navbar-brand .bi {
    font-size: 1rem;
}

.large-text .main-site-navbar .nav-link {
    font-size: 1rem;
    padding: 0.5rem 0.5rem;
    margin: 0 1px;
}

.large-text .main-site-navbar .dropdown-item {
    font-size: 1rem;
    padding: 0.5rem 1rem;
}

/* 螢幕較窄時（lg ~ xl）進一步縮減間距 */
@media (min-width: 992px) and (max-width: 1199px) {
    .large-text .main-site-navbar .nav-link {
        font-size: 0.95rem;
        padding: 0.5rem 0.35rem;
        margin: 0;
    }

    .large-text .main-site-navbar .navbar-brand {
        font-size: 0.9rem;
    }
}

/* 大字模式 - Admin 導航列調整（防止折行） */
.large-text .admin-navbar .nav-link {
    font-size: 1rem;
    padding: 0.5rem 0.625rem;
}

.large-text .admin-navbar .navbar-brand {
    font-size: 1.05rem;
    padding-right: 0.5rem;
}

.large-text .admin-navbar .navbar-text {
    font-size: 0.95rem;
    padding: 0.5rem 0.375rem;
}

/* 大字模式 - Admin 表格內操作按鈕縮小（防止折行/溢出） */
.large-text .table .btn-sm,
.large-text .tree .btn-sm,
.large-text .accordion .btn-sm {
    font-size: 0.95rem;
    padding: 0.3rem 0.6rem;
    min-height: auto;
    border-width: 2px;
}

/* 深色模式 Select2（組織管理成員選擇器） */
[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--zen-bg-tertiary);
    border-color: var(--zen-border);
    color: var(--zen-text);
}

[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--zen-text);
}

[data-bs-theme="dark"] .select2-dropdown {
    background-color: var(--zen-bg-primary);
    border-color: var(--zen-border);
}

[data-bs-theme="dark"] .select2-search--dropdown .select2-search__field {
    background-color: var(--zen-bg-tertiary);
    border-color: var(--zen-border);
    color: var(--zen-text);
}

[data-bs-theme="dark"] .select2-results__option {
    color: var(--zen-text);
}

[data-bs-theme="dark"] .select2-results__option--highlighted[aria-selected] {
    background-color: var(--zen-primary);
    color: #fff;
}

[data-bs-theme="dark"] .select2-results__option--selected {
    background-color: var(--zen-bg-tertiary);
}

[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--zen-bg-tertiary);
    border-color: var(--zen-border);
    color: var(--zen-text);
}

/* ============================================
   行動版響應式輔助類別
   ============================================ */

/* 響應式字體大小 (md 斷點以上) */
@media (min-width: 768px) {
    .fs-md-1 { font-size: calc(1.375rem + 1.5vw) !important; }
    .fs-md-2 { font-size: calc(1.325rem + 0.9vw) !important; }
    .fs-md-3 { font-size: calc(1.3rem + 0.6vw) !important; }
    .fs-md-4 { font-size: calc(1.275rem + 0.3vw) !important; }
    .fs-md-5 { font-size: 1.25rem !important; }
    .fs-md-6 { font-size: 1rem !important; }
    .w-md-auto { width: auto !important; }
}

/* 行動版卡片與按鈕溢出防護 */
@media (max-width: 767.98px) {
    /* 確保卡片內容不溢出 */
    .card-body { overflow-wrap: break-word; word-wrap: break-word; }

    /* 確保 flex 容器內的長文字不撐開 */
    .flex-grow-1 { min-width: 0; }

    /* 防止按鈕文字過長超出 */
    .btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
}

/* ============================================
   WCAG 2.5.5 Target Size (Level AAA) — 觸控熱區 ≥ 44×44 CSS px
   年長使用者與觸控裝置友善設計。使用 :where() 壓低優先級，
   個別元件可以輕易覆寫。
   ============================================ */
@media (pointer: coarse), (max-width: 767.98px) {
    /* checkbox/radio 原生尺寸約 16px，以 padding 擴大觸控區域而不放大視覺 */
    :where(.form-check-input[type="checkbox"], .form-check-input[type="radio"]):not(.form-check-input-sm) {
        min-width: 1.25rem;
        min-height: 1.25rem;
        /* 外層 label 或 cell 的點擊區域，透過父元素 padding 保證 44×44 */
    }

    /* table cell 內的 checkbox/radio — 以 cell padding 擴張觸控熱區 */
    td:has(> .form-check-input[type="checkbox"]),
    td:has(> .form-check-input[type="radio"]) {
        padding: 0.75rem 0.5rem; /* 上下 12px + input 20px ≥ 44px */
        cursor: pointer;
    }

    /* 獨立 checkbox/radio 配合 label（非 Bootstrap form-check 包裝）*/
    .touch-target,
    label:has(> .form-check-input[type="checkbox"]),
    label:has(> .form-check-input[type="radio"]) {
        display: inline-flex;
        align-items: center;
        min-width: 44px;
        min-height: 44px;
        padding: 0.5rem;
        cursor: pointer;
    }
}

/* ============================================
   長者大字級模式 — [data-font-size] 屬性選擇器
   適用於登入 / 簽到 / 活動列表等高頻頁面，
   使用者在 Profile 選擇後由 cookie 持久化。
   ============================================ */
:root[data-font-size="large"] {
    font-size: 18px;
}

:root[data-font-size="x-large"] {
    font-size: 20px;
}

:root[data-font-size="xx-large"] {
    font-size: 24px;
}

:root[data-font-size="large"] .btn,
:root[data-font-size="x-large"] .btn,
:root[data-font-size="xx-large"] .btn {
    padding: 0.75rem 1.5rem;
    line-height: 1.4;
}

:root[data-font-size="large"] .form-control,
:root[data-font-size="x-large"] .form-control,
:root[data-font-size="xx-large"] .form-control {
    font-size: 1.05em;
    padding: 0.625rem 0.875rem;
}

/* ============================================
   Breadcrumb 麵包屑導覽
   WCAG 2.4.8 Location（AA）— 告知使用者目前位置
   ============================================ */
.breadcrumb-wrap {
    background-color: #fafafa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.breadcrumb-wrap .breadcrumb {
    --bs-breadcrumb-divider: '›';
    --bs-breadcrumb-divider-color: #adb5bd;
    font-size: 0.875rem;
}

.breadcrumb-wrap .breadcrumb-item a {
    color: var(--zen-primary, #6c757d);
    text-decoration: none;
    transition: color 0.15s ease;
}

.breadcrumb-wrap .breadcrumb-item a:hover,
.breadcrumb-wrap .breadcrumb-item a:focus {
    color: var(--zen-gold, #b8860b);
    text-decoration: underline;
}

.breadcrumb-wrap .breadcrumb-item.active {
    color: #495057;
    font-weight: 500;
}

/* ============================================
   字級切換器（header 下拉選單用）
   ============================================ */
.font-size-toggle .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.font-size-toggle .dropdown-item.active {
    background-color: rgba(184, 134, 11, 0.1);
    color: var(--zen-gold, #b8860b);
    font-weight: 600;
}

.font-size-toggle-sample-sm { font-size: 0.875rem; }
.font-size-toggle-sample-md { font-size: 1rem; }
.font-size-toggle-sample-lg { font-size: 1.125rem; }
.font-size-toggle-sample-xl { font-size: 1.25rem; }

/* ==========================================================================
   返回活動管理按鈕（全站一致的彩色返回鈕）
   ========================================================================== */
.btn-back-manage {
    background: linear-gradient(135deg, #5D7052 0%, #3F5038 100%);
    color: #FFFFFF !important;
    border: none;
    font-weight: 600;
    box-shadow: 0 3px 8px rgba(63, 80, 56, 0.2);
    transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s, color 0.2s;
}

.btn-back-manage:hover,
.btn-back-manage:focus,
.btn-back-manage:active {
    background: linear-gradient(135deg, #3F5038 0%, #2F3F28 100%);
    color: #FFFFFF !important;
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(63, 80, 56, 0.28);
}

.btn-back-manage i {
    color: #FFFFFF;
}

/* ============================================
   ASP.NET Core 客戶端驗證樣式
   ============================================ */
.field-validation-valid,
.validation-summary-valid {
    display: none;
}

.field-validation-error {
    color: var(--bs-danger);
    font-size: 0.875em;
}

.input-validation-error {
    border-color: var(--bs-danger) !important;
}

.validation-summary-errors ul {
    margin-bottom: 0;
    padding-left: 1.25rem;
}