/* =========================================================================
   mobile-site.css — Mobile-Site (EIP 行動版 PWA) 全站樣式
   <spec-ref id="F-M09" section="ALL"/>  行動版 UX Pattern 總覽
   <spec-ref id="F-M01" />（登入 / 裝置綁定） <spec-ref id="F-M02" />（首頁與選單）
   <last-sync>2026-08-10</last-sync>

   設計原則
   - Mobile-first：基準寬度 375px，於 430px / 576px 以上做漸進增強。
   - 主色 #14256A（深藍），與 _Layout.cshtml 的 <meta name="theme-color"> 一致。
   - Bootstrap 5.3 + Bootstrap Icons 由 CDN 提供，本檔僅補「行動版專用」樣式，
     以及 Bootstrap 5 已移除但本專案仍在使用的 `.badge-*` 舊式色票。
   - 版面：header 固定於頂、tab-nav 固定於底，body 兩端預留 padding，
     並支援 iOS safe-area（env(safe-area-inset-*)）。
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. 設計 Token
   ------------------------------------------------------------------------- */
:root {
    /* 品牌主色 */
    --brand-primary: #14256A;
    --brand-primary-dark: #0D1846;
    --brand-primary-light: #2C4093;
    --brand-primary-soft: #E8EBF5;
    --brand-primary-rgb: 20, 37, 106;

    /* 首頁歡迎橫幅底色。
       🔴 刻意獨立成 token，不直接用 --brand-primary：
       品牌主色在暗色模式會【變亮】（#14256A -> #3b82f6），
       而橫幅文字固定是白色，跟著品牌色走就會變成白字打在亮藍底上。
       橫幅需要的是「永遠夠暗」，與品牌色的明暗方向剛好相反，
       因此兩個主題各自明確定義，不共用。 */
    --home-banner-from: #14256A;
    --home-banner-to: #2C4093;

    /* 語意色（.mobile-status-legend-dot 直接引用 --accent-info） */
    --accent-info: #0B7285;
    --accent-success: #157347;
    --accent-danger: #C82333;
    --accent-warning: #E0A800;
    --accent-secondary: #6C757D;

    /* 表單類型色（簽核卡片左側色條 / 首頁卡片） */
    --type-leave: #2C7BE5;
    --type-overtime: #F6875F;
    --type-trip: #10998A;
    --type-clock: #8A63D2;
    --type-approval: #14256A;
    --type-clockin: #C2255C;

    /* 中性色 */
    --surface: #FFFFFF;
    --surface-alt: #F4F6FA;
    --border: #E2E6EF;
    --border-strong: #CBD2E0;
    --text: #1E2430;
    --text-muted: #6B7280;

    /* 尺寸 */
    --header-h: 52px;
    --tabbar-h: 58px;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    --shadow-md: 0 4px 12px rgba(16, 24, 40, .10);
    --shadow-lg: 0 8px 24px rgba(16, 24, 40, .16);

    /* safe-area 快捷 */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* -------------------------------------------------------------------------
   0.1 深色主題 Token（色階與 Common/EIPShared.UI/wwwroot/css/eip-theme.css
   完全對齊，維持跨站一致 — 桌面版 EIP-Site/InvSite 與手機版共用同一套色階）
   由 [data-theme="dark"] 切換，data-theme 由 eip-theme.js + eip_theme cookie
   （跨子網域共享）統一管理，見 _Layout.cshtml FOUC 防閃爍腳本。
   ------------------------------------------------------------------------- */
[data-theme="dark"] {
    /* 品牌主色（對齊 eip-theme.css 的 --eip-primary/--eip-accent） */
    --brand-primary: #3b82f6;
    --brand-primary-dark: #1e3a5f;
    --brand-primary-light: #60a5fa;
    --brand-primary-soft: #1e3a5f;
    --brand-primary-rgb: 59, 130, 246;

    /* 暗色橫幅：比亮色更深，白字對比度才夠。
       #16233f 上的白字約 13:1、#22345c 上約 9:1，皆遠高於 WCAG AA 的 4.5:1；
       若沿用暗色的 --brand-primary(#3b82f6)/--brand-primary-light(#60a5fa)
       則白字對比僅約 2.2:1，是這次回報「公司名稱在暗色系顯示不正常」的直接原因。 */
    --home-banner-from: #16233f;
    --home-banner-to: #22345c;

    /* 語意色（對齊 eip-theme.css 對應 btn-* 深色配色） */
    --accent-info: #38bdf8;
    --accent-success: #16a34a;
    --accent-danger: #dc2626;
    --accent-warning: #f59e0b;
    --accent-secondary: #64748b;

    /* 表單類型色：沿用相近色相並提高明度，維持在深色底上的可讀性
       （eip-theme.css 未定義此業務語意色，故依同一套明度邏輯換算） */
    --type-leave: #5b9bf0;
    --type-overtime: #f6875f;
    --type-trip: #34c3ae;
    --type-clock: #a78bfa;
    --type-approval: #60a5fa;
    --type-clockin: #f472b6;

    /* 中性色（對齊 eip-theme.css 的 --card-bg/--content-bg/--card-border/--text-primary/--text-muted） */
    --surface: #1e293b;
    --surface-alt: #0f172a;
    --border: #334155;
    --border-strong: #475569;
    --text: #e2e8f0;
    --text-muted: #94a3b8;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .32), 0 1px 3px rgba(0, 0, 0, .28);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .36);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, .48);
}

/* body 底色與捲動邊界色需獨立指定（不能只靠 --surface-alt，因為瀏覽器
   overscroll 回彈區會露出 <body> 原生背景色） */
[data-theme="dark"] body.mobile-body {
    background-color: var(--surface-alt);
    color-scheme: dark;
}

/* -------------------------------------------------------------------------
   1. 基礎版面：body / header / main / bottom tab nav
   ------------------------------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;
}

body.mobile-body {
    margin: 0;
    background-color: var(--surface-alt);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", "PingFang TC", "Microsoft JhengHei",
                 "Noto Sans TC", sans-serif;
    font-size: 15px;
    line-height: 1.55;
    /* header 固定 + 底部導覽固定，兩端預留空間 */
    padding-top: calc(var(--header-h) + var(--safe-top));
    padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom));
    overscroll-behavior-y: contain;
    -webkit-tap-highlight-color: rgba(var(--brand-primary-rgb), .08);
}

/* 沒有底部導覽（hideBottomNav）時仍保留一點喘息空間 */
body.mobile-body.mobile-no-tabnav {
    padding-bottom: calc(16px + var(--safe-bottom));
}

/* --- Header --------------------------------------------------------------- */
.mobile-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    height: calc(var(--header-h) + var(--safe-top));
    padding: var(--safe-top) 4px 0 4px;
    background: linear-gradient(180deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
    color: #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .10);
}

.mobile-header-left,
.mobile-header-right {
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
}

.mobile-header-title {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    font-size: 1.25rem;
    text-decoration: none;
    transition: background-color .15s ease;
}

.mobile-header-btn:hover,
.mobile-header-btn:focus,
.mobile-header-btn:active {
    color: #fff;
    background-color: rgba(255, 255, 255, .16);
}

/* --- Main ----------------------------------------------------------------- */
.mobile-main {
    display: block;
    min-height: calc(100vh - var(--header-h) - var(--tabbar-h));
}

.mobile-main > .container-fluid {
    max-width: 640px;
    margin-inline: auto;
}

/* --- Bottom tab nav ------------------------------------------------------- */
.mobile-tab-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    align-items: stretch;
    height: calc(var(--tabbar-h) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background-color: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 10px rgba(16, 24, 40, .06);
}

.mobile-tab-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 2px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: .72rem;
    font-weight: 500;
    transition: color .15s ease, background-color .15s ease;
}

.mobile-tab-item i {
    font-size: 1.32rem;
    line-height: 1;
}

.mobile-tab-item:hover,
.mobile-tab-item:focus {
    color: var(--brand-primary-light);
}

.mobile-tab-item:active {
    background-color: var(--surface-alt);
}

.mobile-tab-item.active {
    color: var(--brand-primary);
    font-weight: 700;
    position: relative;
}

.mobile-tab-item.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 22%;
    right: 22%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background-color: var(--brand-primary);
}

/* -------------------------------------------------------------------------
   2. Bootstrap 覆寫 / 補件
   ------------------------------------------------------------------------- */
