/* --- 桌面端：搜索表單 label 統一四個字寬度 --- */
form:not(#deleteForm):not(#completeForm):not(#updateForm):not(#remindForm):not(#quoteForm):not(#addBaojiaForm):not(#listBaojiaForm) label[for],
form[method="GET"] label,
form[method="get"] label,
.search-form label {
    display: inline-block !important;
    min-width: 4em !important;
    width: 4em !important;
    text-align: justify !important;
    text-align-last: justify !important;
    flex-shrink: 0 !important;
    margin-right: 6px !important;
    white-space: nowrap !important;
}

/* --- 桌面端：搜索表單及容器靠左 --- */
form[method="GET"],
form[method="get"],
.search-form {
    text-align: left !important;
}
form[method="GET"] .form-row,
form[method="get"] .form-row,
.search-form .form-row {
    justify-content: flex-start !important;
}
form[method="GET"] .form-group,
form[method="get"] .form-group,
.search-form .form-group {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* --- 桌面端：搜索切換按鈕靠左 --- */
.search-toggle-btn {
    display: block !important;
    text-align: left !important;
    width: fit-content !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* =============================================
   HIPON ERP - 移動端響應式共享樣式
   適配手機使用，不影響桌面端功能
   打印時不應用移動端樣式
   ============================================= */

/* --- 打印模式不應用移動端樣式 --- */
body.print-mode {
    /* 重置所有表格样式为默认 */
}
body.print-mode table,
body.print-mode table thead,
body.print-mode table tbody,
body.print-mode table tbody tr,
body.print-mode table td,
body.print-mode table th {
    display: table !important;
}
body.print-mode table thead {
    display: table-header-group !important;
}
body.print-mode table tbody {
    display: table-row-group !important;
}
body.print-mode table tbody tr {
    display: table-row !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
}
body.print-mode table td,
body.print-mode table th {
    display: table-cell !important;
    padding: 8px !important;
    border: 1px solid #ddd !important;
    background: none !important;
}
body.print-mode table td::before {
    display: none !important;
}
body.print-mode .container,
body.print-mode .shell {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

/* --- 全局基礎 --- */
@media screen and (max-width: 768px) {
    * {
        -webkit-tap-highlight-color: transparent;
    }
    html, body {
        font-size: 14px;
        -webkit-text-size-adjust: 100%;
        height: auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        touch-action: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    body {
        padding: 0 !important;
        min-height: 100vh;
        min-height: 100dvh;
        height: auto !important;
    }

    /* --- 容器：去掉圓角和陰影，全寬 --- */
    .container, .shell {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
        backdrop-filter: none !important;
        min-height: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* --- Header --- */
    .header {
        padding: 16px !important;
        border-radius: 0 !important;
    }
    .header h1 {
        font-size: 18px !important;
        margin-bottom: 4px !important;
    }
    .header p {
        font-size: 12px !important;
    }

    /* --- Content --- */
    .content {
        padding: 12px !important;
        width: 100% !important;
    }

    /* --- Section --- */
    .section {
        border-radius: 8px !important;
        padding: 10px !important;
        margin-bottom: 10px !important;
    }
    .section h2 {
        font-size: 14px !important;
        margin-bottom: 6px !important;
    }

    /* --- 表單行和內聯欄位：改為垂直堆疊 --- */
    .form-row {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .inline-field {
        width: 100% !important;
        min-width: 0 !important;
        min-height: auto !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
    }
    .inline-field label {
        font-size: 12px !important;
        margin-bottom: 2px !important;
        white-space: normal !important;
    }

    /* --- 輸入框 --- */
    input[type="text"],
    input[type="number"],
    input[type="date"],
    input[type="password"],
    input[type="file"],
    select,
    textarea {
        width: 100% !important;
        padding: 10px 12px !important;
        font-size: 16px !important; /* 防止 iOS 自動縮放 */
        min-height: 44px !important;
        box-sizing: border-box !important;
        border-radius: 8px !important;
    }
    /* 表格內的輸入框 - 占满剩余空间 */
    table td input[type="text"],
    table td input[type="number"],
    table td input[type="date"],
    table td select,
    table td textarea,
    table tbody td input,
    .table-container td input {
        flex: 1 1 auto !important;
        min-width: 50px !important;
        width: 0 !important;
        max-width: none !important;
        min-height: 36px !important;
        padding: 8px 10px !important;
        font-size: 14px !important;
        border: 1px solid #ccc !important;
        border-radius: 4px !important;
        background: #fff !important;
        box-sizing: border-box !important;
        display: inline-block !important;
        color: #333 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    textarea {
        min-height: 80px !important;
        height: auto !important;
    }

    /* --- 按鈕：加大觸控區域 --- */
    .btn, button {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 10px 16px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
    }
    .btn-sm, .btn-sm button {
        min-height: 36px !important;
        padding: 6px 12px !important;
        font-size: 12px !important;
    }

    /* --- 表格容器：卡片列表不需要橫向滾動 --- */
    .table-container {
        width: 100% !important;
        overflow: visible !important;
        border-radius: 8px !important;
        max-height: none !important;
        display: block !important;
        padding: 0 4px !important;
        box-sizing: border-box !important;
    }
    .table-container .table-scroll {
        overflow: visible !important;
    }

    /* --- 表格：在手機上轉為卡片列表 --- */
    table {
        font-size: 12px !important;
        display: block !important;
        width: 100% !important;
    }
    table thead {
        display: none !important;
    }
    table tbody {
        display: block !important;
        width: 100% !important;
    }
    table tbody tr {
        display: block !important;
        width: 100% !important;
        margin-bottom: 10px !important;
        padding: 12px !important;
        background: #fff !important;
        border-radius: 10px !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
        border: 1px solid #f0f0f0 !important;
        position: relative !important;
        box-sizing: border-box !important;
    }
    /* 隱藏第一列（radio button選擇列） */
    table th:first-child,
    table td:first-child {
        display: none !important;
    }
    table tbody tr:nth-child(even) {
        background: #fff !important;
    }
    table tbody tr:hover,
    table tbody tr.active-row,
    table tbody tr:hover td {
        background: #f0f7ff !important;
    }
    table td {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: center !important;
        padding: 10px 0 !important;
        border: none !important;
        font-size: 15px !important;
        white-space: normal !important;
        word-break: break-all !important;
        text-align: left !important;
        min-height: 44px !important;
        line-height: 1.5 !important;
        width: 100% !important;
    }
    /* 确保纯文本内容在 td 中正确显示 */
    table td input {
        flex: 1 !important;
    }
    /* 确保日期列等纯文本内容正确显示 */
    table td.date-col {
        color: #333 !important;
    }
    table td:not(:has(input)):not(:has(select)):not(:has(textarea)) {
        flex-wrap: wrap !important;
    }
    /* 每個 td 前面自動插入表頭文字（用 CSS attr 偽元素） */
    table td::before {
        content: attr(data-label) '：' !important;
        font-weight: 700 !important;
        color: #444 !important;
        font-size: 13px !important;
        flex: 0 0 4.5em !important;
        min-width: 4.5em !important;
        max-width: 4.5em !important;
        margin-right: 6px !important;
        text-align: left !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    /* 當 data-label 為空時，不顯示冒號 */
    table td:not([data-label]):empty::before,
    table td[data-label=""]::before {
        content: none !important;
        display: none !important;
    }
    /* th 仍然隱藏，但保留給排序等 JS 功能 */
    th {
        display: none !important;
    }
    /* 處理 colspan 的 td（如"載入中"、"暫無數據"） */
    table td[colspan] {
        display: block !important;
        text-align: center !important;
        padding: 20px !important;
        color: #999 !important;
    }
    table td[colspan]::before {
        display: none !important;
    }

    /* --- 表格內的編輯輸入框 --- */
    /* 表格輸入框樣式已在上方定義，此處無需重複 */
    .item-editable-input,
    .item-quantity-input {
        min-width: 50px !important;
        width: 70px !important;
        padding: 4px !important;
        font-size: 13px !important;
    }

    /* --- 返回主頁鏈接 --- */
    .back-home-link {
        padding: 8px 14px !important;
        font-size: 13px !important;
    }

    /* --- 登入頁 .card 和 修改密碼 .card --- */
    .card {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        padding: 24px 20px !important;
        margin: 0 !important;
        box-shadow: none !important;
        min-height: 100vh;
        min-height: 100dvh;
    }

    /* --- Modal / 彈窗 --- */
    .modal-overlay {
        padding: 16px !important;
        align-items: flex-end !important;
    }
    .modal, .confirm-modal, .custom-confirm-dialog {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 16px 16px 0 0 !important;
        max-height: 85vh !important;
        max-height: 85dvh !important;
        overflow-y: auto !important;
        padding: 20px 16px !important;
        margin: 0 !important;
    }
    .modal-grid {
        grid-template-columns: 1fr !important;
    }
    .modal-actions, .confirm-modal-buttons {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .modal-actions .btn, .confirm-modal-buttons .btn,
    .modal-actions .btn-cancel, .confirm-modal-buttons .btn-cancel,
    .modal-actions .btn-confirm, .confirm-modal-buttons .btn-confirm {
        width: 100% !important;
    }

    /* --- Alert / 提示 --- */
    .alert {
        padding: 10px 14px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
    }
    .fixed-alerts-container {
        left: 16px !important;
        right: 16px !important;
        transform: none !important;
        width: auto !important;
    }

    /* --- 首頁 (index.php) 特殊處理 --- */
    #indexPageBody {
        padding: 0 !important;
    }
    .grid {
        gap: 10px !important;
        padding: 8px !important;
    }
    .grid-favorite {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .grid-all {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .card {
        padding: 14px 12px 16px !important;
        border-radius: 14px !important;
        min-height: auto !important;
    }
    .card h3 {
        font-size: 14px !important;
        margin-bottom: 6px !important;
    }
    .card p {
        font-size: 11px !important;
        line-height: 1.3 !important;
    }
    .card-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 18px !important;
    }
    .topbar {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .section-header {
        margin-bottom: 12px !important;
    }
    .section-title {
        font-size: 16px !important;
    }

    /* --- 雙欄布局改為單欄 --- */
    .layout {
        grid-template-columns: 1fr !important;
    }
    .form-grid {
        grid-template-columns: 1fr !important;
    }
    .grid2, .perm-scope .grid2 {
        grid-template-columns: 1fr !important;
    }
    .perm-scope .layout {
        grid-template-columns: 1fr !important;
    }
    .two-col {
        flex-direction: column !important;
    }
    .col-right {
        min-width: 0 !important;
    }

    /* --- Panel 面板 --- */
    .panel-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .panel-header .toolbar {
        width: 100% !important;
    }
    .panel-body {
        padding: 8px !important;
    }

    /* --- Tabs --- */
    .tabs {
        gap: 6px !important;
    }
    .tab {
        padding: 8px 14px !important;
        font-size: 13px !important;
        flex: 1 !important;
        text-align: center !important;
    }

    /* --- 圖片縮略圖 --- */
    .img-thumb {
        width: 100% !important;
        height: auto !important;
        max-width: 300px !important;
    }
    .img-grid {
        grid-template-columns: 1fr !important;
    }

    /* --- Header 內的 flex 排版 --- */
    .header > div,
    .header > div > div {
        gap: 8px !important;
    }
    .header .badge, .header .pill {
        font-size: 11px !important;
        padding: 4px 8px !important;
    }

    /* --- 隱藏桌面端返回主頁重複按鈕（保留 .back-home-link） --- */
    .header a[style*="background:#dc2626"],
    .header a[style*="background: #dc2626"] {
        display: none !important;
    }

    /* --- 排程頁面 (hschedule.php) 日期條 --- */
    .date-strip {
        gap: 6px !important;
        grid-template-columns: repeat(7, 1fr) !important;
    }
    .date-pill {
        padding: 6px 4px !important;
        border-radius: 10px !important;
    }
    .date-pill .day {
        font-size: 15px !important;
    }
    .date-pill .weekday {
        font-size: 10px !important;
    }

    /* --- 圖片預覽 --- */
    .img-preview-container {
        width: 95vw !important;
        height: 70vh !important;
        height: 70dvh !important;
    }
    .img-preview-controls {
        bottom: 10px !important;
        padding: 8px 14px !important;
        gap: 8px !important;
    }
    .img-preview-controls button {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
    .img-preview-close {
        width: 36px !important;
        height: 36px !important;
        top: 10px !important;
        right: 10px !important;
    }

    /* --- 營業查詢 (qsale.php) --- */
    .chart-container {
        height: 280px !important;
        padding: 12px !important;
    }
    .view-toggle {
        flex-direction: column !important;
    }
    .view-btn {
        text-align: center !important;
    }
    .qsaleHeaderCenter {
        text-align: left !important;
    }

    /* --- 分頁 --- */
    .pagination {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    .pagination a, .pagination span {
        padding: 8px 10px !important;
        font-size: 13px !important;
    }

    /* --- 搜索表單：label 統一四個字寬度，輸入框靠左對齊 --- */
    form:not(#deleteForm):not(#completeForm):not(#updateForm):not(#remindForm):not(#quoteForm):not(#addBaojiaForm):not(#listBaojiaForm) .form-group label,
    form:not(#deleteForm):not(#completeForm):not(#updateForm):not(#remindForm):not(#quoteForm):not(#addBaojiaForm):not(#listBaojiaForm) .inline-field label,
    form[method="GET"] label,
    form[method="get"] label,
    .search-form label {
        display: inline-block !important;
        min-width: 4em !important;
        width: 4em !important;
        text-align: justify !important;
        text-align-last: justify !important;
        flex-shrink: 0 !important;
        margin-right: 6px !important;
        white-space: nowrap !important;
    }
    .search-form {
        flex-direction: column !important;
        text-align: left !important;
    }
    .search-form .form-group {
        min-width: 0 !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }
    form[method="GET"],
    form[method="get"] {
        text-align: left !important;
    }
    form[method="GET"] .form-row,
    form[method="get"] .form-row {
        justify-content: flex-start !important;
    }

    /* --- 搜索切換按鈕靠左 --- */
    .search-toggle-btn {
        display: block !important;
        text-align: left !important;
        width: fit-content !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* --- 確認對話框動畫 --- */
    .confirm-modal-overlay {
        padding: 16px !important;
        align-items: flex-end !important;
    }

    /* --- 軟件上傳 --- */
    .field {
        min-width: 0 !important;
        flex: 1 1 100% !important;
    }
    .row {
        flex-direction: column !important;
    }

    /* --- 明細列表中的操作按鈕 --- */
    table .remove-item-btn,
    table .btn-danger {
        min-height: 32px !important;
        padding: 4px 10px !important;
        font-size: 11px !important;
    }

    /* --- 隱藏桌面端 body::before 紋理（節省渲染） --- */
    body::before {
        display: none !important;
    }

    /* --- 修復權限頁面列表高度 --- */
    .perm-scope .list {
        max-height: 40vh !important;
        max-height: 40dvh !important;
    }

    /* --- 首頁格言表格保持原樣 --- */
    #indexPageBody table {
        display: table !important;
    }

    /* --- 手機端隱藏提醒訂貨彈窗 --- */
    #pendingStockModal {
        display: none !important;
    }
    #indexPageBody table thead {
        display: table-header-group !important;
    }
    #indexPageBody table tbody {
        display: table-row-group !important;
    }
    #indexPageBody table tbody tr {
        display: table-row !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        background: none !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
    }
    #indexPageBody table td,
    #indexPageBody table th {
        display: table-cell !important;
        padding: 8px 6px !important;
        border: inherit !important;
    }
    #indexPageBody table td::before {
        display: none !important;
    }

    /* --- 打印預覽頁面保持表格原樣 --- */
    body table[style*="border-collapse"],
    .print-content table {
        display: table !important;
    }
    body table[style*="border-collapse"] thead,
    .print-content table thead {
        display: table-header-group !important;
    }
    body table[style*="border-collapse"] tbody,
    .print-content table tbody {
        display: table-row-group !important;
    }
    body table[style*="border-collapse"] tbody tr,
    .print-content table tbody tr {
        display: table-row !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        background: none !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
    }
    body table[style*="border-collapse"] td,
    body table[style*="border-collapse"] th,
    .print-content table td,
    .print-content table th {
        display: table-cell !important;
        padding: 8px 6px !important;
        border: inherit !important;
    }
    body table[style*="border-collapse"] td::before,
    .print-content table td::before {
        display: none !important;
    }
}

/* --- 移動端表格 data-label 自動注入腳本 --- */
/* 只在手機端（<768px）執行，桌面端不影響 */
@media (max-width: 768px) {
    /* 使用 CSS custom property + JS 不可行，所以放在 HTML 中注入 */
}