/* ==========================================================================
   手機版 4／4-b：出缺勤比對（上傳、開始比對、結果統計、結果篩選）
   比對結果表本身的卡片版面在 mobile-tables.css。
   載入順序說明見 mobile-shell.css。
   ========================================================================== */

@media (max-width: 768px) {

    /* ----------------------------------------------------------------------
       Excel 上傳
       ---------------------------------------------------------------------- */
    .upload-section {
        padding: 12px;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .upload-card {
        border-width: 3px;
        box-shadow: 3px 3px 0 var(--border-color);
    }

    .upload-header {
        padding: 12px;
    }

    .upload-header h3 {
        margin-bottom: 4px;
        font-size: 14px;
        letter-spacing: 0;
    }

    .upload-header p {
        font-size: 11px;
    }

    /* 手機不需要 250px 高的拖曳區，改為點擊為主的緊湊版 */
    .upload-area {
        min-height: 0;
        padding: 16px;
        margin: 12px;
        border-width: 3px;
    }

    .upload-area:hover {
        transform: none;
    }

    .upload-icon {
        margin-bottom: 6px;
        font-size: 32px;
    }

    .upload-text {
        margin-bottom: 10px;
        font-size: 12px;
        letter-spacing: 0;
    }

    .upload-btn {
        padding: 9px 16px;
        font-size: 12px;
        letter-spacing: 0.5px;
        border-width: 3px;
        box-shadow: 2px 2px 0 var(--border-color);
    }

    .file-info {
        padding: 10px 12px;
        font-size: 11px;
        border-top-width: 3px;
    }

    .compare-button-section {
        padding: 0 12px 12px;
    }

    .compare-btn {
        width: 100%;
        padding: 13px 20px;
        font-size: 15px;
        border-width: 3px;
        box-shadow: 3px 3px 0 var(--border-color);
    }

    .compare-btn:hover,
    .compare-btn:active {
        transform: none;
        box-shadow: 3px 3px 0 var(--border-color);
    }

    /* ----------------------------------------------------------------------
       比對結果標題與狀態統計
       ---------------------------------------------------------------------- */
    .compare-results {
        padding: 12px;
    }

    .results-header {
        margin-bottom: 12px;
    }

    .results-header h3 {
        margin-bottom: 10px;
        font-size: 16px;
        letter-spacing: -0.5px;
    }

    /* 三個狀態統計徽章一列排滿 */
    .results-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .stat-badge {
        flex-direction: column;
        gap: 2px;
        padding: 8px 4px;
        font-size: 10px;
        letter-spacing: 0;
        text-align: center;
        border-width: 3px;
        box-shadow: 2px 2px 0 var(--border-color);
    }

    .stat-badge.active {
        outline-width: 3px;
        box-shadow: 2px 2px 0 var(--border-color);
    }

    .stat-badge.stat-match.active,
    .stat-badge.stat-mismatch.active,
    .stat-badge.stat-missing.active {
        outline-width: 3px;
    }

    .stat-badge.active::before {
        top: 3px;
        right: 4px;
        font-size: 9px;
    }

    .stat-badge strong {
        font-size: 17px;
    }

    /* ----------------------------------------------------------------------
       結果篩選器
       ---------------------------------------------------------------------- */
    .results-filters {
        padding: 12px;
    }

    /* 四個下拉排兩欄，日期範圍與清除鍵各佔一列 */
    .filter-group-results {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .filter-group-results select,
    .date-range-input {
        width: 100%;
        min-width: 0;
        padding: 9px 10px;
        font-size: 12px;
        letter-spacing: 0;
        border-width: 3px;
        box-shadow: 2px 2px 0 var(--border-color);
    }

    .filter-group-results select:hover,
    .filter-group-results select:focus,
    .date-range-input:hover,
    .date-range-input:focus {
        transform: none;
        box-shadow: 2px 2px 0 var(--border-color);
    }

    .date-range-input,
    .filter-group-results > .filter-reset-btn,
    #selectedDateDisplay {
        grid-column: 1 / -1;
    }

    .filter-reset-btn {
        padding: 9px 14px;
        font-size: 12px;
        letter-spacing: 0.5px;
        border-width: 3px;
        box-shadow: 2px 2px 0 var(--border-color);
    }

    /* 外層 .compare-results 已有內距，此處不再疊加 */
    .results-table-container {
        margin-top: 12px;
        padding: 0;
        overflow-x: visible;
    }
}