/* 2.1 主色套用到 Bootstrap 5 元件（BS5 的 .btn-* 是編譯後的字面值，需明確覆寫） */
.btn-primary {
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary-dark);
    --bs-btn-hover-border-color: var(--brand-primary-dark);
    --bs-btn-active-bg: var(--brand-primary-dark);
    --bs-btn-active-border-color: var(--brand-primary-dark);
    --bs-btn-disabled-bg: var(--brand-primary);
    --bs-btn-disabled-border-color: var(--brand-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary);
    --bs-btn-hover-border-color: var(--brand-primary);
    --bs-btn-active-bg: var(--brand-primary);
    --bs-btn-active-border-color: var(--brand-primary);
    --bs-btn-disabled-color: var(--brand-primary);
    --bs-btn-disabled-border-color: var(--brand-primary);
}

a {
    color: var(--brand-primary);
}

a:hover {
    color: var(--brand-primary-light);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--brand-primary-light);
    box-shadow: 0 0 0 .2rem rgba(var(--brand-primary-rgb), .18);
}

.form-check-input:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

/* 2.2 iOS 防止 focus 自動放大：表單控制項最小 16px */
.form-control,
.form-select,
textarea,
input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="search"] {
    font-size: 16px;
}

.form-control,
.form-select {
    border-radius: var(--radius-sm);
    border-color: var(--border-strong);
    padding-block: .55rem;
}

.form-label {
    font-weight: 600;
    font-size: .875rem;
    color: var(--text);
    margin-bottom: .35rem;
}

/* 2.3 Bootstrap 4 風格 badge（BS5 已移除 .badge-*，但 PageModel 仍回傳這些 class） */
.badge {
    font-weight: 600;
    font-size: .75rem;
    padding: .35em .6em;
    border-radius: 999px;
}

