/* ==========================================================================
   AGV Maintenance System Master Stylesheet
   ========================================================================== */

[data-i18n], .report-th {
    white-space: pre-line;
}

/* --------------------------------------------------------------------------
   1. CSS Variables & Theme Definitions
   -------------------------------------------------------------------------- */
:root {
    --color-primary: #1D4AD7;
    --color-primary-hover: #1435a2;
    --color-secondary: #6c757d;
    --color-secondary-hover: #5a6268;
    --color-danger: #dc3545;
    --color-danger-hover: #c82333;
    
    --text-primary: #000000;
    --text-secondary: #333333;
    --text-muted: #6c757d;
    
    --bg-main: #f4f6f9;
    --bg-card: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    --bg-btn-light: #eef0f3;
    
    --border-color: #e5e7eb;
    --border-input: #ced4da;
    --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.03);
    --shadow-modal: 0 5px 25px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   深色風格主題 (Dark Theme) - 調整修正版
   ========================================================================== */
[data-theme="dark"] {
    /* 保持與 Light Theme 相同的 Hue (藍色系 225deg)，僅調整 Lightness */
    --color-primary: #3b82f6;
    --color-primary-hover: #60a5fa;
    --color-secondary: #64748b;
    --color-secondary-hover: #94a3b8;
    
    --color-success: #22c55e;
    --color-success-hover: #4ade80;
    --color-info: #0ea5e9;
    --color-info-hover: #38bdf8;
    --color-danger: #ef4444;
    --color-danger-hover: #f87171;
    
    /* 全站文字 */
    --text-primary: #ffffff;
    --text-secondary: #cbd5e1;
    --text-dark-gray: #94a3b8;
    --text-muted: #94a3b8;
    --text-on-primary: #ffffff;
    
    /* 卡片與背景 */
    --bg-main: #0b1329;          
    --bg-card: #111c38;          
    --bg-secondary: #1a2747;     
    --bg-tertiary: #23335a;      
    --bg-btn-light: #1e293b;
    
    /* 邊框與陰影 */
    --border-color: #23335a;
    --border-dark: #334155;
    --border-input: #334155;
    --shadow-card: 0 10px 25px rgba(0, 0, 0, 0.4);
    --shadow-modal: 0 5px 25px rgba(0, 0, 0, 0.8);

    /* 核心功能按鈕：淺藍框、深藍底、白色字 */
    --btn-primary-bg: #1e293b;
    --btn-primary-text: #ffffff;
    --btn-primary-border: #60a5fa;
    --btn-primary-hover-bg: #2d3d54;

    --btn-secondary-bg: #334155;
    --btn-secondary-text: #ffffff;
    --btn-secondary-hover-bg: #475569;

    --btn-outline-border: #60a5fa;
    --btn-outline-text: #ffffff;
    --btn-outline-hover-bg: #2563eb;
    --btn-outline-hover-text: #ffffff;
}

/* --------------------------------------------------------------------------
   Dark Theme 專屬元件覆寫 (設定/語言選單 & 核心按鈕)
   -------------------------------------------------------------------------- */

/* 1. 「設定」與「語言下拉選單」：淺灰框、深灰底、白色字 */
[data-theme="dark"] .btn-settings-topleft,
[data-theme="dark"] .theme-lang-select {
    background-color: #334155 !important;
    border: 1px solid #94a3b8 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-settings-topleft:hover,
[data-theme="dark"] .theme-lang-select:hover {
    background-color: #475569 !important;
    border-color: #cbd5e1 !important;
    color: #ffffff !important;
}

/* 2. 主選單 4 大按鈕與主要按鈕：淺藍框、深藍底、白色字 */
[data-theme="dark"] .menu-btn {
    background-color: #1e293b !important;
    border: 2px solid #60a5fa !important;
    color: #ffffff !important;
}

/* Dark Theme 專用變色與對比度適配 */
body.dark-theme .menu-btn.btn-disabled,
body.dark-theme .menu-btn[disabled],
[data-theme="dark"] .menu-btn.btn-disabled,
[data-theme="dark"] .menu-btn[disabled] {
    background-color: #343a40 !important;
    border-color: #343a40 !important;
    color: #6c757d !important;
    opacity: 0.45 !important;
}

[data-theme="dark"] .menu-btn:hover {
    background-color: #2563eb !important;
    border-color: #93c5fd !important;
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.25);
}

[data-theme="dark"] .sub-btn-group .btn-primary.active {
    background-color: #059669 !important; /* 護眼翡翠綠 */
    border-color: #10b981 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.35) !important;
}

[data-theme="dark"] .sub-btn-group .btn-primary.active:hover {
    background-color: #047857 !important;
}

/* 3. 登出連結：深色模式下轉為亮白色文字 */
[data-theme="dark"] .logout-link {
    color: #ffffff !important;
}

[data-theme="dark"] .logout-link:hover {
    color: #60a5fa !important;
}


/* --------------------------------------------------------------------------
   2. Base & Layout Infrastructure
   -------------------------------------------------------------------------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 讓 body 變成彈性盒子，垂直排列 */
body {
    background-color: var(--bg-main);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* 設定 html 與 body 佔滿整個視窗高度 */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* 讓原本頁面的主要內容容器自動撐開剩餘空間 */
.page-content-wrapper, main {
    flex: 1;
}

/* Header 樣式 */
#global-app-header {
    background-color: #343a40;
    color: #ffffff;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Footer 樣式 */
#global-app-footer {
    background-color: #f8f9fa;
    color: #6c757d;
    text-align: center;
    padding: 12px 20px;
    font-size: 0.85rem;
    border-top: 1px solid #dee2e6;
}

.main-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 20px;
    width: 100%;
}

.maint-table th,
.maint-table td {
  /* 允許在空白處（及換行符號）自動換行 */
  white-space: normal !important;
  
  /* 允許單詞過長時破壞單詞換行（可選，防止長單字溢出） */
  word-break: break-word; 
  /* 或使用 overflow-wrap: break-word; */
}

/* 統一頁面卡片容器 */
.card {
    position: relative;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    padding: 30px 40px;
    box-sizing: border-box;
}

#authCard {
    width: 100%;
    max-width: 400px;
    padding: 30px 25px 25px 25px;
    margin: 0 auto;
}

.card-wide {
    width: 100%;
    max-width: 1440px;
}

#mainMenuBlock {
    position: relative;
    padding: 10px 0;
}

.card h2 {
    color: var(--text-primary);
    margin-bottom: 8px;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 800;
}

