/* 響應式設計 (responsive.css) */

/* 漢堡選單按鈕 */
.menu-toggle {
    display: none;
    background: transparent;
    border: none;
    font-size: 24px;
    color: #003366;
    cursor: pointer;
    margin-right: 16px;
    padding: 0 8px;
    transition: transform 0.2s;
}

.menu-toggle:active {
    transform: scale(0.9);
}

/* 用於修正 header 空間 */
.header-left {
    display: flex;
    align-items: center;
}

/* 響應式文字切換 */
.mobile-text {
    display: none;
}
.desktop-text {
    display: inline;
}

@media (max-width: 768px) {
    .mobile-text {
        display: inline;
    }
    .desktop-text {
        display: none;
    }
    .menu-toggle {
        display: block;
    }
    
    /* 側邊欄變為滑動面板 */
    .sidebar {
        position: fixed;
        left: -280px; /* 預設收起 */
        top: 0;
        bottom: 0;
        width: 280px;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1000;
        box-shadow: 4px 0 25px rgba(0,0,0,0.5);
    }
    
    .sidebar.sidebar-open {
        left: 0;
    }
    
    /* 配合側邊欄收合，主容器撐開 */
    .main-wrapper {
        width: 100%;
    }
    
    /* 底部操作列滿版 */
    .fixed-bottom-bar {
        width: 100%;
        right: 0;
        left: 0;
        bottom: 0;
        border-radius: 0;
        padding: 12px 16px;
    }

    /* 遮罩層 (當 sidebar 打開時) */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0, 34, 68, 0.6); /* 品牌深色半透明 */
        backdrop-filter: blur(4px);
        z-index: 998;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    .sidebar-overlay.show {
        display: block;
        opacity: 1;
    }

    /* 頂部列精簡化 */
    .breadcrumb {
        display: none; /* 手機版隱藏麵包屑以節省空間 */
    }
    .user-profile .user-info {
        display: none; /* 手機版隱藏姓名，只留公司與登出 */
    }
    .user-profile .company-badge {
        font-size: 12px;
        padding: 4px 8px;
    }

    /* 頁首工具列斷行 */
    .page-toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .toolbar-actions {
        width: 100%;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .search-box {
        width: 100%;
    }

    /* 內容區塊內縮優化：增加外部呼吸空間 */
    .page-body {
        padding: 12px 12px !important; /* 恢復適度邊距 */
        padding-bottom: 80px !important;
    }
    
    .content-card, .glass-card {
        padding: 12px 10px !important; /* 卡片內部邊距同步調整 */
    }

    /* 修正頂部固定容器在手機版的邊距，防止內容被截斷 */
    .sticky-container {
        margin: -12px -12px 16px -12px !important;
        padding: 12px 12px 8px 12px !important;
        width: auto !important;
    }


    /* 銷貨明細表格：手機版強制維持寬度以顯示完整資料 */
    .items-table {
        min-width: 950px !important; /* 總寬度與桌面版欄位設定一致 */
    }
    
    /* 表單變為單欄 */
    /* 表單變為單欄 */
    .form-grid {
        grid-template-columns: 1fr !important;
    }

    /* 表單欄位極窄排版優化：同列顯示但消除左側空白 */
    .form-group {
        flex-direction: row !important; /* 恢復同列 */
        align-items: center !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
        flex-wrap: nowrap !important;
    }

    .form-label {
        flex: 0 0 auto !important;
        width: 85px !important;    /* 精簡寬度 */
        text-align: right !important;
        padding-left: 0 !important;
        font-size: 14px !important;
        margin-bottom: 0 !important;
    }

    .form-control-wrapper {
        flex: 1 !important;
        width: auto !important;
    }

    /* 產品清單工具列優化 */
    .list-toolbar-container {
        padding: 16px !important;
        gap: 16px !important;
    }

    .pagination-controls {
        width: 100% !important;
        justify-content: space-between;
        border-bottom: 1px solid #e2e8f0;
        padding-bottom: 12px;
    }
    
    .pagination-controls #sel-page {
        flex: 1;
        width: auto !important;
    }

    /* 頁面標題列操作按鈕 (取消/存檔等) 保持橫向並排 */
    .page-header .toolbar-actions {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important; /* 改為左對齊，防止左側被截斷 */
        align-items: center !important;
        gap: 8px !important;
        overflow-x: auto;
        padding-bottom: 8px;
        padding-left: 4px; /* 增加一點左邊距 */
        -webkit-overflow-scrolling: touch;
    }

    /* 產品清單工具列 (篩選/搜尋) 恢復為縱向多行排列 */
    .list-toolbar-container .toolbar-content {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    
    .list-toolbar-container .toolbar-left {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    .list-toolbar-container .toolbar-right {
        display: flex !important;
        flex-direction: row !important; /* 使搜尋欄與新增按鈕並排 */
        gap: 8px !important;
        width: 100% !important;
    }
    
    .list-toolbar-container .toolbar-right .search-box {
        flex: 1 !important; /* 搜尋欄自動縮短以騰出空間 */
        width: auto !important;
        min-width: 0 !important;
    }
    
    .list-toolbar-container .toolbar-actions {
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        overflow-x: visible !important;
        flex-wrap: wrap !important;
    }

    .filter-row {
        width: 100% !important;
        justify-content: stretch !important;
    }

    .filter-row select {
        flex: 1;
        width: 50% !important;
    }

    .toolbar-actions .search-box {
        width: auto !important;
        flex: 1;
        min-width: 200px;
    }

    .list-toolbar-container .btn {
        width: auto !important; /* 寬度依內容自動縮短 */
        padding: 6px 12px !important; /* 更精簡的內距 */
        font-size: 13px !important;
        height: 36px !important; /* 縮小高度 */
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        border-radius: 8px !important;
        white-space: nowrap !important;
    }

    /* 全域手機版按鈕寬度縮短：除非是 .btn-block，否則不強制寬度 */
    .btn:not(.btn-block) {
        width: fit-content !important;
        min-width: 0 !important;
        padding: 8px 16px !important;
        white-space: nowrap !important;
    }

    .page-header .toolbar-actions .btn {
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        white-space: nowrap !important;
        font-size: 0 !important;        /* 隱藏按鈕內文字 */
        border-radius: 8px !important;
        flex: 0 0 auto !important;     /* 固定寬度不縮放 */
        position: relative;             /* 用於 Tooltip 定位 */
    }

    .page-header .toolbar-actions .btn i {
        font-size: 18px !important;
        margin: 0 !important;
    }

    /* 懸停時顯示提示文字 (Tooltip) */
    @media (hover: hover) {
        .page-header .toolbar-actions .btn:hover::after {
            content: attr(title);
            position: absolute;
            top: -40px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 51, 102, 0.9);
            color: #fff;
            padding: 5px 10px;
            border-radius: 6px;
            font-size: 12px !important;
            white-space: nowrap;
            z-index: 1000;
            pointer-events: none;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        /* Tooltip 小三角 */
        .page-header .toolbar-actions .btn:hover::before {
            content: "";
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
            border: 6px solid transparent;
            border-top-color: rgba(0, 51, 102, 0.9);
            z-index: 1000;
        }
    }



    /* 恢復為表列式佈局，並啟用左右滑動 */
    .data-table {
        display: table !important;
        width: 100% !important;
        min-width: 850px !important; /* 確保寬度足夠觸發捲軸並保持對齊 */
        border-collapse: collapse !important;
    }

    .data-table thead {
        display: table-header-group !important;
    }

    .data-table tbody {
        display: table-row-group !important;
    }

    .data-table tr {
        display: table-row !important;
    }

    .data-table th,
    .data-table td {
        display: table-cell !important;
        width: auto !important;
        padding: 12px 16px !important;
        border-bottom: 1px solid #e2e8f0 !important;
        white-space: nowrap !important;
        text-align: left !important;
    }

    .data-table th {
        background-color: #003366 !important;
        color: #fff !important;
        font-weight: 600 !important;
    }

    .data-table td::before {
        display: none; /* 隱藏 data-label 標籤 */
    }

    /* 容器溢出處理 */
    .glass-card {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch; /* 讓 iOS 手感更順滑 */
    }

    .data-table {
        min-width: 800px; /* 強制表格寬度，觸發捲軸 */
    }

    /* 客戶管理 - 聯絡資料卡片優化 */
    .form-control-wrapper {
        display: flex !important;
        gap: 10px !important;
        width: 100%;
    }

    .form-control-wrapper .form-control {
        flex: 1; /* 輸入框撐開 */
        min-width: 0; /* 防止溢出 */
    }

    .form-control-wrapper .btn-outline {
        width: 48px !important; /* 增加按鈕點擊面積 */
        height: 42px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: #f8fafc !important;
        border: 1px solid #003366 !important;
        color: #003366 !important;
        border-radius: 8px !important;
    }

    .form-control-wrapper .btn-outline i {
        font-size: 18px !important;
    }

    /* 地址欄位在手機版特別處理 */
    .form-group[style*="grid-column: span 2"] {
        grid-column: span 1 !important; /* 恢復單欄 */
    }
}