.badge-primary   { background-color: var(--brand-primary); color: #fff; }
.badge-secondary { background-color: var(--accent-secondary); color: #fff; }
.badge-info      { background-color: var(--accent-info); color: #fff; }
.badge-success   { background-color: var(--accent-success); color: #fff; }
.badge-danger    { background-color: var(--accent-danger); color: #fff; }
.badge-warning   { background-color: var(--accent-warning); color: #1E2430; }
.badge-light     { background-color: var(--surface-alt); color: var(--text); }
.badge-dark      { background-color: #212529; color: #fff; }

/* 2.4 Approval/Detail 的 .alert-sm / .form-control-reject */
.alert {
    border-radius: var(--radius-sm);
}

.alert-sm {
    padding: .5rem .75rem;
    font-size: .8125rem;
}

.form-control-reject {
    border-left: 4px solid var(--accent-danger);
}

/* 2.5 Font Awesome 圖示 fallback
   各 Create.cshtml 與 Tempusdominus 設定使用 `far fa-calendar` / `fas fa-*` 等
   Font Awesome class，但 _Layout.cshtml 只載入 Bootstrap Icons。
   mobile-site.js 會在執行期把 fa-* 轉為對應的 bi-* class；此處再補一層
   佈局 fallback，確保就算 JS 未執行，圖示框也不會塌陷成 0 寬度。 */
.fa,
.fas,
.far,
.fal,
.fab {
    display: inline-block;
    min-width: 1em;
    text-align: center;
    font-style: normal;
}

/* -------------------------------------------------------------------------
   3. 登入 / 裝置綁定 / 切換公司（F-M01）
   ------------------------------------------------------------------------- */
.mobile-login-card {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 24px 20px 20px;
    margin-top: 8px;
}

.mobile-login-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 14px;
    border-radius: 20px;
    background: linear-gradient(145deg, var(--brand-primary-light) 0%, var(--brand-primary) 60%, var(--brand-primary-dark) 100%);
    box-shadow: var(--shadow-md);
}

.mobile-login-logo-text {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: .06em;
}

.mobile-login-title {
    font-size: 1.15rem;
    font-weight: 700;
    text-align: center;
    color: var(--brand-primary);
    margin-bottom: 18px;
}

.mobile-login-error,
.mobile-switch-error,
.mobile-clockin-error {
    font-size: .875rem;
}

.mobile-login-form .mobile-input {
    border-radius: var(--radius-sm);
}

.mobile-toggle-password {
    border-color: var(--border-strong);
    border-top-right-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
    min-width: 60px;
}

.mobile-toggle-password-icon {
    font-size: .875rem;
    font-weight: 600;
}

.mobile-login-remember .form-check-label {
    font-size: .9rem;
    color: var(--text-muted);
}

.mobile-login-submit {
    margin-top: 4px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    letter-spacing: .04em;
    min-height: 48px;
}

.mobile-login-submit-spinner {
    margin-left: 8px;
}

.mobile-login-footer {
    margin-top: 18px;
    text-align: center;
    border-top: 1px solid var(--border);
    padding-top: 14px;
}

.mobile-login-back-desktop {
    font-size: .875rem;
    color: var(--text-muted);
    text-decoration: none;
}

.mobile-login-back-desktop:hover {
    color: var(--brand-primary);
    text-decoration: underline;
}

/* 切換公司 */
.mobile-switch-title {
    color: var(--brand-primary);
    font-weight: 700;
}

.mobile-switch-company-item {
    border-color: var(--border);
    padding: 14px 12px;
    min-height: 52px;
    cursor: pointer;
}

.mobile-switch-company-item:first-child { border-top-left-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm); }
.mobile-switch-company-item:last-child  { border-bottom-left-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }

.mobile-switch-company-item:has(.mobile-switch-radio:checked) {
    background-color: var(--brand-primary-soft);
    border-color: var(--brand-primary-light);
}

.mobile-switch-radio {
    width: 1.15em;
    height: 1.15em;
    margin-top: 0;
    flex: 0 0 auto;
}

.mobile-switch-label {
    font-size: 1rem;
    font-weight: 500;
}

.mobile-switch-submit,
.mobile-switch-cancel {
    border-radius: var(--radius-sm);
    min-height: 48px;
    font-weight: 600;
}

/* -------------------------------------------------------------------------
   4. 首頁 / 更多（F-M02）
   ------------------------------------------------------------------------- */
.mobile-home-container {
    padding-bottom: 8px;
}

.mobile-home-userinfo {
    position: relative;
    background: linear-gradient(135deg, var(--home-banner-from) 0%, var(--home-banner-to) 100%);
    color: #fff;
    border-radius: var(--radius);
    padding: 16px 18px;
    box-shadow: var(--shadow-md);
}

.mobile-home-welcome-label {
    font-size: .78rem;
    opacity: .82;
    letter-spacing: .06em;
}

.mobile-home-username {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
}

.mobile-home-company {
    font-size: .85rem;
    opacity: .92;
    margin-top: 2px;
}

/* 多公司時公司名整條可點 → /Account/SwitchCompany?returnUrl=/
   （使用者需求 2026-08-28：高層需頻繁跨公司切換，首頁要能一步到達）
   做成有邊框的膠囊而非底線小字，熱區 >=44px，並明示「切換」二字。 */
.mobile-home-company-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 12px;
    min-height: 44px;
    max-width: 100%;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 999px;
    background-color: rgba(255, 255, 255, .14);
    color: #fff;
    text-decoration: none;
    opacity: 1;
}

.mobile-home-company-switch:hover,
.mobile-home-company-switch:focus,
.mobile-home-company-switch:active {
    color: #fff;
    text-decoration: none;
    background-color: rgba(255, 255, 255, .26);
}

.mobile-home-company-switch .bi-building {
    flex: 0 0 auto;
    font-size: .95rem;
    line-height: 1;
}

.mobile-home-company-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.mobile-home-company-action {
    flex: 0 0 auto;
    padding-left: 8px;
    margin-left: 2px;
    border-left: 1px solid rgba(255, 255, 255, .35);
    font-size: .8rem;
    opacity: .95;
}

.mobile-home-company-switch .bi-chevron-right {
    flex: 0 0 auto;
    font-size: .78rem;
    line-height: 1;
    opacity: .9;
}

.mobile-home-section {
    margin-top: 18px;
}

.mobile-home-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.mobile-home-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 108px;
    padding: 16px 10px;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    color: var(--text);
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.mobile-home-card:active {
    transform: scale(.975);
    box-shadow: var(--shadow-sm);
    border-color: var(--brand-primary-light);
}

.mobile-home-card-body {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-home-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background-color: var(--brand-primary-soft);
    color: var(--brand-primary);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
}

.mobile-home-card-title {
    font-size: .9rem;
    font-weight: 600;
    text-align: center;
    color: var(--text);
    line-height: 1.3;
}

/* 各功能配色（CssClass = "mobile-home-card-" + featureKey，見 MobileMenuService） */
.mobile-home-card-leave           .mobile-home-card-icon { background-color: rgba(44, 123, 229, .14); color: var(--type-leave); }
.mobile-home-card-overtime        .mobile-home-card-icon { background-color: rgba(246, 135, 95, .16);  color: #C7521F; }
.mobile-home-card-trip            .mobile-home-card-icon { background-color: rgba(16, 153, 138, .14);  color: var(--type-trip); }
.mobile-home-card-clock           .mobile-home-card-icon { background-color: rgba(138, 99, 210, .14);  color: var(--type-clock); }
.mobile-home-card-approval        .mobile-home-card-icon { background-color: rgba(var(--brand-primary-rgb), .12); color: var(--brand-primary); }
.mobile-home-card-clockin-self    .mobile-home-card-icon { background-color: rgba(194, 37, 92, .12);   color: var(--type-clockin); }
.mobile-home-card-clockin-history .mobile-home-card-icon { background-color: rgba(107, 114, 128, .14); color: #495057; }
.mobile-home-card-item            .mobile-home-card-icon { background-color: var(--surface-alt);       color: var(--text-muted); }

/* F016/F018/F017 個人查詢群組（Mobile-Site sys_menu「個人查詢」） */
.mobile-home-card-personal-attendance .mobile-home-card-icon { background-color: rgba(11, 114, 133, .14);  color: var(--accent-info); }
.mobile-home-card-personal-shift      .mobile-home-card-icon { background-color: rgba(16, 153, 138, .14);  color: var(--type-trip); }
.mobile-home-card-personal-info       .mobile-home-card-icon { background-color: rgba(138, 99, 210, .14);  color: var(--type-clock); }

/* 未讀 / 待辦數字 badge */
.mobile-home-card-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background-color: var(--accent-danger);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--surface);
}

/* 待簽核（橫式大卡） */
.mobile-home-card-approval {
    flex-direction: row;
    min-height: 84px;
    padding: 14px 16px;
    align-items: stretch;
}

.mobile-home-card-approval-body {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
}

.mobile-home-card-approval-icon {
    flex: 0 0 auto;
}

.mobile-home-card-approval-info {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.mobile-home-card-approval-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--brand-primary);
}

.mobile-home-card-approval-subtitle {
    font-size: .78rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.mobile-home-card-approval-badge {
    flex: 0 0 auto;
    align-self: center;
    min-width: 28px;
    height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    background-color: var(--accent-danger);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    line-height: 28px;
    text-align: center;
}

/* -------------------------------------------------------------------------
   4.1 首頁 L1 手風琴折疊分組與 L2 卡片群
   ------------------------------------------------------------------------- */
.mobile-home-l1-group {
    margin-top: 14px;
}

.mobile-home-l1-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: var(--radius, 10px);
    border: 1px solid var(--border);
    background-color: var(--surface-alt, #f8fafc);
    color: var(--text);
    cursor: pointer;
    font-weight: 600;
    text-align: left;
    margin-bottom: 10px;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
    box-shadow: var(--shadow-sm);
}

.mobile-home-l1-header:hover {
    background-color: var(--surface);
    border-color: var(--brand-primary-light, #93c5fd);
}

.mobile-home-l1-header:active {
    transform: scale(.99);
}

.mobile-home-l1-header.expanded {
    border-color: rgba(var(--brand-primary-rgb, 20, 37, 106), 0.35);
    background-color: var(--surface);
}

.mobile-home-l1-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

.mobile-home-l1-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    line-height: 1;
    flex: 0 0 auto;
}

.mobile-home-l1-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-home-l1-badge {
    font-size: .75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background-color: var(--border, #e2e8f0);
    color: var(--text-muted, #64748b);
    flex: 0 0 auto;
}

.mobile-home-l1-chevron {
    font-size: .85rem;
    color: var(--text-muted);
    flex: 0 0 auto;
    margin-left: 8px;
    transition: transform .2s ease, color .15s ease;
}

.mobile-home-l1-header:not(.expanded) .mobile-home-l1-chevron {
    transform: rotate(-90deg);
}

.mobile-home-l1-header.expanded .mobile-home-l1-chevron {
    transform: rotate(0deg);
}

.mobile-home-l2-full-card {
    grid-column: 1 / -1;
}

/* -------------------------------------------------------------------------
   5. 表單 Pattern（FR001 Chip / FR002 Picker / FR003 條件顯示 / FR004 時數）
   ------------------------------------------------------------------------- */
.mobile-form {
    padding-bottom: 8px;
}

.mobile-form-section {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 14px 14px 6px;
    margin-bottom: 14px;
}

.mobile-section-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--brand-primary);
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.mobile-input {
    border-radius: var(--radius-sm);
}

/* FR001 Chip 按鈕群組 —— 各頁以 .btn.btn-outline-primary 動態生成，
   選中時切換為 .btn-primary.active。此處補行動版尺寸與觸控體驗。 */
.leave-category-chips,
.overtime-type-chips,
.trip-transport-chips,
.clock-period-chips,
[data-testid^="chip-group-"] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

[data-testid^="chip-group-"] > .btn,
.leave-category-chips > .btn,
.overtime-type-chips > .btn,
.trip-transport-chips > .btn,
.clock-period-chips > .btn {
    border-radius: 999px;
    padding: .45rem 1rem;
    font-size: .9rem;
    font-weight: 600;
    min-height: 40px;
    white-space: nowrap;
}

[data-testid^="chip-group-"] > .btn.active,
.leave-category-chips > .btn.active,
.overtime-type-chips > .btn.active,
.trip-transport-chips > .btn.active,
.clock-period-chips > .btn.active {
    box-shadow: 0 2px 6px rgba(var(--brand-primary-rgb), .28);
}

/* FR002 Tempusdominus：input-group 圓角 + 觸發圖示 */
.input-group.date .form-control {
    border-top-left-radius: var(--radius-sm);
    border-bottom-left-radius: var(--radius-sm);
    background-color: var(--surface);
}

.input-group .input-group-text {
    background-color: var(--surface-alt);
    border-color: var(--border-strong);
    color: var(--brand-primary);
    border-top-right-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
    min-width: 46px;
    justify-content: center;
    cursor: pointer;
}

/* readonly 的 picker input 不要看起來像 disabled */
.datetimepicker-input[readonly] {
    background-color: var(--surface);
    cursor: pointer;
}

/* Tempusdominus 浮層在窄螢幕不要溢出 */
.bootstrap-datetimepicker-widget {
    max-width: calc(100vw - 24px);
    font-size: .95rem;
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td span.active {
    background-color: var(--brand-primary) !important;
    color: #fff !important;
}

/* FR004 時數預覽 */
#leaveHoursPreview,
#overtimeHoursPreview,
[data-testid^="display-"][data-testid$="-hours"] {
    color: var(--brand-primary);
    font-size: 1.1rem;
}

/* FR003 條件顯示區塊（由 JS 切換 display） */
.mobile-form-section[data-testid$="-section"] {
    border-left: 3px solid var(--brand-primary-light);
}

/* 表單操作列 */
.mobile-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0 8px;
}

.mobile-form-actions .btn,
.mobile-form-actions .mobile-btn {
    flex: 1 1 auto;
    min-height: 46px;
    border-radius: var(--radius-sm);
    font-weight: 600;
}

.mobile-btn {
    min-height: 44px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.mobile-btn-success  { --bs-btn-bg: var(--accent-success); --bs-btn-border-color: var(--accent-success); }
.mobile-btn-danger   { --bs-btn-bg: var(--accent-danger);  --bs-btn-border-color: var(--accent-danger); }
.mobile-btn-secondary { font-weight: 500; }

/* -------------------------------------------------------------------------
   6. FR005 附件上傳 / 預覽 / 燈箱
   ------------------------------------------------------------------------- */
.mobile-attachment-area {
    padding-bottom: 8px;
}

.mobile-attachment-file-input {
    display: none;
}

.mobile-attachment-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    background-color: var(--brand-primary-soft);
    border: 1px dashed var(--brand-primary-light);
    border-radius: var(--radius-sm);
    color: var(--brand-primary);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease;
}

.mobile-attachment-add-btn:hover,
.mobile-attachment-add-btn:active {
    background-color: #DBE1F1;
}

.mobile-attachment-add-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.mobile-attachment-add-btn i {
    font-size: 1.1rem;
}

/* 預覽清單（Create.cshtml inline JS 與 mobile-attachment-upload.js 共用） */
.mobile-attachment-preview-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.mobile-attachment-preview-list:empty {
    margin-top: 0;
}

.mobile-attachment-preview-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 40px 8px 8px;
    background-color: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.mobile-attachment-preview-thumb {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border-strong);
    background-color: #fff;
    cursor: zoom-in;
}

.mobile-attachment-preview-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 6px;
    background-color: #fff;
    border: 1px solid var(--border-strong);
    color: var(--brand-primary);
    font-size: 1.25rem;
}

.mobile-attachment-preview-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .85rem;
    color: var(--text);
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.mobile-attachment-preview-remove {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: rgba(200, 35, 51, .10);
    color: var(--accent-danger);
    font-size: .8rem;
    cursor: pointer;
}

.mobile-attachment-preview-remove:active {
    background-color: rgba(200, 35, 51, .22);
}

/* 上傳中狀態 */
.mobile-attachment-preview-item.is-uploading {
    opacity: .7;
}

.mobile-attachment-preview-item.is-error {
    border-color: var(--accent-danger);
    background-color: rgba(200, 35, 51, .06);
}

.mobile-attachment-progress {
    position: absolute;
    left: 8px;
    right: 40px;
    bottom: 4px;
    height: 3px;
    border-radius: 2px;
    background-color: var(--border);
    overflow: hidden;
}

.mobile-attachment-progress > span {
    display: block;
    height: 100%;
    width: 0;
    background-color: var(--brand-primary);
    transition: width .2s ease;
}

/* 詳情頁既有附件清單 */
.mobile-attachment-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-attachment-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background-color: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
    min-height: 46px;
}

.mobile-attachment-item:active {
    background-color: #E9EDF6;
}

.mobile-attachment-icon {
    flex: 0 0 auto;
    color: var(--brand-primary);
    font-size: 1.05rem;
}

.mobile-attachment-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .875rem;
    word-break: break-all;
}

/* 圖片燈箱（_Layout.cshtml #imageLightboxModal） */
#imageLightboxModal .modal-content {
    background-color: rgba(15, 18, 25, .96);
}