/* 頁面頂部 Header 統一 (解決貼邊問題) */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.section-title {
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: bold;
}

.report-container {
    display: none;
}

.mgmt-block {
    display: none;
    margin-top: 20px;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-secondary);
}

.maint-tab-block {
    display: none;
}
.maint-tab-block.active {
    display: block;
}

/* --------------------------------------------------------------------------
   3. Buttons & Actions (對齊左圖標準風格)
   -------------------------------------------------------------------------- */
/* 通用基礎按鈕 (取消預設 100% 寬度) */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    background-color: var(--color-primary);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-primary:hover {
    background-color: var(--color-primary-hover);
}

.btn-disabled,
button:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    box-shadow: none !important;
}

/* 登入頁表單送出按鈕維持全寬 */
#authCard .btn-primary {
    width: 100%;
    margin-top: 10px;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    font-size: 1rem;
    background-color: var(--color-secondary);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}
.btn-secondary:hover { background-color: var(--color-secondary-hover); }

.btn-danger-submit {
    background-color: var(--color-danger);
    color: #ffffff;
}
.btn-danger-submit:hover { background-color: var(--color-danger-hover); }

/* 左上角返回按鈕 (對齊左圖藍框外觀) */
.btn-back {
    padding: 8px 16px;
    background-color: #ffffff;
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-back:hover {
    background-color: #f0f4ff;
}

/* 主頁 4 大功能按鈕 */
.menu-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* 關鍵：確保第二列溢出的按鈕完美置中 */
    gap: 16px;
    margin: 36px auto 30px auto;
    width: 100%;
    max-width: 1000px; /* 限制整體最大寬度 */
}

/* WMS 權限未授權之停用按鈕通用灰色風格 (Light Theme) */
.menu-btn.btn-disabled,
.menu-btn[disabled] {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #e0e0e0 !important;
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    box-shadow: none !important;
}

.menu-btn {
    /* 1. 禁用 flex-grow，防止第二列按鈕被獨自拉大 */
    flex: 0 1 auto; 
    
    /* 2. 用百分比實現彈性：在 4 個按鈕時剛好各佔約四分之一 */
    width: calc(25% - 16px); 
    
    /* 3. 設定尺寸上下限：確保小螢幕不至於太小，大螢幕不會無限放大 */
    min-width: 180px; /* 螢幕變窄時，低於此寬度自動換行 */
    max-width: 240px; /* 限制按鈕最大寬度 */
    box-sizing: border-box;
    max-width: 260px; /* 限制單個按鈕的最大寬度 */
    background-color: #ffffff;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    padding: 16px 12px;
    border-radius: 8px;
    font-size: 1.15rem;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.menu-btn:hover {
    background-color: #f0f4ff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(29, 74, 215, 0.12);
}

/* 子頁面按鈕組居中與固定尺寸修復 */
.action-btn-group,
.form-actions-center {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    margin-top: 25px;
}

.sub-btn-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.form-actions-left {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* 所有按鈕與換行後的按鈕皆整體置中 */
    gap: 16px;
    margin: 36px auto 30px auto;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* 所有按鈕與換行後的按鈕皆整體置中 */
    gap: 16px;
    margin: 36px auto 30px auto;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* 所有按鈕與換行後的按鈕皆整體置中 */
    gap: 16px;
    margin: 36px auto 30px auto;
    width: 100%;
    margin-top: 20px;
}

.form-actions-right {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

.btn-form-fixed,
.btn-action-sm {    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* 所有按鈕與換行後的按鈕皆整體置中 */
    gap: 16px;
    margin: 36px auto 30px auto;
    width: 100%;

    min-width: 120px;
}

/* --------------------------------------------------------------------------
   4. Form Controls & Sub-page Centering (解決元件寬度過大問題)
   -------------------------------------------------------------------------- */
.compact-form,
.form-narrow {
    max-width: 500px;
    margin: 0 auto;
}

.form-narrow-sm {
    max-width: 400px;
    margin: 15px auto 0 auto;
}

.form-group {
    margin-bottom: 18px;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--text-secondary);
}

.form-narrow label,
.form-narrow-sm label {
    text-align: center;
}

.form-group input,
.form-group select,
.form-group textarea,
.custom-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-input);
    border-radius: 6px;
    background-color: var(--bg-card);
    color: var(--text-primary);
    font-size: 1rem;
    outline: none;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--color-primary);
}

.input-readonly {
    background-color: var(--bg-tertiary);
    cursor: not-allowed;
}


/* ==========================================================================
   4-A. Compact Form (雙欄表單 Layout 專用覆寫)
   ========================================================================== */

/* 1. 表單容器寬度與居中 */
.compact-form {
    max-width: 680px;
    margin: 0 auto;
    padding: 10px 0;
}

/* 2. 將 form-group 轉為 Flex 雙欄水平對齊 */
.compact-form .form-group {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
}

/* 3. 左側 Label：固定 180px 寬度、靠右對齊 */
.compact-form .form-group label {
    width: 180px;
    min-width: 180px;
    text-align: right;
    padding-right: 15px;
    margin-bottom: 0;
    font-weight: bold;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* 4. 右側 Input / Select / Textarea：彈性佔滿剩餘寬度 */
.compact-form .form-group input[type="text"],
.compact-form .form-group input[type="email"],
.compact-form .form-group input[type="password"],
.compact-form .form-group input[type="datetime-local"],
.compact-form .form-group select,
.compact-form .form-group textarea {
    flex: 1;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-input);
    border-radius: 6px;
    background-color: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.95rem;
    box-sizing: border-box;
}

/* 5. 多行文本框 (textarea) 頂部對齊 */
.compact-form .form-group:has(textarea) {
    align-items: flex-start;
}
.compact-form .form-group:has(textarea) label {
    padding-top: 8px;
}

/* 6. 圖片上載虛線框細節對齊 */
.compact-form .image-upload-box {
    margin: 20px 0;
    padding: 16px;
    border: 2px dashed var(--border-input);
    border-radius: 6px;
    background-color: var(--bg-secondary);
}

.compact-form .image-upload-box > label {
    display: block;
    text-align: right;
    font-weight: bold;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.compact-form .image-upload-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 15px;
}

.compact-form .image-upload-row > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 7. 行動裝置 RWD 自動轉為單欄 */
@media (max-width: 768px) {
    .compact-form .form-group {
        flex-direction: column;
        align-items: flex-start;
    }
    .compact-form .form-group label {
        width: 100%;
        text-align: left;
        padding-right: 0;
        margin-bottom: 6px;
    }
}


