/* ==========================================================================
   手機版 1／4：版面骨架
   側邊選單改為底部導覽列、頁首壓縮、觸控互動、狀態訊息。

   手機版（≤768px）共四個檔案，全部須排在 style.css、leave-king.css 之後：
     mobile-shell.css    骨架、頁首、觸控、狀態訊息
     mobile-controls.css 搜尋／篩選／日期／統計卡
     mobile-tables.css   寬表格轉卡片
     mobile-king.css     請假王排行榜與明細彈窗
     mobile-compare.css  出缺勤比對
   ========================================================================== */

@media (max-width: 768px) {

    /* ----------------------------------------------------------------------
       版面骨架
       ---------------------------------------------------------------------- */
    body {
        display: block;
        padding: 0;
    }

    /* 側邊選單 → 底部導覽列（含收合狀態，手機版一律固定在底部），
       內容區因此取回整個螢幕寬度（原本被選單吃掉 80px） */
    .sidebar,
    .sidebar.collapsed {
        width: 100%;
        min-height: 0;
        top: auto;
        bottom: 0;
        left: 0;
        display: flex;
        border-right: none;
        border-top: var(--border-width) solid var(--border-color);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* 底部列沒有空間放標題，收合鈕在此也失去意義 */
    .sidebar-header,
    .sidebar-toggle {
        display: none;
    }

    .sidebar-menu {
        display: flex;
        width: 100%;
    }

    .sidebar-menu li {
        flex: 1;
        border-bottom: none;
        border-right: 3px solid var(--border-color);
    }

    .sidebar-menu li:last-child {
        border-right: none;
    }

    .menu-item,
    .sidebar.collapsed .menu-item {
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        padding: 8px 4px;
        text-align: center;
    }

    /* 桌機的 hover 位移在觸控裝置只會造成點擊時跳動 */
    .menu-item:hover,
    .sidebar.collapsed .menu-item:hover {
        padding-left: 4px;
    }

    /* 選中指示器由左側直條改為底部橫條 */
    .menu-item.active::before {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        height: 5px;
    }

    .menu-icon {
        font-size: 18px;
    }

    .menu-text {
        font-size: 10px;
        letter-spacing: 0;
        white-space: nowrap;
    }

    .main-wrapper,
    .sidebar.collapsed ~ .main-wrapper {
        margin-left: 0;
        padding: 10px 10px 0;
    }

    /* 預留底部導覽列高度，最後一筆資料不會被遮住 */
    .page-content.active {
        padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    }

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

    .container:hover {
        transform: none;
        box-shadow: 3px 3px 0 var(--border-color);
    }

    /* ----------------------------------------------------------------------
       頁首
       ---------------------------------------------------------------------- */
    .header {
        padding: 14px;
        margin: -3px -3px 0;
        transform: rotate(0);
    }

    .header h1 {
        font-size: 20px;
        letter-spacing: -0.5px;
        margin-bottom: 2px;
    }

    .header p {
        font-size: 10px;
        letter-spacing: 0;
    }

    /* ----------------------------------------------------------------------
       觸控裝置統一取消 hover/active 位移
       （手指點擊時位移會讓版面抽動，也容易誤觸）
       ---------------------------------------------------------------------- */
    .search-box input:focus,
    .filter-group select:hover,
    .filter-group select:focus,
    .date-input:hover,
    .date-input:focus,
    .date-btn:hover,
    .date-btn:active,
    .stat-card:hover,
    .stat-card:active,
    .leave-type:hover,
    .message-link:hover,
    .message-link:active,
    .upload-card:hover,
    .upload-btn:hover,
    .upload-btn:active,
    .filter-reset-btn:hover,
    .filter-reset-btn:active,
    .stat-badge:hover,
    .stat-badge:active,
    .stat-badge.active,
    .king-type-tab:hover,
    .king-type-tab:active,
    .king-nav-btn:hover:not(:disabled),
    .king-nav-btn:active:not(:disabled),
    .king-reset-btn:hover:not(:disabled),
    .king-reset-btn:active:not(:disabled),
    .king-detail-btn:hover,
    .king-detail-btn:active,
    .king-modal-close:hover,
    .king-modal-close:active,
    .podium-card:hover,
    .podium-card.rank-1:hover {
        transform: none;
    }

    /* ----------------------------------------------------------------------
       狀態訊息
       ---------------------------------------------------------------------- */
    .loading,
    .error,
    .no-data {
        padding: 32px 16px;
        font-size: 14px;
        letter-spacing: 1px;
    }

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

    /* 日曆彈窗在窄螢幕不要溢出畫面 */
    .flatpickr-calendar {
        max-width: calc(100vw - 24px);
    }
}

@media (max-width: 380px) {
    .header h1 {
        font-size: 18px;
    }
}