#imageLightboxModal .modal-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
}

#imageLightboxModal #lightboxImage {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    margin-inline: auto;
}

#imageLightboxModal .btn-close {
    opacity: .9;
}

/* -------------------------------------------------------------------------
   7. FR006 卡片式清單 / FR007 狀態篩選 Tabs / FR014 分頁
   ------------------------------------------------------------------------- */
.mobile-list-toolbar {
    margin-bottom: 12px;
}

.mobile-filter-bar {
    margin-bottom: 12px;
}

.mobile-filter-bar .form-select {
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    box-shadow: var(--shadow-sm);
}

.mobile-filter-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 2px 0 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.mobile-filter-tabs::-webkit-scrollbar {
    display: none;
}

.mobile-filter-tab {
    flex: 0 0 auto;
    padding: .38rem .9rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background-color: var(--surface);
    color: var(--text-muted);
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
    min-height: 36px;
    cursor: pointer;
    transition: all .15s ease;
}

.mobile-filter-tab:active {
    transform: scale(.96);
}

.mobile-filter-tab.active {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
    box-shadow: 0 2px 6px rgba(var(--brand-primary-rgb), .26);
}

/* ClockIn/History 的查詢區 */
.mobile-clockin-history-filter,
.mobile-filter-form {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.mobile-clockin-history-filter {
    padding: 12px 12px 2px;
    margin-bottom: 14px;
}

.mobile-clockin-history-filter .mobile-filter-form {
    border: none;
    box-shadow: none;
    background: transparent;
}

.mobile-clockin-history-filter label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: .25rem;
}

.mobile-filter-actions {
    display: flex;
    gap: 8px;
    padding-bottom: 12px;
}

.mobile-filter-actions .btn {
    flex: 1 1 0;
    min-height: 42px;
    border-radius: var(--radius-sm);
    font-weight: 600;
}

/* 卡片清單 */
.mobile-card-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mobile-card {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 12px 12px 12px 14px;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    color: var(--text);
    text-decoration: none;
    overflow: hidden;
    transition: transform .12s ease, box-shadow .12s ease;
}

a.mobile-card:hover {
    color: var(--text);
    box-shadow: var(--shadow-md);
}

a.mobile-card:active,
.mobile-card.mobile-card-active {
    transform: scale(.985);
    background-color: var(--surface-alt);
}

/* 左側表單類型色條（TypeColorClass，見 ApprovalPendingModel.MapTypeColorClass） */
.mobile-card-type-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: var(--border-strong);
}

.mobile-card-leave    .mobile-card-type-bar { background-color: var(--type-leave); }
.mobile-card-overtime .mobile-card-type-bar { background-color: var(--type-overtime); }
.mobile-card-trip     .mobile-card-type-bar { background-color: var(--type-trip); }
.mobile-card-clock    .mobile-card-type-bar { background-color: var(--type-clock); }

.mobile-card-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mobile-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.mobile-card-header-left,
.mobile-card-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.mobile-card-form-type {
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-muted);
    background-color: var(--surface-alt);
    border-radius: 6px;
    padding: 1px 7px;
    white-space: nowrap;
}

.mobile-card-attachment-icon {
    color: var(--text-muted);
    font-size: .9rem;
}

.mobile-card-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mobile-card-title {
    font-size: .95rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

.mobile-card-meta,
.mobile-card-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    font-size: .78rem;
    color: var(--text-muted);
}

.mobile-card-meta-row-secondary {
    font-size: .74rem;
}

/* <ai-modify-intention>
   <type>UI_STYLE_CHANGE</type>
   <reason>表單編號是主管與員工溝通時最常用的對照依據，原本沿用 mobile-card-meta-row-secondary
   （.74rem、muted 灰字）過於不明顯，使用者反映「需要明顯一點」。改為獨立樣式：加粗、
   等寬字型（利於辨識易混淆字元）、使用強調色。於 PLAN-UAT-SPRINT-001 Track D-2
   教練式帶驗 P06（Mobile 請假清單）發現。</reason>
   <impact>新增 .mobile-card-formno class；供 Leave/My.cshtml 等清單卡片使用。</impact>
   <review-required>false</review-required>
   <date>2026-08-14</date>
   </ai-modify-intention> */
.mobile-card-formno {
    font-size: .82rem;
    font-weight: 700;
    font-family: 'Consolas', 'Menlo', 'Courier New', monospace;
    /* 亮色系用藍字、暗色系用黃字，各自在該主題背景下對比最清楚 */
    color: #14256A;
    letter-spacing: .02em;
}

[data-theme="dark"] .mobile-card-formno {
    color: #FFC107;
}

.mobile-card-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.mobile-card-meta-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 44vw;
}

.mobile-card-stage-label {
    font-weight: 600;
    color: var(--brand-primary);
}

.mobile-card-date,
.mobile-card-date-label,
.mobile-card-source {
    font-size: .78rem;
    color: var(--text-muted);
}

.mobile-card-remarks {
    font-size: .78rem;
    color: var(--text-muted);
    background-color: var(--surface-alt);
    border-radius: 6px;
    padding: 5px 8px;
    margin-top: 4px;
    word-break: break-word;
}

.mobile-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px dashed var(--border);
}

.mobile-card-arrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    color: var(--border-strong);
    font-size: 1.05rem;
}

/* ClockIn/History 卡片為 <div>（非連結），改為直向排列 */
.mobile-clockin-history-card {
    flex-direction: column;
    gap: 6px;
}

.mobile-clockin-location-label {
    font-size: .78rem;
    color: var(--text-muted);
    background-color: var(--surface-alt);
    border-radius: 6px;
    padding: 1px 8px;
}

/* 分頁 */
.mobile-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    padding: 10px 4px calc(8px + var(--safe-bottom));
    flex-wrap: wrap;
}

.mobile-page-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: .4rem 1rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background-color: var(--surface);
    color: var(--brand-primary);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
}

.mobile-page-link:active {
    background-color: var(--brand-primary-soft);
}

.mobile-page-info {
    flex: 1 1 auto;
    text-align: center;
    font-size: .8rem;
    color: var(--text-muted);
}

.mobile-pagination-enhanced {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.mobile-load-more,
.mobile-load-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 44px;
    border-radius: var(--radius-sm);
    font-weight: 600;
}

/* -------------------------------------------------------------------------
   8. FR010 空狀態
   ------------------------------------------------------------------------- */
.mobile-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 44px 20px;
    text-align: center;
    color: var(--text-muted);
    background-color: var(--surface);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    animation: fadeIn .3s ease-in;
}

.mobile-empty-icon {
    font-size: 2.6rem;
    line-height: 1;
    color: var(--border-strong);
    margin-bottom: 4px;
}