/* --------------------------------------------------------------------------
   5. Modals & Overlays
   -------------------------------------------------------------------------- */
.modal-overlay-bg {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.modal-box {
    background: var(--bg-card);
    width: 90%;
    max-width: 800px;
    max-height: 85vh;
    border-radius: 8px;
    padding: 24px;
    box-shadow: var(--shadow-modal);
    display: flex;
    flex-direction: column;
    position: relative;
    color: var(--text-primary);
}

.modal-box-confirm { max-width: 480px; }
.modal-box-admin { max-width: 400px; }

.modal-close-btn {
    position: absolute;
    top: 12px; right: 16px;
    border: none;
    background: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-muted);
}

.modal-title {
    margin-bottom: 16px;
    color: var(--text-primary);
}

.modal-title-danger { color: var(--color-danger); }

.modal-body-scroll {
    overflow-y: auto;
    flex: 1;
    margin-bottom: 15px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
}

/* --------------------------------------------------------------------------
   6. Image Uploads
   -------------------------------------------------------------------------- */
.image-upload-box {
    margin: 20px 0;
    padding: 16px;
    border: 1px dashed var(--border-input);
    border-radius: 6px;
    background-color: var(--bg-secondary);
}

.image-upload-row {
    display: flex;
    gap: 15px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.image-preview-area {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.img-preview-card {
    max-width: 140px;
    max-height: 140px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   7. Top Bar & Language Selector
   -------------------------------------------------------------------------- */
.btn-settings-topleft {
    position: absolute;
    top: 16px;
    left: 16px;
    height: 34px;
    padding: 0 14px;
    background-color: var(--bg-btn-light);
    color: #495057;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-settings-topleft:hover {
    background-color: #e2e5ec;
    color: #000000;
}

.card-header-actions {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    height: 34px;
}

.theme-lang-select {
    height: 100%;
    padding: 0px 8px;
    background-color: var(--bg-btn-light);
    color: #495057;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   8. Utilities & Footer Links
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.text-left { text-align: left; }
.margin-top-sm { margin-top: 12px; }

.user-welcome-msg { 
    font-size: 1rem; 
    color: var(--text-primary); 
    margin-top: 8px;
    margin-bottom: 24px; 
    text-align: center; 
    font-weight: 500;
}

.auth-toggle {
    margin-top: 20px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.auth-toggle a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    margin-left: 4px;
    cursor: pointer;
}

/* 登入與表單錯誤訊息：強制紅色字體與淺紅背景 (Light Theme) */
.alert-message,
#alertMsg,
#regAlertMsg {
    color: #dc3545 !important;
    background-color: #f8d7da !important;
    border: 1px solid #f5c6cb !important;
    padding: 10px 12px;
    margin-top: 12px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.9rem;
    text-align: center;
}

/* 深色模式 Dark Theme 專用變色適配 */
body.dark-theme .alert-message,
body.dark-theme #alertMsg,
body.dark-theme #regAlertMsg,
[data-theme="dark"] .alert-message,
[data-theme="dark"] #alertMsg,
[data-theme="dark"] #regAlertMsg {
    color: #ff6b6b !important;
    background-color: #3d1a24 !important;
    border: 1px solid #842029 !important;
}

.logout-link-container {
    margin-top: 25px;
    text-align: center;
}

.logout-link {
    color: #000000 !important; 
    font-size: 1.15rem !important;
    font-weight: 800;
    text-decoration: underline;
}

.logout-link:hover {
    color: var(--color-primary) !important;
}

/* 統一 Tom Select AGV 下拉選單與項目的字體大小 */
.ts-control,
.ts-dropdown .option {
    font-size: 1rem !important; /* 確保所有文字大小一致 */
    font-weight: normal !important;
    line-height: 1.5;
}

/* Tom Select 已選取項目容器 (Flex 佈局) */
.ts-control {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 6px 12px !important;
}

/* 已選項目的圓角小方框標籤 */
.ts-control .item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important; /* 文字與交叉之間的間距 */
    background-color: #f1f3f5 !important;
    border: 1px solid #ced4da !important;
    border-radius: 6px !important;
    padding: 4px 10px !important;
    font-size: 0.95rem !important;
    color: #333 !important;
    margin: 0 !important;
    height: 30px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.ts-wrapper .clear-button,
.ts-control .clear-button,
.ts-control .item .remove {
    position: static !important; /* 解除 absolute 定位，順應 flex 佈局放在右側 */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #888 !important;
    font-size: 1.1rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

.ts-wrapper .clear-button:hover,
.ts-control .item .remove:hover {
    color: #e03131 !important;
}

.ts-wrapper.single .ts-control,
.ts-control {
    display: flex !important;
    align-items: center !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 4px 12px !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
}

.ts-wrapper.has-items.focusing .ts-control .item {
    display: none !important;
}

.ts-control > input {
/* 將取消交叉 (clear-button) 移至圓角小方框內部右側 */
    flex: 1 !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
}

.ts-wrapper .clear-button,
.ts-control .clear-button {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #888 !important;
    font-size: 1.2rem !important;
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    z-index: 2;
}

.ts-control .clear-button:hover {
    color: #e03131 !important;
    opacity: 1;
}

/* ==========================================================================
   AGV 點檢表專用樣式 (Class 精確對齊版)
   ========================================================================== */
.maint-table {
    width: 100%;
    table-layout: auto !important; /* 切換為 auto，允許欄位依據內容字數自動收縮/擴張 */
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 0.95rem;
}

.maint-table th,
.maint-table td {
    border: 1px solid var(--border-color);
    padding: 8px 6px;
    vertical-align: middle;
    box-sizing: border-box;
}

/* 僅表頭列粗體與居中 */
.maint-table thead th {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: bold;
    text-align: center;
}

/* --------------------------------------------------------------------------
   依據 Class 精確設定欄寬與換行
   -------------------------------------------------------------------------- */

/* 第 1 欄：分類 */
.maint-table th.col-cat,
.maint-table td.col-cat-td {
    width: 1% !important;
    white-space: nowrap !important;
    text-align: center !important;
    font-weight: bold !important;
    background-color: var(--bg-secondary, #fafafa);
}

/* 第 2 欄：檢查項目 (靠左、非粗體、不換行) */
.maint-table th.col-item,
.maint-table td.col-item-td {
    width: 15% !important;
/*    white-space: nowrap !important;   */
    text-align: left !important;
    font-weight: normal !important;
}

/* 第 3 欄：參考更換標準 (靠左、非粗體、強制換行斷詞) */
.maint-table th.col-spec,
.maint-table td.col-spec-td {
    width: 22% !important;
    text-align: left !important;
    font-weight: normal !important;
    white-space: normal !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
}

/* 第 4 欄：方法 */
.maint-table th.col-method,
.maint-table td.col-method-td {
    width: 11% !important;
    text-align: left !important;
    font-weight: normal !important;
    white-space: normal !important;
    word-break: break-all !important;
}

/* 第 5 欄：檢查結果 */
.maint-table th.col-result,
.maint-table td.col-result-td {
    width: 22% !important;             /* 配合 auto 佈局，自動計算單行最緊湊寬度 */
    white-space: nowrap !important;   /* 強制格內文字不換行 */
    text-align: center !important;
    vertical-align: middle !important;
    padding: 6px 10px !important;
}

/* 第 6 欄：處理措施 */
.maint-table th.col-action,
.maint-table td.col-action-td {
    width: 45% !important;
}

.maint-table td label {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-right: 4px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 0.88rem;
    font-weight: normal;
}

.maint-table input[type="text"] {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border-input);
    border-radius: 4px;
    background-color: var(--bg-card);
    color: var(--text-primary);
    box-sizing: border-box;
}

/* ==========================================================================
   AGV 詳細檢修單 (Quarterly Maintenance) 上方欄位樣式
   ========================================================================== */
.maint-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px;
}

/* 頂部四個輸入欄位的網格佈局 */
.maint-form-grid {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    gap: 12px;
}

.maint-form-grid label {
    width: 180px;
    font-weight: bold;
    color: var(--text-secondary);
    text-align: right;
    white-space: nowrap;
}

.maint-form-grid input[type="text"],
.maint-form-grid input[type="file"] {
    flex: 1;
    max-width: 450px;
    padding: 8px 12px;
    border: 1px solid var(--border-input);
    border-radius: 6px;
    background-color: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.95rem;
    box-sizing: border-box;
}

/* 唯讀輸入框樣式對齊 */
.maint-form-grid input[readonly] {
    background-color: var(--bg-tertiary) !important;
    cursor: not-allowed;
}

/* RWD 響應式微調 (螢幕較窄時自動換行) */
@media (max-width: 768px) {
    .maint-form-grid {
        flex-direction: column;
        align-items: flex-start;
    }
    .maint-form-grid label {
        width: 100%;
        text-align: left;
    }
    .maint-form-grid input[type="text"],
    .maint-form-grid input[type="file"] {
        width: 100%;
        max-width: 100%;
    }
}


/* ==========================================================================
   查詢記錄 3 Rows 精準版面佈局
   ========================================================================== */

/* 主卡片容器 */
.search-3row-container {
    align-items: center;
    width: 100%;
    max-width: 760px;
    margin: 15px auto 25px auto;
    padding: 20px 24px;
    background-color: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.search-upper-panel {
    width: 100%;
    min-height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.search-lower-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    border-top: 1px solid var(--border-color, #edf2f7);
    padding-top: 16px;
}

.date-input-group .form-group-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 每一列 (Row) 的配置 */
.search-row {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    background-color: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border-color, #edf2f7);
    border-radius: 8px;
    min-height: 56px;
}

/* 左側 Radio 區域：固定寬度 */
.search-row-left {
    width: 180px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.search-row-left .radio-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.98rem;
    cursor: pointer;
    white-space: nowrap;
}

.search-row-left input[type="radio"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* 右側控制項區域：填滿剩餘寬度 */
.search-row-right {
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: 20px;
}

.form-group-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-group-inline label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    white-space: nowrap;
    margin: 0;
}

.form-group-inline input[type="date"],
.form-group-inline select {
    height: 38px;
    padding: 4px 10px;
    border: 1px solid var(--border-input, #cbd5e1);
    border-radius: 6px;
    background-color: var(--bg-main, #ffffff);
}

.form-group-inline.agv-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.form-group-inline.agv-group select,
.form-group-inline.agv-group .ts-wrapper {
    flex-grow: 1;
    max-width: 380px;
}

.date-input-group {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 15px;
    width: 100%;
}
/* Row 3：置中搜尋按鈕 */

.radio-group-inline {
    display: flex;
    gap: 40px;
    justify-content: center;
    align-items: center;
}

.radio-group-inline .radio-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 600;
}

.radio-group-inline input[type="radio"] {
    width: 18px;
    height: 18px;
}

.search-row-btn {
    justify-content: center;
    background-color: transparent;
    border: none;
    padding: 8px 0 0 0;
    min-height: auto;
}

.search-row-btn button {
    min-width: 180px;
    height: 42px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 6px;
}

/* 1. 查詢子頁籤按鈕基礎選中狀態 (Light Theme) */
.sub-btn-group .btn-primary.active {
    background-color: #16a34a !important; /* 鮮豔綠色 */
    border-color: #15803d !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.3) !important;
}

.sub-btn-group .btn-primary.active:hover {
    background-color: #15803d !important;
}

.sub-btn-group .btn-primary {
    /* 核心設定：固定所有頁籤按鈕寬度為 200px (可依需求微調，如 180px~220px) */
    flex: 0 0 200px !important;
    text-align: center;
    white-space: nowrap;
    box-sizing: border-box;
}

/* 2. 下方搜尋提交按鈕：縮窄至合適寬度並水平置中 */
/*    通用與 Modal 背景與彈窗樣式 */
.modal-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: #fff;
    width: 90%;
    max-width: 500px;
    border-radius: 8px;
    padding: 25px;
    position: relative;
    text-align: center;
}

.modal-content h3 {
    margin-top: 0;
}

.modal-actions-center {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
}

.modal-content-card {
    background: #fff;
    width: 90%;
    max-width: 500px;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    text-align: center;
}

.modal-content-card h3 {
    margin-top: 0;
}

.modal-content-large {
    background: #fff;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 8px;
    padding: 20px;
    position: relative;
}

.modal-close-icon {
    position: absolute;
    right: 15px;
    top: 15px;
    border: none;
    background: transparent;
    font-size: 1.5rem;
    cursor: pointer;
}

.search-btn-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

.search-submit-btn {
    width: 220px;
    height: 40px;
    font-weight: bold;
}

.search-row-btn .search-submit-btn {
    display: block;
    width: 240px !important;    /* 縮窄按鈕寬度（取代原先的長條大按鈕） */
    max-width: 100%;
    margin: 0 auto !important;  /* 左右 margin auto 達成精準置中 */
    box-sizing: border-box;
}

/* ==========================================================================
   查詢記錄通用表格 (Data Table & Action Buttons Fix)
   ========================================================================== */

/* 1. 恢復外圍表格容器與邊框 */
.report-table,
.table {
    width: 100%;
    border-collapse: collapse !important;
    margin-top: 15px;
    background-color: var(--bg-card);
    border: 0px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}

/* 2. 欄位邊框、內邊距與對齊 (修復 ID 與 AGV 車號黏在一起) */
.report-table th,
.report-table td,
.table th,
.table td {
    border: 1px solid var(--border-color) !important;
    padding: 8px 12px !important;
    text-align: left;
    vertical-align: middle;
    font-size: 0.95rem;
    box-sizing: border-box;
}

/* 3. 表頭背景色與粗體 */
.report-table th,
.table th {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary);
    font-weight: bold;
    white-space: nowrap;
}

/* 4. 操作按鈕容器：強制水平一排 (防止明細/修改/刪除按鈕巨大化與垂直堆疊) */
/* 事故申報 / 啟動檢修 按鈕容器與樣式對齊 */
.action-btn-group {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 24px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
}

/* 強制將內部按鈕的高度、字體大小與邊距拉回與查詢頁面一致 */
.action-btn-group .btn-primary {
    height: 44px !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    padding: 0 24px !important;
    border-radius: 6px !important;
    line-height: 44px !important;
    box-sizing: border-box !important;
}

.action-btn-group,
td .btn-group {
    display: inline-flex !important;
    flex-direction: row !important;
    gap: 4px !important;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

/* 5. 修正表格內操作按鈕尺寸與配色 (對齊左圖) */
.action-btn-group .btn,
.action-btn-group button,
td .btn-sm {
    padding: 4px 10px !important;
    font-size: 0.85rem !important;
    line-height: 1.2 !important;
    border-radius: 4px !important;
    border: none !important;
    color: #ffffff !important;
    cursor: pointer;
    font-weight: bold;
}

/* 明細(藍)、修改(綠)、刪除(紅) */
.btn-detail, .btn-info   { background-color: #2563eb !important; }
.btn-edit, .btn-success   { background-color: #16a34a !important; }
.btn-delete, .btn-danger { background-color: #dc2626 !important; }

.btn-detail:hover { background-color: #1d4ed8 !important; }
.btn-edit:hover   { background-color: #15803d !important; }
.btn-delete:hover { background-color: #b91c1c !important; }


/* --------------------------------------------------------------------------
   Maintenance Record 標籤按鈕專用樣式 (非 Hardcode，具備主題延伸性)
   -------------------------------------------------------------------------- */

/* 1. 按鈕包裹容器：維持彈性排列與適當間距 */
.maintenance-log-container {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem 0.375rem; /* 上下與左右邊距，隨文字尺寸自適應 */
    width: 100%;
}

/* 2. Log 藍色按鈕本體：透過邊距自適應高度，並與既有按鈕樣式整合 */
.btn-log-tag {
    /* 顏色直接繼承系統 CSS 變數 (支援 Light/Dark Theme 轉換) */
    background-color: var(--color-primary) !important;
    color: var(--text-on-primary, #ffffff) !important;
    
    /* 縮減上下內邊距 (Padding) 以降低按鈕高度，左右維持呼吸空間 */
    padding: 0.15rem 0.5rem !important;
    
    /* 使用 em/rem 自適應比例，不設定固定 height/line-height */
    font-size: 0.8125rem !important; 
    line-height: 1.25 !important;
    height: auto !important;
    
    border-radius: 4px;
    border: none;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

.btn-log-tag:hover {
    background-color: var(--color-primary-hover) !important;
    opacity: 0.9;
}

/* --------------------------------------------------------------------------
   Detail Modal & Table Utilities
   -------------------------------------------------------------------------- */
.detail-label-col {
    padding: 0.5rem 0.75rem;
    font-weight: bold;
    border-bottom: 1px solid var(--border-color);
    width: 25%;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.detail-value-col {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    white-space: pre-wrap;
    color: var(--text-primary);
}

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

/* 維修紀錄標籤容器與按鈕 */
.maint-log-tags-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem; /* 使用 rem 控制按鈕之間的自適應間距 */
}

.btn-log-tag {
    background-color: var(--color-primary);
    color: var(--text-on-primary, #ffffff);
    padding: 0.2rem 0.55rem;     /* 靈活的內邊距，降低按鈕高度 */
    font-size: 0.8125rem;         /* 自適應字體大小 */
    line-height: 1.25;
    border-radius: 4px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

.btn-log-tag:hover {
    background-color: var(--color-primary-hover);
    opacity: 0.9;
}



/* 1. 隱藏 <a> 標籤底線，改為 inline-block 以利精確控制容器 */
.detail-photo-link {
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
    display: inline-block;
    cursor: pointer;
}

.detail-photo-link:hover,
.detail-photo-link:focus,
.detail-photo-link:active {
    text-decoration: none !important;
}

/* 2. 控制圖片最大尺寸與邊框樣式 */
.detail-photo-img {
    max-width: 100%;             /* 限制最大寬度不超過父容器 */
    max-height: 180px;           /* 限制最大高度，避免圖檔太高撐爆表格 */
    width: auto;                 /* 依比例自動調整寬度 */
    height: auto;                /* 依比例自動調整高度 */
    object-fit: contain;         /* 保持原圖比例不變形 */
    display: block;              /* 消除 img 預設底部的微小空隙 */
    border: 1px solid var(--border-color, #ccc);
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover 時微幅放大增強互動感 */
.detail-photo-link:hover .detail-photo-img {
    transform: scale(1.02);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* --------------------------------------------------------------------------
   Maintenance Record 多標籤彈性容器 (避免 Hardcode 樣式)
   -------------------------------------------------------------------------- */

/* 按鈕包裹容器：自動換行並靠 CSS 變數控制彈性間距 */
.maint-log-tags-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem; /* 上下與左右一律以 rem 彈性分離，不需硬寫 margin */
    width: 100%;
}

/* 覆寫與修正 Log 按鈕樣式 */
.btn-log-tag {
    /* 重置大按鈕預設值 */
    height: auto !important;
    min-height: 0 !important;
    
    /* 使用 rem / em 相對單位自適應尺寸 */
    padding: 0.2rem 0.5rem !important;
    font-size: 0.8125rem !important;
    line-height: 1.25 !important;
    
    /* 轉為彈性盒，確保在容器內置中 */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    
    /* 取消元素本身的 margin，完全交給父容器的 gap 管理 */
    margin: 0 !important;
}


/* ==========================================================================
   Edit Log Page (edit_log.php) & Photo Modal Extensions
   ========================================================================== */

/* 訊息提示 */
.message-success {
    text-align: center;
    color: #27ae60;
    font-weight: bold;
    margin-bottom: 15px;
}

/* 區塊小標題 */
.edit-section-title {
    font-size: 1.15rem;
    font-weight: bold;
    color: var(--text-primary);
    margin: 24px 0 12px 0;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--border-color);
}

/* 1. 基礎資訊網格 layout (兩欄自適應) */
.base-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.base-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.base-item-full {
    grid-column: 1 / -1;
}

.base-item label {
    font-weight: bold;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.base-item input[type="text"],
.base-item input[type="date"],
.base-item input[type="datetime-local"],
.base-item select,
.base-item textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-input);
    border-radius: 4px;
    background-color: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.95rem;
    box-sizing: border-box;
}

.base-item input[readonly] {
    background-color: var(--bg-tertiary);
    cursor: not-allowed;
}

/* 2. 現場照片區塊 */
.photo-container {
    display: flex;
    gap: 20px;
    margin-top: 10px;
}

.photo-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--bg-secondary);
}

.photo-card span {
    font-weight: bold;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.photo-thumb {
    max-width: 180px;
    max-height: 120px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.photo-thumb:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.photo-no-img {
    color: var(--text-muted);
    font-size: 0.88rem;
    padding: 20px;
    border: 1px dashed var(--border-input);
    border-radius: 4px;
}

/* 3. 檢查與處理項目表格 */
.edit-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.edit-table th,
.edit-table td {
    border: 1px solid var(--border-color);
    padding: 8px 10px;
    vertical-align: middle;
}

.edit-table th {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: bold;
    text-align: center;
}

.edit-table .col-num { width: 50px; text-align: center; }
.edit-table .col-name { width: 180px; }
.edit-table .col-chk { width: 140px; text-align: center; }
.edit-table .col-act { }

.status-select {
    width: 100%;
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-input);
    font-weight: bold;
    background-color: var(--bg-card);
}

.status-green { color: #27ae60 !important; }
.status-red   { color: #e74c3c !important; }
.status-black { color: var(--text-primary) !important; }

.act-input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--border-input);
    border-radius: 4px;
    background-color: var(--bg-card);
    color: var(--text-primary);
    box-sizing: border-box;
}

/* 4. 底部按鈕組 */
.edit-btn-group {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
}

/* 5. 相片 Modal 大圖檢視 (Flexbox 中央對齊) */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 15px;
}

.modal-overlay.active {
    display: flex;
}

.modal-content-img {
    max-width: 85vw;
    max-height: 80vh;
    border-radius: 8px;
    box-shadow: var(--shadow-modal);
    object-fit: contain;
}

.modal-btn-close {
    padding: 8px 24px;
    background-color: #ffffff;
    color: #333333;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
}
.modal-btn-close:hover {
    background-color: #e2e8f0;
}

/* ==========================================================================
   #editModal 專屬彈窗修正 (解決 Fetch 成功卻不顯示的問題)
   ========================================================================== */
#editModal {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
    z-index: 8888 !important;
    justify-content: center !important;
    align-items: center !important;
}

#editModal.active {
    display: flex !important;
}

/* 確保內部 Modal 容器能正確置中、不爆頁，且可捲動 */
#editModal .modal-box,
#editModalContent {
    background: var(--bg-card, #ffffff);
    width: 90%;
    max-width: 900px;
    max-height: 85vh;
    border-radius: 8px;
    padding: 24px;
    box-shadow: var(--shadow-modal);
    position: relative;
    overflow-y: auto;
    color: var(--text-primary);
    box-sizing: border-box;
}

/* 修復 #editModal 尺寸為 0x0 的問題 */
#editModal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
    z-index: 8888 !important;
    justify-content: center !important;
    align-items: center !important;
}

/* 確保載入內容後有白色卡片背景與可捲動區域 */
#editModalBody {
    background: var(--bg-card, #ffffff);
    color: var(--text-primary, #000000);
    padding: 24px;
    border-radius: 8px;
    max-width: 900px;
    width: 98%;
    max-height: 85vh;
    overflow-y: auto;
/*    box-shadow: var(--shadow-modal); */
}

#editModal.modal-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

#editModal.modal-backdrop.active {
    display: flex;
}

#editModal .modal-content {
    background: #fff;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 8px;
    padding: 25px;
    position: relative;
}

#editModal .btn-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

/* 解耦後的提示文字樣式 */
.modal-loading-text {
    text-align: center;
    padding: 30px;
    color: #ffffff;
    font-size: 16px;
}

.modal-error-text {
    text-align: center;
    color: #ff6b6b;
    padding: 20px;
}

/* ==========================================================================
   查詢記錄子頁籤 Latch 綠色鎖定狀態 (強制最高權重覆寫)
   ========================================================================== */

/* 1. 淺色模式 (Light Theme) 下點亮的按鈕 */
body .sub-btn-group .btn-primary.active,
body .sub-btn-group button.btn-primary.active,
.sub-btn-group .btn-primary.active {
    background-color: #16a34a !important; /* 明亮綠色 */
    background: #16a34a !important;
    border-color: #15803d !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.35) !important;
}

body .sub-btn-group .btn-primary.active:hover,
.sub-btn-group .btn-primary.active:hover {
    background-color: #15803d !important;
    background: #15803d !important;
}

/* 2. 深色模式 (Dark Theme) 下點亮按鈕 */
[data-theme="dark"] body .sub-btn-group .btn-primary.active,
[data-theme="dark"] .sub-btn-group .btn-primary.active {
    background-color: #059669 !important; /* 深色翡翠綠 */
    background: #059669 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.4) !important;
}

[data-theme="dark"] body .sub-btn-group .btn-primary.active:hover,
[data-theme="dark"] .sub-btn-group .btn-primary.active:hover {
    background-color: #047857 !important;
    background: #047857 !important;
}

/* ==========================================================================
   無資料提示訊息解耦樣式
   ========================================================================== */
.no-data-message {
    text-align: center !important;
    padding: 20px !important;
/*    color: var(--text-muted, var(--text-primary)) !important;  */
    color: #dc3545;
    font-style: italic;
}

/* ==========================================================================
   動態表格完全解耦樣式 (支援 Light & Dark Theme)
   ========================================================================== */
.report-table {
    width: 100% !important;
    border-collapse: collapse !important;
    text-align: center !important;
}

.report-table thead tr.table-header-row,
.report-table thead {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.report-table th.report-th {
    padding: 8px !important;
    border: 1px solid var(--border-color) !important;
    font-weight: bold !important;
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.report-table td.report-td {
    padding: 6px !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* ==========================================================================
   表格資料行與內部元件完全解耦樣式
   ========================================================================== */

/* 已經透過前面定義的 .report-td 處理了 padding 與邊框 */

/* 置中且自動換行的彈性盒 */
.flex-center-wrap {
    display: flex !important;
    gap: 4px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

/* 置中的單行彈性盒 (用於操作按鈕) */
.flex-center-row {
    display: flex !important;
    gap: 4px !important;
    justify-content: center !important;
    align-items: center !important;
}

/* 無記錄時的佔位文字色彩 (自動適應深淺色主題) */
.text-muted-custom {
    color: var(--text-muted, #888) !important;
}

.pns-text-center { text-align: center !important; }
.text-danger-custom { color: var(--danger-color, #e03131) !important; }

/* ==========================================================================
   pns.js 徹底解耦後的 CSS 樣式補充
   ========================================================================== */

/* 通用提示與色彩 */
.pns-text-center { text-align: center !important; }
.text-danger-custom { color: var(--danger-color, #e03131) !important; }
.text-success-custom { color: var(--success-color, #2b8a3e) !important; }
.text-muted-custom { color: var(--text-muted, #888) !important; }
.font-weight-bold { font-weight: bold !important; }

/* 確認 Modal 摘要面板 */
.confirm-summary-box {
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
    padding: 10px !important;
    color: var(--text-primary) !important;
}
.confirm-summary-hr {
    margin: 12px 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--border-color, #eee) !important;
}
.confirm-photo-prompt {
    color: var(--primary-color, #0056b3) !important;
    font-weight: bold !important;
}

/* 詳細資料 Modal 內部表格 */
.modal-center-msg {
    text-align: center !important;
    padding: 20px !important;
}
.detail-main-table {
    width: 100% !important;
    border-collapse: collapse !important;
    text-align: left !important;
    color: var(--text-primary) !important;
}
.detail-colspan-cell {
    padding: 10px 0 5px 0 !important;
}
.detail-section-title {
    font-weight: bold !important;
    padding: 8px !important;
    background-color: var(--bg-secondary, #e9ecef) !important;
    border-radius: 4px !important;
    margin-bottom: 8px !important;
    color: var(--text-primary) !important;
}
.detail-sub-table {
    width: 100% !important;
    border-collapse: collapse !important;
    text-align: center !important;
}
.detail-sub-header {
    background-color: var(--bg-secondary, #f1f3f5) !important;
    font-weight: bold !important;
    color: var(--text-primary) !important;
}
.detail-th-w25 { padding: 8px !important; border: 1px solid var(--border-color, #dee2e6) !important; width: 25% !important; }
.detail-th-w15 { padding: 8px 4px !important; border: 1px solid var(--border-color, #dee2e6) !important; width: 15% !important; white-space: nowrap !important; }
.detail-th-w60 { padding: 8px !important; border: 1px solid var(--border-color, #dee2e6) !important; width: 60% !important; }

.detail-sub-item-td {
    padding: 6px !important;
    border: 1px solid var(--border-color, #dee2e6) !important;
    font-weight: bold !important;
    background-color: var(--bg-tertiary, #fafafa) !important;
    color: var(--text-primary) !important;
}
.detail-sub-result-td {
    padding: 6px 4px !important;
    border: 1px solid var(--border-color, #dee2e6) !important;
    white-space: nowrap !important;
}
.detail-sub-action-td {
    padding: 6px !important;
    border: 1px solid var(--border-color, #dee2e6) !important;
    text-align: left !important;
    white-space: pre-wrap !important;
    color: var(--text-primary) !important;
}

.maint-footer-actions {
    text-align: center;
    margin-top: 25px;
    display: flex;
    gap: 15px;
    justify-content: center;
}

.maint-footer-actions .btn-maint-submit,
.maint-footer-actions .btn-maint-cancel {
    display: inline-block;
    width: auto;
    min-width: 120px;
    min-height: 42px;
    padding: 10px 24px;
    font-size: 1.15rem;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
}

.maint-footer-actions .btn-maint-cancel {
    background-color: #6c757d;
    color: #ffffff;
    border: none;
}


/* 表單內文字輸入框 */
.maint-table .input-action-text {
    width: 98%;
    padding: 6px;
    box-sizing: border-box;
}

/* ==========================================================================
   AGV Maintenance Scope Isolated Patch (Append to Bottom)
   ========================================================================== */

/* 1. 頂部欄位文字與排版修復 */
.maint-container .maint-form-grid {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 14px !important;
    gap: 12px !important;
    width: 100% !important;
}

.maint-container .maint-form-grid label {
    display: inline-block !important;
    width: 180px !important;
    min-width: 180px !important;
    font-weight: bold !important;
    color: var(--text-primary, #000000) !important;
    text-align: right !important;
    white-space: nowrap !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.maint-container .maint-form-grid input {
    flex: 1 !important;
    max-width: 500px !important;
    height: 38px !important;
    padding: 6px 12px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 2. 表格格線與內容顯示修復 */
.maint-container .maint-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-top: 20px !important;
    border: 1px solid var(--border-color, #e5e7eb) !important;
}

.maint-container .maint-table th,
.maint-container .maint-table td {
    border: 1px solid var(--border-color, #e5e7eb) !important;
    padding: 10px 8px !important;
    vertical-align: middle !important;
    color: var(--text-primary, #000000) !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 3. 底部按鈕尺寸保護 (防止擠壓變小) */
.maint-container .maint-footer-actions {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 20px !important;
    margin-top: 30px !important;
    width: 100% !important;
}

.maint-container .maint-footer-actions button,
.maint-container .maint-footer-actions input[type="submit"],
.maint-container .maint-footer-actions input[type="button"],
.maint-container .btn-maint-submit,
.maint-container .btn-maint-cancel {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 160px !important;
    min-width: 160px !important;
    height: 44px !important;
    min-height: 44px !important;
    flex-shrink: 0 !important;
    padding: 0 20px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

/* ==========================================================================
   AGV Maintenance Form Precise Fix Patch
   ========================================================================== */

/* 1. 解決 i18n 標籤文字塌陷問題 (label 180x0) */
.maint-form-grid label {
    display: inline-block !important;
    width: 180px !important;
    min-width: 180px !important;
    min-height: 24px !important;        /* 強制給予最小高度，防止 i18n 未載入時塌陷 */
    line-height: 38px !important;        /* 垂直對齊 input 欄位高度 */
    font-weight: bold !important;
    color: var(--text-primary, #000000) !important;
    text-align: right !important;
    white-space: nowrap !important;
    visibility: visible !important;
}

/* 2. 解決 Flex 下部按鈕被壓縮成極小的問題 */
.maint-footer-actions {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 20px !important;
    margin-top: 30px !important;
    width: 100% !important;
}

.maint-footer-actions button,
.maint-footer-actions input[type="submit"],
.maint-footer-actions input[type="button"],
.btn-maint-submit,
.btn-maint-cancel {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 160px !important;
    min-width: 160px !important;          /* 強制最小寬度 */
    height: 44px !important;
    min-height: 44px !important;          /* 強制最小高度 */
    flex-shrink: 0 !important;            /* 關鍵：禁止 Flex 彈性壓縮 */
    padding: 0 20px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

/* 檢查項目欄位最小寬度與自動自適應 */
.maint-table .col-item,
.maint-table .col-item-td {
    white-space: nowrap;            /* 強制文字不折行 */
    min-width: max-content;         /* 最小寬度依據最長文字內容自動調適 */
    padding: 8px 12px;              /* 保留適當內邊距 */
}

#confirmModal {
    z-index: 10000 !important; /* 確保高於 editModal 的 9999 */
}

.btn-primary, .btn-secondary, .form-actions-center button {
    white-space: normal;
    word-break: break-word; /* 避免超長英文單字溢出按鈕邊界 */
}



/* 訊息提示 */
.alert-message.success {
    text-align: center;
    color: #27ae60;
    font-weight: bold;
    margin-bottom: 15px;
}

/* 故障類別下拉選單 */
.select-fault {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
}

/* 表單單欄/全寬設定 */
.base-item.full-width {
    grid-column: 1 / -1;
}

/* 照片上傳控制區 */
.photo-file-wrapper {
    margin-top: 8px;
}

.photo-file-input {
    font-size: 12px;
    width: 100%;
}

/* 表單操作按鈕區塊 */
.form-actions-center {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    justify-content: center;
}

/* ==========================================================================
   Maintenance Image Upload & Preview Styles
   ========================================================================== */
.img-preview-hidden {
    display: none;
    max-width: 200px;
    margin-top: 10px;
}


/* css/create_incident.css */

.report-form-container {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
}

.image-preview-box {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.preview-item img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #ccc;
}

.form-grid {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
}

.form-grid label {
    margin-bottom: 5px;
    font-weight: bold;
}

.btn-finish-wrapper {
    text-align: center;
    margin-top: 25px;
}

.btn-finish-size {
    padding: 10px 30px;
    font-size: 1.1rem;
}

.modal-btn-group {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

.btn-confirm-bg {
    background-color: #28a745;
}

.btn-cancel-bg {
    background-color: #6c757d;
}

/* ---------------------------------------------------------------------------
 * Pagination Link Styles (CSS 完全解耦)
 * --------------------------------------------------------------------------- */
.pagination-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 15px;
    margin-bottom: 15px;
}

.pagination-info {
    font-size: 0.9rem;
    color: #6c757d;
}

.pagination-links-group {
    display: flex;
    align-items: center;
    gap: 8px; /* 控制超連結之間的間距 */
}

.page-link-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    color: #007bff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

.page-link-item:hover:not(.disabled):not(.active) {
    background-color: #e9ecef;
    border-color: #dee2e6;
    color: #0056b3;
    text-decoration: none;
}

.page-link-item.active {
    background-color: #007bff;
    border-color: #007bff;
    color: #ffffff;
    cursor: default;
}

.page-link-item.disabled {
    color: #6c757d;
    border-color: #dee2e6;
    opacity: 0.5;
    cursor: not-allowed;
}

/* Modal 通用狀態訊息 */
.detail-status-msg {
    text-align: center;
    padding: 20px;
    margin: 0;
}

.detail-status-loading {
    color: #555555;
}

.detail-status-error {
    color: #dc3545;
}

/* Modal 控制項隱藏與顯示 Class */
.d-none {
    display: none !important;
}

#detailModal {
    display: none;
}

/* 開啟狀態：請勿使用 !important，讓 closeDetailModal() 的 style.display='none' 可以成功覆蓋關閉 */
#detailModal.active {
    display: flex;
}

/* 權限停用按鈕樣式 */
.parts-tab-btn:disabled,
.parts-tab-btn.disabled {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    box-shadow: none !important;
}


/* 綠色按鈕基礎與切換樣式 */
.btn-success {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    color: #ffffff !important;
}

.btn-success:hover,
.btn-success:focus {
    background-color: #218838 !important;
    border-color: #1e7e34 !important;
}

.btn-success.active {
    background-color: #1e7e34 !important;
    border-color: #1c7430 !important;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2);
}

/* 頁籤按鈕統一尺寸與彈性佈局修正 */
.sub-btn-group .parts-tab-btn {
    flex: 1 1 auto !important;
    min-width: 140px !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* 綠色按鈕 (已申領紀錄專用) */
.parts-tab-btn.btn-success {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    color: #ffffff !important;
}

/* 綠色按鈕 (已申領紀錄專用 - 扁平現代化圓角) */
.parts-tab-btn.btn-success {
    background-color: #28a745 !important;
    border: 1px solid #28a745 !important;
    color: #ffffff !important;
    border-radius: 4px !important;
    box-shadow: none !important; /* 移除立體陰影 */
}

.parts-tab-btn.btn-success:hover {
    background-color: #218838 !important;
    border-color: #1e7e34 !important;
    box-shadow: none !important;
}

.parts-tab-btn.btn-success.active {
    background-color: #1e7e34 !important;
    border-color: #1c7430 !important;
    color: #ffffff !important;
    border-radius: 4px !important;
    box-shadow: none !important; /* 徹底消除立體方角內陰影 */
    outline: none !important;
}

/* 💡 強制修正：當頁籤按鈕被套用 disabled (權限不足) 時，一律強制壓成灰色 */
.parts-tab-btn:disabled,
.parts-tab-btn.disabled,
.sub-btn-group .parts-tab-btn:disabled,
.sub-btn-group .parts-tab-btn.disabled {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    box-shadow: none !important;
}