.mobile-empty-text {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
}

.mobile-empty-hint {
    font-size: .82rem;
    color: var(--text-muted);
    max-width: 26em;
}

.mobile-empty-action {
    margin-top: 12px;
    border-radius: 999px;
    min-height: 38px;
    font-weight: 600;
}

.mobile-empty-state-enhanced {
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-alt) 100%);
}

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

/* -------------------------------------------------------------------------
   9. 詳情頁：狀態列 / 明細列 / 稽核卡 / FR009 Timeline / FR013 底部操作區
   ------------------------------------------------------------------------- */
.mobile-detail-status-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.mobile-detail-status-bar .badge {
    font-size: .82rem;
    padding: .45em .85em;
}

.mobile-attendance-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .82rem;
    padding: .6rem .75rem;
    margin-bottom: 12px;
}

.mobile-detail-section {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 12px 14px;
    margin-bottom: 12px;
}

.mobile-detail-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}

.mobile-detail-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.mobile-detail-label {
    flex: 0 0 6.5em;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-muted);
}

.mobile-detail-value {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .9rem;
    color: var(--text);
    word-break: break-word;
    text-align: right;
}

/* 狀態說明區 */
.mobile-status-legend {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent-info);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 12px 14px;
    margin-bottom: 12px;
}

.mobile-status-legend-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--brand-primary);
    margin-bottom: 6px;
}

.mobile-status-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    color: var(--text-muted);
    padding: 2px 0;
}

.mobile-status-legend-current {
    color: var(--text);
    font-weight: 600;
}

.mobile-status-legend-dot {
    flex: 0 0 auto;
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--accent-info);
}

/* 稽核資訊卡 */
.mobile-audit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
}

.mobile-audit-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background-color: var(--surface-alt);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    min-width: 0;
}

.mobile-audit-label {
    font-size: .72rem;
    color: var(--text-muted);
}

.mobile-audit-value {
    font-size: .82rem;
    font-weight: 600;
    color: var(--text);
    word-break: break-word;
}

/* FR009 Timeline */
.mobile-timeline {
    position: relative;
    padding-left: 22px;
}

.mobile-timeline::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background-color: var(--border);
}

.mobile-timeline-item {
    position: relative;
    padding: 10px 12px;
    margin-bottom: 10px;
    background-color: var(--surface-alt);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--border-strong);
}

.mobile-timeline-item:last-child {
    margin-bottom: 0;
}

.mobile-timeline-item::before {
    content: "";
    position: absolute;
    left: -21px;
    top: 16px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--surface);
    border: 3px solid var(--border-strong);
}

/* StageColorClass（見 ApprovalReviewHistoryVm） */
.mobile-timeline-item.timeline-stage-1  { border-left-color: var(--type-leave); }
.mobile-timeline-item.timeline-stage-1::before  { border-color: var(--type-leave); }
.mobile-timeline-item.timeline-stage-2  { border-left-color: var(--type-trip); }
.mobile-timeline-item.timeline-stage-2::before  { border-color: var(--type-trip); }
.mobile-timeline-item.timeline-stage-3  { border-left-color: var(--type-clock); }
.mobile-timeline-item.timeline-stage-3::before  { border-color: var(--type-clock); }
.mobile-timeline-item.timeline-approved { border-left-color: var(--accent-success); }
.mobile-timeline-item.timeline-approved::before { border-color: var(--accent-success); }
.mobile-timeline-item.timeline-rejected { border-left-color: var(--accent-danger); }
.mobile-timeline-item.timeline-rejected::before { border-color: var(--accent-danger); }
.mobile-timeline-item.timeline-pending  { border-left-color: var(--accent-warning); }
.mobile-timeline-item.timeline-pending::before  { border-color: var(--accent-warning); }

.mobile-timeline-stage {
    font-size: .8rem;
    font-weight: 700;
    color: var(--brand-primary);
}

.mobile-timeline-reviewer {
    font-size: .9rem;
    font-weight: 600;
    color: var(--text);
}

.mobile-timeline-action {
    font-size: .82rem;
    color: var(--text-muted);
}

.mobile-timeline-time {
    font-size: .74rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* 簽核意見（駁回原因／核准備註），PLAN-UAT-SPRINT-001 Track D-2 教練式帶驗要求 */
.mobile-timeline-memo {
    font-size: .78rem;
    color: var(--text);
    margin-top: 2px;
    padding: 4px 8px;
    background: var(--surface-2, rgba(0,0,0,.04));
    border-radius: 4px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* FR013 底部固定操作區 */
.mobile-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 0 4px;
}

.mobile-detail-actions .btn,
.mobile-detail-actions form {
    flex: 1 1 auto;
}

.mobile-detail-actions form .btn {
    width: 100%;
}

.mobile-detail-actions-enhanced {
    position: fixed;
    left: 0;
    right: 0;
    /* 疊在底部導覽列「之上」，不遮住 tab nav */
    bottom: calc(var(--tabbar-h) + var(--safe-bottom));
    z-index: 1035;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    max-width: 640px;
    margin-inline: auto;
    padding: 10px 12px;
    background-color: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -3px 12px rgba(16, 24, 40, .10);
}

/* 該頁若隱藏底部導覽（hideBottomNav），操作區直接貼底 */
body.mobile-no-tabnav .mobile-detail-actions-enhanced {
    bottom: 0;
    padding-bottom: calc(10px + var(--safe-bottom));
}

.mobile-detail-actions-enhanced .btn,
.mobile-detail-actions-enhanced a.btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    font-size: .92rem;
    white-space: nowrap;
}

/* 有底部固定操作區的頁面需預留空間（Approval/Detail 套 .mobile-has-bottom-actions）。
   body 已為 tab nav 預留 padding，這裡只需再補操作區本身的高度。 */
.mobile-has-bottom-actions {
    padding-bottom: 80px !important;
}

/* 有 .mobile-fab 浮動按鈕的頁面需預留空間，避免 FAB 蓋住清單最後一列 / 分頁列
   （Leave/My、Overtime/My、Trip/My、Clock/My 套 .mobile-has-fab）。 */
.mobile-has-fab {
    padding-bottom: 76px !important;
}

/* -------------------------------------------------------------------------
   10. FR012 FAB 浮動新增按鈕
   ------------------------------------------------------------------------- */
.mobile-fab {
    position: fixed;
    right: 16px;
    /* 疊在底部導覽之上，並考慮 iOS safe-area（F-M09 §9 已知缺口） */
    bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 16px);
    z-index: 1032;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--brand-primary-light), var(--brand-primary));
    color: #fff;
    text-decoration: none;
    box-shadow: var(--shadow-lg);
    transition: transform .12s ease, box-shadow .12s ease;
}

.mobile-fab:hover,
.mobile-fab:focus {
    color: #fff;
}

.mobile-fab:active {
    transform: scale(.93);
    box-shadow: var(--shadow-md);
}

.mobile-fab-icon {
    font-size: 2rem;
    /* 🔴 2026-09-01 Owner 回報「+ 號不夠明顯」：300 太細，在圓形漸層上幾乎看不見。
       改為 400 並加一點字距補償，形狀不變但辨識度提高。 */
    font-weight: 400;
    line-height: 1;
    margin-top: -4px;
}

/* -------------------------------------------------------------------------
   FAB 暗色系修正（2026-09-01）
   -------------------------------------------------------------------------
   🔴 Owner 回報：「手機版圓形圖＋未套用正確暗色系（+號不夠明顯）」。

   根因與先前「公司名稱在暗色系顯示不正常」是【同一個】：
   暗色系把 --brand-primary 覆寫成 #3b82f6、--brand-primary-light 覆寫成 #60a5fa，
   都是偏亮的藍；FAB 的背景是這兩色的漸層、字是白色，
   白字對 #60a5fa 的對比只有約 2.4:1，連 WCAG 大字級的 3:1 都不到。

   當時只修了首頁橫幅（--home-banner-from/to），FAB 沒有一起修 ——
   所以同一個問題在另一個元件上又被使用者看到一次。
   這次比照橫幅的作法：暗色系不沿用亮色 brand，改用專屬的深色漸層。
   #1d4ed8 上的白字約 6.4:1、#1e40af 上約 8.0:1，皆高於 AA 的 4.5:1。 */
[data-theme="dark"] .mobile-fab {
    background: linear-gradient(145deg, #2563eb, #1e40af);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .55);
}

[data-theme="dark"] .mobile-fab:hover,
[data-theme="dark"] .mobile-fab:focus {
    background: linear-gradient(145deg, #3b82f6, #1d4ed8);
}

/* 系統偏好為暗色、但使用者未明確選過主題時（沒有 data-theme 標記）也要成立。 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .mobile-fab {
        background: linear-gradient(145deg, #2563eb, #1e40af);
        box-shadow: 0 6px 18px rgba(0, 0, 0, .55);
    }
}

/* -------------------------------------------------------------------------
   11. 送審 / 簽核流程選擇（Submit.cshtml）
   ------------------------------------------------------------------------- */
.mobile-submit-info {
    background-color: var(--brand-primary-soft);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-bottom: 12px;
    font-size: .875rem;
    color: var(--brand-primary);
}

.mobile-submit-info p {
    margin: 0;
}

.mobile-signflow-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.mobile-signflow-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.mobile-signflow-option input[type="radio"] {
    flex: 0 0 auto;
    width: 1.15em;
    height: 1.15em;
    margin-top: .2em;
    accent-color: var(--brand-primary);
}

.mobile-signflow-option:has(input[type="radio"]:checked) {
    border-color: var(--brand-primary);
    background-color: var(--brand-primary-soft);
}

.mobile-signflow-content {
    flex: 1 1 auto;
    min-width: 0;
}

.mobile-signflow-name {
    font-size: .95rem;
    font-weight: 700;
    color: var(--text);
}

.mobile-signflow-stages {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 6px;
}

.mobile-signflow-stage {
    font-size: .78rem;
    color: var(--text-muted);
}

.mobile-submit-form {
    padding-bottom: 8px;
}

/* -------------------------------------------------------------------------
   12. 前台打卡（F-M08）
   ------------------------------------------------------------------------- */
.mobile-clockin-current-time {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
    color: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 18px 16px;
    text-align: center;
    margin-bottom: 14px;
}

.mobile-clockin-time-label {
    font-size: .78rem;
    opacity: .85;
    letter-spacing: .08em;
}

.mobile-clockin-time-value {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

.mobile-clockin-date-value {
    font-size: .85rem;
    opacity: .9;
}

.mobile-clockin-form {
    padding-bottom: 8px;
}

.mobile-clockin-section {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 12px 14px;
    margin-bottom: 12px;
}

.mobile-clockin-section-title {
    font-size: .85rem;
    font-weight: 700;
    color: var(--brand-primary);
    margin-bottom: 10px;
}

.mobile-clockin-radio-group {
    display: flex;
    gap: 10px;
}

.mobile-clockin-radio {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    padding: 10px 8px;
    background-color: var(--surface-alt);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all .15s ease;
}

.mobile-clockin-radio input[type="radio"] {
    width: 1.1em;
    height: 1.1em;
    accent-color: var(--brand-primary);
    flex: 0 0 auto;
}

.mobile-clockin-radio-label {
    font-size: .95rem;
    font-weight: 600;
    color: var(--text);
}

.mobile-clockin-radio:has(input[type="radio"]:checked) {
    background-color: var(--brand-primary-soft);
    border-color: var(--brand-primary);
}

.mobile-clockin-radio-work-in:has(input[type="radio"]:checked) {
    background-color: rgba(11, 114, 133, .10);
    border-color: var(--accent-info);
}

.mobile-clockin-radio-work-out:has(input[type="radio"]:checked) {
    background-color: rgba(21, 115, 71, .10);
    border-color: var(--accent-success);
}

.mobile-clockin-remarks {
    border-radius: var(--radius-sm);
}

.mobile-clockin-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.mobile-clockin-submit {
    flex: 2 1 0;
    min-height: 52px;
    border-radius: var(--radius-sm);
    font-size: 1.05rem;
    font-weight: 700;
}

.mobile-clockin-clear {
    flex: 1 1 0;
    min-height: 52px;
    border-radius: var(--radius-sm);
    font-weight: 600;
}

.mobile-clockin-history-link,
.mobile-clockin-back-link {
    text-align: center;
    margin-top: 8px;
}

.mobile-clockin-history-link .btn-link,
.mobile-clockin-back-link .btn-link {
    color: var(--brand-primary);
    font-size: .9rem;
    text-decoration: none;
}

.mobile-clockin-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin-bottom: 12px;
    border-radius: 50%;
    background-color: rgba(21, 115, 71, .12);
    color: var(--accent-success);
    font-size: 2.2rem;
}

.mobile-clockin-success-message {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--text);
}

/* ClockIn/Index 的成功 Modal 以 .show.d-block 直接渲染，需自備遮罩 */
.modal.show.d-block {
    background-color: rgba(16, 24, 40, .5);
}

/* -------------------------------------------------------------------------
   13. FR008 Toast
   ------------------------------------------------------------------------- */
.toast-container {
    z-index: 1090;
    max-width: min(92vw, 420px);
}

.toast {
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
}

.toast .toast-body {
    display: flex;
    align-items: center;
    font-size: .9rem;
    font-weight: 500;
}

/* mobile-site.js 動態產生的 Toast 亦沿用上述樣式 */
.mobile-toast-host {
    position: fixed;
    top: calc(var(--header-h) + var(--safe-top) + 10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: max-content;
    max-width: 92vw;
    pointer-events: none;
}

.mobile-toast-host .toast {
    pointer-events: auto;
}

/* -------------------------------------------------------------------------
   14. 通用工具 / 無障礙 / 動畫抑制
   ------------------------------------------------------------------------- */
.mobile-is-loading {
    position: relative;
    pointer-events: none;
    opacity: .68;
}

.visually-hidden-focusable:focus {
    outline: 2px solid var(--brand-primary);
}

:focus-visible {
    outline: 2px solid var(--brand-primary-light);
    outline-offset: 2px;
}

/* 觸控目標最小 44px（WCAG 2.5.5 / iOS HIG） */
.mobile-tab-item,
.mobile-header-btn,
.mobile-filter-tab,
.mobile-page-link,
.mobile-btn {
    touch-action: manipulation;
}

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

/* -------------------------------------------------------------------------
   14.5 深色主題個別覆寫
   全站絕大多數顏色都走 var(--token)，切換 [data-theme="dark"] 的 :root
   即可自動生效（badge / 卡片 / 表單 / 時間線 / FAB 皆屬此類，不需要重複覆寫）。
   以下僅列出「寫死 hex，未走 token」的少數例外，逐一補上深色對應值。
   ------------------------------------------------------------------------- */

/* 2.3 badge-dark 原本是接近全黑，深色底下會完全隱形 */
[data-theme="dark"] .badge-dark { background-color: #64748b; color: #fff; }

/* 4. 首頁卡片：加班／補打卡歷史 icon 用的是自訂第二色階（非 --type-* token） */
[data-theme="dark"] .mobile-home-card-overtime .mobile-home-card-icon {
    background-color: rgba(246, 135, 95, .22);
    color: #ffb38f;
}

[data-theme="dark"] .mobile-home-card-clockin-history .mobile-home-card-icon {
    background-color: rgba(148, 163, 184, .18);
    color: #cbd5e1;
}

/* 6. 附件上傳：hover / 縮圖底色 / 已存在附件 active 態原本寫死淺色 */
/* 🔴 使用者回報 2026-08-28：深色模式下這顆「+ 新增附件」的字很不明顯。
   原因：底色是 --brand-primary-soft（深色時 #1e3a5f 深藍），文字卻用
   --brand-primary（#3b82f6），兩者在深色底下對比不足。
   改為淺藍字 + 提高邊框亮度。 */
[data-theme="dark"] .mobile-attachment-add-btn {
    background-color: rgba(96, 165, 250, .10);
    border-color: var(--brand-primary);
    color: #93c5fd;
}

[data-theme="dark"] .mobile-attachment-add-btn:hover,
[data-theme="dark"] .mobile-attachment-add-btn:active {
    background-color: #24345a;
}

[data-theme="dark"] .mobile-attachment-preview-thumb,
[data-theme="dark"] .mobile-attachment-preview-icon {
    background-color: var(--surface);
}

[data-theme="dark"] .mobile-attachment-item:active {
    background-color: #26314a;
}

/* 9. Tempusdominus 日期時間選擇器（第三方 CDN 元件，僅覆寫容器與格線可讀性，
   細節樣式仍以套件內建為主 —— 上線後請實機檢查一次） */
[data-theme="dark"] .bootstrap-datetimepicker-widget {
    background-color: var(--surface);
    color: var(--text);
    border-color: var(--border);
}

[data-theme="dark"] .bootstrap-datetimepicker-widget.dropdown-menu {
    background-color: var(--surface);
    border-color: var(--border);
}

[data-theme="dark"] .bootstrap-datetimepicker-widget table td,
[data-theme="dark"] .bootstrap-datetimepicker-widget table th,
[data-theme="dark"] .bootstrap-datetimepicker-widget .picker-switch,
[data-theme="dark"] .bootstrap-datetimepicker-widget .timepicker-hour,
[data-theme="dark"] .bootstrap-datetimepicker-widget .timepicker-minute,
[data-theme="dark"] .bootstrap-datetimepicker-widget .timepicker-second {
    color: var(--text);
}

[data-theme="dark"] .bootstrap-datetimepicker-widget table td.old,
[data-theme="dark"] .bootstrap-datetimepicker-widget table td.new,
[data-theme="dark"] .bootstrap-datetimepicker-widget table td span.old,
[data-theme="dark"] .bootstrap-datetimepicker-widget table td span.new {
    color: var(--text-muted);
}

[data-theme="dark"] .bootstrap-datetimepicker-widget table td.disabled,
[data-theme="dark"] .bootstrap-datetimepicker-widget table td span.disabled {
    color: var(--border-strong);
}

[data-theme="dark"] .bootstrap-datetimepicker-widget table td:hover,
[data-theme="dark"] .bootstrap-datetimepicker-widget table span:hover {
    background-color: var(--surface-alt);
}

[data-theme="dark"] .bootstrap-datetimepicker-widget::before,
[data-theme="dark"] .bootstrap-datetimepicker-widget::after {
    border-bottom-color: var(--surface) !important;
}

/* -------------------------------------------------------------------------
   14.6 設定頁列項（More/Index.cshtml 的「深色模式」切換列）
   ------------------------------------------------------------------------- */
.mobile-settings-section {
    margin-top: 18px;
}

.mobile-settings-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 12px 14px;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    color: var(--text);
    font-size: .95rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.mobile-settings-item:active {
    background-color: var(--surface-alt);
}

.mobile-settings-item-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background-color: var(--brand-primary-soft);
    color: var(--brand-primary);
    font-size: 1.05rem;
}

.mobile-settings-item-label {
    flex: 1 1 auto;
    min-width: 0;
}

.mobile-settings-item-value {
    flex: 0 0 auto;
    font-size: .82rem;
    font-weight: 500;
    color: var(--text-muted);
}

/* -------------------------------------------------------------------------
   15. 響應式微調
   ------------------------------------------------------------------------- */
/* 小尺寸手機（iPhone SE 375px 以下） */
@media (max-width: 359px) {
    body.mobile-body { font-size: 14px; }
    .mobile-home-card { min-height: 96px; }
    .mobile-home-card-icon { width: 42px; height: 42px; font-size: 1.2rem; }
    .mobile-clockin-time-value { font-size: 2rem; }
    .mobile-detail-label { flex-basis: 5.5em; }
    .mobile-detail-actions-enhanced .btn { font-size: .84rem; padding-inline: .5rem; }
}

/* 大尺寸手機（iPhone Pro Max 430px）與以上 */
@media (min-width: 430px) {
    .mobile-home-card-grid { gap: 14px; }
    .mobile-card-meta-text { max-width: 220px; }
}

/* 平板 / 桌機瀏覽時置中，不要整片拉寬 */
@media (min-width: 768px) {
    .mobile-header,
    .mobile-tab-nav {
        max-width: 640px;
        margin-inline: auto;
    }
    .mobile-fab {
        right: calc(50vw - 320px + 16px);
    }
}

/* 核准意見欄位（選填）。核准表單原本只有一顆按鈕，補上意見欄後需讓表單佔滿整列，
   否則會與駁回按鈕擠在同一行。PLAN-UAT-SPRINT-001 Track D-2 教練式帶驗。 */
.mobile-approve-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 100%;
}

.mobile-approve-memo {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mobile-approve-memo .form-label {
    font-size: .82rem;
    margin-bottom: 0;
    color: var(--text-muted);
}


/* -------------------------------------------------------------------------
   16.〔我的〕分頁（F-M02 FR006/FR007，使用者需求 2026-08-28）

   設計前提：使用者明確指出「切換公司和登出相當不顯眼」，並要求同時照顧到
   (a) 對手機操作較不熟悉的資深員工 —— 一律「圖示 + 文字標籤」，熱區 ≥56px，
       位置固定在底部導覽第 3 格，不使用需要先知道「可以點」的純圖示或手勢；
   (b) 需要頻繁跨公司切換的高層 —— 切換公司固定在同一個位置，兩次點擊可達，
       且該列直接顯示目前公司名，不必進入才知道自己在哪一家。
   ------------------------------------------------------------------------- */
.mobile-me-identity {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 22px 18px 20px;
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
    color: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}

.mobile-me-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .18);
    border: 2px solid rgba(255, 255, 255, .35);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
}

.mobile-me-name {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.mobile-me-meta {
    font-size: .85rem;
    opacity: .92;
    text-align: center;
    word-break: break-all;
}

/* 設定列群組：多列時以 1px 分隔線相連，視覺上是一張卡而不是散落的按鈕 */
.mobile-settings-section > * + * {
    margin-top: 8px;
}

/* 連結型與唯讀型設定列沿用 .mobile-settings-item 的外觀 */

/* 🔴 2026-08-31：設定列的文字色彩必須「不分元素型別、不分連結狀態」完全一致。
   起因：Owner 實機回報深色模式下，連結列（語言／變更密碼／個人資料／切換公司）
   與按鈕列（深色模式／推播通知）字色不一樣。

   原本只有 :hover / :focus 有設 color，一般狀態與 :link / :visited 都沒寫，
   全站也沒有任何 :visited 規則 —— 已訪問過的連結完全落在涵蓋範圍外。
   （`a { color: var(--brand-primary) }` 在深色模式是亮藍 #3b82f6，
     與 --text 的 #e2e8f0 差異極明顯。）

   這裡一次把 :link / :visited / :hover / :focus / :active 全部釘到同一個 token，
   讓「這一列長什麼樣」不再取決於使用者有沒有點過它。 */
.mobile-settings-item-link,
.mobile-settings-item-link:link,
.mobile-settings-item-link:visited,
.mobile-settings-item-link:hover,
.mobile-settings-item-link:focus,
.mobile-settings-item-link:active {
    color: var(--text);
    text-decoration: none;
}

/* 同理，直接掛在 <a> 上的設定列（未加 -link 變體者）也要涵蓋，
   否則日後有人少寫一個 class，深色模式就又會冒出一列不同色的。 */
a.mobile-settings-item,
a.mobile-settings-item:link,
a.mobile-settings-item:visited,
a.mobile-settings-item:hover,
a.mobile-settings-item:focus,
a.mobile-settings-item:active {
    color: var(--text);
    text-decoration: none;
}

/* 唯讀列（只有一家公司時）：外觀相同但不給可點的視覺暗示 */
.mobile-settings-item-static {
    cursor: default;
}

/* 設定列右側的「動作膠囊」：顯示的是按下去會做什麼（例如深色模式的〔開啟〕），
   與只呈現現值的 .mobile-settings-item-value 在視覺上要能區分，否則使用者
   會把它讀成狀態。使用者需求 2026-08-28。 */
.mobile-settings-item-action-pill {
    flex: 0 0 auto;
    padding: 5px 14px;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background-color: var(--brand-primary);
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1;
}

.mobile-settings-item:disabled {
    opacity: 1;             /* 停用的是「可點」，不是可讀性 */
    cursor: default;
}

.mobile-settings-item:disabled .mobile-settings-item-value {
    color: var(--text-muted);
}

.mobile-settings-item-chevron {
    flex: 0 0 auto;
    margin-left: 4px;
    color: var(--text-muted);
    font-size: .9rem;
    line-height: 1;
}

/* 登出：與上方設定區留出明顯間距，避免資深員工誤觸 */
.mobile-me-logout-form {
    margin-top: 22px;
}

.mobile-me-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 56px;
    padding: 12px 14px;
    background-color: var(--surface);
    border: 1px solid var(--accent-danger);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    color: var(--accent-danger);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .12em;
}

.mobile-me-logout-btn i {
    font-size: 1.2rem;
    line-height: 1;
    letter-spacing: normal;
}

.mobile-me-logout-btn:active {
    background-color: var(--accent-danger);
    color: #fff;
}


/* -------------------------------------------------------------------------
   17. 🔴 暗色模式：Bootstrap .list-group 修正

   問題（使用者 2026-08-28 回報「暗色系的切換公司顏色也沒有設定好」）：
   本站的深色模式是自訂的 [data-theme="dark"]，**不是** Bootstrap 5.3 的
   [data-bs-theme="dark"]，因此 Bootstrap 的 --bs-list-group-* 變數不會切換。
   結果在深色模式下：
     - 未選取的公司列 = 白底深字（整塊白貼在深色頁面上）
     - 選取的那一列   = 背景被 .mobile-switch-company-item:has(:checked) 設成
                        var(--brand-primary-soft)（深藍 #1e3a5f），文字卻仍是
                        Bootstrap 預設深色 → 深藍底 + 深字，幾乎看不見
   本區塊補上缺少的覆寫；改動範圍限定 .list-group，不影響其他元件。
   ------------------------------------------------------------------------- */
[data-theme="dark"] .list-group {
    --bs-list-group-color: var(--text);
    --bs-list-group-bg: var(--surface);
    --bs-list-group-border-color: var(--border);
    --bs-list-group-action-color: var(--text);
    --bs-list-group-action-hover-color: var(--text);
    --bs-list-group-action-hover-bg: var(--surface-alt);
    --bs-list-group-action-active-color: var(--text);
    --bs-list-group-action-active-bg: var(--surface-alt);
    --bs-list-group-disabled-color: var(--text-muted);
    --bs-list-group-disabled-bg: var(--surface);
}

[data-theme="dark"] .list-group-item {
    color: var(--text);
    background-color: var(--surface);
    border-color: var(--border);
}

/* 選取列：深藍底必須配淺色字，否則等同看不見 */
[data-theme="dark"] .mobile-switch-company-item:has(.mobile-switch-radio:checked) {
    background-color: var(--brand-primary-soft);
    border-color: var(--brand-primary);
    color: #fff;
}

[data-theme="dark"] .mobile-switch-company-item:has(.mobile-switch-radio:checked) .mobile-switch-label {
    color: #fff;
    font-weight: 700;
}

/* -------------------------------------------------------------------------
   登入頁：清除裝置綁定（2026-08-31 使用者需求）
   公司由裝置綁定碼決定，綁錯時原本沒有任何畫面可以解除。
   刻意做成低調的次要動作 —— 它不是常用功能，但需要時必須找得到。
   ------------------------------------------------------------------------- */
.mobile-login-clear-binding {
    margin-top: 4px;
    text-align: center;
}

.mobile-login-clear-binding-btn {
    padding: 8px 12px;
    min-height: 44px;   /* 觸控熱區 */
    font-size: .88rem;
    color: var(--text-muted);
    text-decoration: underline;
}

.mobile-login-clear-binding-btn:hover,
.mobile-login-clear-binding-btn:focus {
    color: var(--text-primary);
}

.mobile-login-clear-binding-hint {
    margin-top: 2px;
    font-size: .74rem;
    line-height: 1.45;
    color: var(--text-muted);
}

/* -------------------------------------------------------------------------
   暗色系（Dark Theme）下方 Bar 字體與 Icon 顏色優化（白灰色系）
   涵蓋：
   1. 底部導覽列（.mobile-tab-nav）
   2. 底部固定操作區（.mobile-detail-actions-enhanced）
   3. Modal 在暗色系下的背景、文字、邊框對齊
   ------------------------------------------------------------------------- */
[data-theme="dark"] .mobile-tab-nav,
[data-bs-theme="dark"] .mobile-tab-nav {
    background-color: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .4);
}

[data-theme="dark"] .mobile-tab-item,
[data-bs-theme="dark"] .mobile-tab-item {
    color: #cbd5e1; /* 白灰色 */
}

[data-theme="dark"] .mobile-tab-item i,
[data-bs-theme="dark"] .mobile-tab-item i {
    color: #e2e8f0; /* 白灰色 */
}

[data-theme="dark"] .mobile-tab-item:hover,
[data-theme="dark"] .mobile-tab-item:focus,
[data-bs-theme="dark"] .mobile-tab-item:hover,
[data-bs-theme="dark"] .mobile-tab-item:focus {
    color: #f8fafc;
}

[data-theme="dark"] .mobile-tab-item:hover i,
[data-theme="dark"] .mobile-tab-item:focus i,
[data-bs-theme="dark"] .mobile-tab-item:hover i,
[data-bs-theme="dark"] .mobile-tab-item:focus i {
    color: #ffffff;
}

[data-theme="dark"] .mobile-tab-item.active,
[data-bs-theme="dark"] .mobile-tab-item.active {
    color: #ffffff;
}

[data-theme="dark"] .mobile-tab-item.active i,
[data-bs-theme="dark"] .mobile-tab-item.active i {
    color: #60a5fa;
}

/* 底部操作區（.mobile-detail-actions-enhanced）在暗色系下 */
[data-theme="dark"] .mobile-detail-actions-enhanced,
[data-bs-theme="dark"] .mobile-detail-actions-enhanced {
    background-color: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -3px 12px rgba(0, 0, 0, .45);
}

[data-theme="dark"] .mobile-detail-actions-enhanced .btn-outline-secondary,
[data-bs-theme="dark"] .mobile-detail-actions-enhanced .btn-outline-secondary,
[data-theme="dark"] .mobile-detail-actions-enhanced .mobile-btn-secondary,
[data-bs-theme="dark"] .mobile-detail-actions-enhanced .mobile-btn-secondary {
    color: #e2e8f0;
    border-color: #64748b;
    background-color: transparent;
}

[data-theme="dark"] .mobile-detail-actions-enhanced .btn-outline-secondary i,
[data-bs-theme="dark"] .mobile-detail-actions-enhanced .btn-outline-secondary i,
[data-theme="dark"] .mobile-detail-actions-enhanced .mobile-btn-secondary i,
[data-bs-theme="dark"] .mobile-detail-actions-enhanced .mobile-btn-secondary i {
    color: #e2e8f0;
}

[data-theme="dark"] .mobile-detail-actions-enhanced .btn-outline-secondary:hover,
[data-theme="dark"] .mobile-detail-actions-enhanced .btn-outline-secondary:active,
[data-bs-theme="dark"] .mobile-detail-actions-enhanced .btn-outline-secondary:hover,
[data-bs-theme="dark"] .mobile-detail-actions-enhanced .btn-outline-secondary:active,
[data-theme="dark"] .mobile-detail-actions-enhanced .mobile-btn-secondary:hover,
[data-theme="dark"] .mobile-detail-actions-enhanced .mobile-btn-secondary:active,
[data-bs-theme="dark"] .mobile-detail-actions-enhanced .mobile-btn-secondary:hover,
[data-bs-theme="dark"] .mobile-detail-actions-enhanced .mobile-btn-secondary:active {
    color: #ffffff;
    border-color: #94a3b8;
    background-color: #334155;
}

/* Modal 在暗色系下 */
[data-theme="dark"] .modal-content,
[data-bs-theme="dark"] .modal-content {
    background-color: var(--surface);
    color: var(--text);
    border-color: var(--border);
}

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

[data-theme="dark"] .modal-content .form-control,
[data-bs-theme="dark"] .modal-content .form-control {
    background-color: var(--surface-alt);
    color: var(--text);
    border-color: var(--border);
}

[data-theme="dark"] .modal-content .form-control:focus,
[data-bs-theme="dark"] .modal-content .form-control:focus {
    background-color: var(--surface-alt);
    color: var(--text);
    border-color: var(--brand-primary);
}

/* L1 手風琴標頭在暗色系下（白灰色與深色底） */
[data-theme="dark"] .mobile-home-l1-header,
[data-bs-theme="dark"] .mobile-home-l1-header {
    background-color: #1e293b;
    border-color: #334155;
    color: #f8fafc;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .mobile-home-l1-header:hover,
[data-bs-theme="dark"] .mobile-home-l1-header:hover,
[data-theme="dark"] .mobile-home-l1-header.expanded,
[data-bs-theme="dark"] .mobile-home-l1-header.expanded {
    background-color: #1e293b;
    border-color: #475569;
}

[data-theme="dark"] .mobile-home-l1-header:active,
[data-bs-theme="dark"] .mobile-home-l1-header:active {
    background-color: #273549;
}

[data-theme="dark"] .mobile-home-l1-title,
[data-bs-theme="dark"] .mobile-home-l1-title {
    color: #f8fafc;
}

[data-theme="dark"] .mobile-home-l1-badge,
[data-bs-theme="dark"] .mobile-home-l1-badge {
    background-color: #334155;
    color: #cbd5e1;
}

[data-theme="dark"] .mobile-home-l1-chevron,
[data-bs-theme="dark"] .mobile-home-l1-chevron {
    color: #cbd5e1;
}