/*
 * 響應式設計統一樣式系統 - 優化版
 * Unified Responsive Design System - Optimized
 * 目標：保留核心價值，與 Tailwind CSS 協作，避免重複功能
 * 優化內容：清理與 Tailwind CSS 重疊的基礎功能，專注於專用組件和進階功能
 */

/* =============================================================================
   1. 基礎響應式設定 Base Responsive Settings
   ============================================================================= */

/* 全域響應式設定 Global Responsive Settings */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

/* 圖片響應式 Image Responsiveness */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* 表格響應式基礎 Table Responsiveness Base */
table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

/* =============================================================================
   2. 專用變數定義 Custom Variables
   ============================================================================= */

/* NOTE: 全域 CSS 變數已移至 variables.css 統一管理 */
/* 包含：斷點變數、容器寬度、間距變數等 */

/* =============================================================================
   3. 專用導航組件 Specialized Navigation Components
   NOTE: 前台導航樣式使用 frontend-pastel.css 中的 .mobile-menu
   NOTE: 以下 .navbar-responsive/.sidebar-responsive 等樣式已於 2025-12-25 清理
         因前台未使用這些類別
   ============================================================================= */

/* =============================================================================
   4. 專用表格響應式組件 Specialized Table Components
   ============================================================================= */

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.table-responsive table {
    min-width: 600px;
    white-space: nowrap;
}

/* 行動版表格卡片模式 Mobile Table Card Mode */
.table-card-mode {
    display: none;
}

.table-card-mode .table-card {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-md);
    border-left: 4px solid var(--primary-color, #3b82f6);
}

.table-card .card-header {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary, #1f2937);
}

.table-card .card-body {
    display: grid;
    gap: var(--spacing-sm);
}

.table-card .card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid #f3f4f6;
}

.table-card .card-row:last-child {
    border-bottom: none;
}

.table-card .card-label {
    font-weight: 500;
    color: #6b7280;
    flex-shrink: 0;
}

.table-card .card-value {
    text-align: right;
    color: #1f2937;
}

/* 表格動作按鈕響應式 Responsive Table Actions */
.table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    justify-content: center;
}

.table-actions .btn {
    flex-shrink: 0;
    min-width: auto;
}

/* =============================================================================
   5. 專用表單響應式組件 Specialized Form Components
   ============================================================================= */

.form-responsive {
    width: 100%;
}

.form-group-responsive {
    margin-bottom: var(--spacing-lg);
    width: 100%;
}

.form-control-responsive {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 1rem;
    line-height: 1.5;
    border: 2px solid #e5e7eb;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.form-control-responsive:focus {
    outline: none;
    border-color: var(--primary-color, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* 表單布局響應式 Responsive Form Layouts */
.form-row-responsive {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.form-col-responsive {
    flex: 1;
    min-width: 200px;
}

/* 按鈕組響應式 Responsive Button Groups */
.btn-group-responsive {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.btn-responsive {
    flex-grow: 1;
    text-align: center;
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
    /* Touch-friendly minimum */
}

/* =============================================================================
   6. 專用卡片和模態框組件 Specialized Cards and Modal Components
   ============================================================================= */

.card-responsive {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-bottom: var(--spacing-lg);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-responsive:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.card-header-responsive {
    padding: var(--spacing-lg);
    border-bottom: 1px solid #f3f4f6;
    background: #fafafa;
}

.card-body-responsive {
    padding: var(--spacing-lg);
}

.card-footer-responsive {
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid #f3f4f6;
    background: #fafafa;
}

/* 模態框響應式 Responsive Modal */
.modal-responsive {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: var(--spacing-md);
}

.modal-content-responsive {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
}

/* =============================================================================
   7. 小螢幕響應式 (< 576px) Extra Small Screens
   ============================================================================= */

@media (max-width: 575.98px) {
    :root {
        --spacing-md: 0.75rem;
        --spacing-lg: 1rem;
    }

    /* 文字大小調整 Text Size Adjustments */
    h1 {
        font-size: 1.75rem !important;
    }

    h2 {
        font-size: 1.5rem !important;
    }

    h3 {
        font-size: 1.25rem !important;
    }

    h4 {
        font-size: 1.1rem !important;
    }

    /* 按鈕全寬 Full Width Buttons */
    .btn-responsive {
        width: 100%;
        margin-bottom: var(--spacing-xs);
    }

    .btn-group-responsive {
        flex-direction: column;
    }

    /* 表單響應式調整 Form Adjustments */
    .form-row-responsive {
        flex-direction: column;
    }

    .form-control-responsive {
        padding: var(--spacing-md);
        font-size: 1rem;
    }

    /* 表格切換為卡片模式 Switch Tables to Card Mode */
    .table-responsive {
        display: none;
    }

    .table-card-mode {
        display: block;
    }

    /* 側邊欄全寬 Full Width Sidebar */
    .sidebar-responsive {
        width: 100%;
    }

    /* 導航調整 Navigation Adjustments */
    .navbar-nav {
        width: 100%;
    }

    .navbar-nav li {
        width: 100%;
    }

    .navbar-nav a {
        padding: var(--spacing-md);
        display: block;
        border-bottom: 1px solid #f3f4f6;
    }
}

/* =============================================================================
   8. 平板響應式 (576px - 767.98px) Small Screens
   ============================================================================= */

@media (min-width: 576px) and (max-width: 767.98px) {

    /* 表格保持響應式滾動 */
    .table-responsive {
        display: block;
    }

    .table-card-mode {
        display: none;
    }

    /* 表單兩欄布局 */
    .form-row-responsive {
        flex-direction: row;
    }

    .form-col-responsive {
        min-width: 250px;
    }
}

/* =============================================================================
   9. 中等螢幕響應式 (768px - 1023.98px) Medium Screens
   ============================================================================= */

@media (min-width: 768px) and (max-width: 1023.98px) {

    /* 導航橫向顯示 */
    .navbar-nav {
        flex-direction: row;
        gap: var(--spacing-lg);
    }

    .navbar-toggle {
        display: none;
    }

    .navbar-collapse {
        display: flex !important;
    }

    /* 側邊欄相對定位 */
    .sidebar-responsive {
        position: relative;
        transform: translateX(0);
        width: 250px;
        height: auto;
        box-shadow: none;
        border-right: 1px solid #e5e7eb;
    }

    /* 表格動作按鈕優化 */
    .table-actions {
        justify-content: flex-start;
    }
}

/* =============================================================================
   10. 大螢幕響應式 (1024px - 1439.98px) Large Screens
   ============================================================================= */

@media (min-width: 1024px) and (max-width: 1439.98px) {

    /* 側邊欄完全展開 */
    .sidebar-responsive {
        width: 280px;
    }

    /* 表格完整顯示 */
    .table-responsive table {
        min-width: 100%;
    }
}

/* =============================================================================
   11. 特大螢幕響應式 (≥ 1440px) Extra Large Screens
   ============================================================================= */

@media (min-width: 1440px) {

    /* 更大的間距 */
    :root {
        --spacing-lg: 2rem;
        --spacing-xl: 2.5rem;
        --spacing-xxl: 4rem;
    }

    /* 側邊欄更寬 */
    .sidebar-responsive {
        width: 320px;
    }
}

/* =============================================================================
   12. 列印樣式 Print Styles
   統一管理所有列印相關樣式（包含從 frontend-pastel.css 合併的樣式）
   ============================================================================= */

@media print {
    body {
        background: white !important;
        color: black !important;
        font-size: 12pt !important;
    }

    /* 隱藏不需要列印的元素 */
    .sidebar-responsive,
    .navbar-toggle,
    .btn-responsive,
    .modal-responsive,
    #sidebar,
    #mobile-menu-overlay,
    .header,
    button:not(.print-show),
    .btn-primary:not(.print-show),
    .btn-secondary:not(.print-show),
    .navbar,
    .mobile-menu {
        display: none !important;
    }

    /* 確保內容區域全寬顯示 */
    #page-content,
    #db-wrapper {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 預約QRCODE頁面特殊樣式 */
    .appointment-detail,
    .qrcode-container {
        margin: 0 !important;
        padding: 10pt !important;
        width: 100% !important;
    }

    .table-responsive {
        overflow: visible !important;
        box-shadow: none !important;
        width: 100% !important;
    }

    /* 卡片樣式（合併自 frontend-pastel.css） */
    .card,
    .card-responsive,
    .card-container {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        break-inside: avoid;
        margin-bottom: 10pt !important;
        padding: 10pt !important;
        background: white !important;
    }

    /* 按鈕樣式（合併自 frontend-pastel.css） */
    .btn {
        box-shadow: none !important;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        break-after: avoid;
        margin-top: 0 !important;
    }

    .page-break {
        page-break-before: always;
    }

    /* 確保所有文字和連結都是黑色 */
    * {
        color: black !important;
        background: transparent !important;
    }
}

/* =============================================================================
   13. 無障礙設計 Accessibility
   ============================================================================= */

/* 高對比模式支援 High Contrast Mode */
@media (prefers-contrast: high) {
    .btn-responsive {
        border: 2px solid currentColor !important;
    }

    .form-control-responsive {
        border-width: 2px !important;
    }

    .card-responsive {
        border: 2px solid #000 !important;
    }
}

/* 減少動畫模式 Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 焦點指示器 Focus Indicators */
*:focus {
    outline: 2px solid var(--primary-color, #3b82f6) !important;
    outline-offset: 2px !important;
}

/* NOTE: .sr-only 類別已移至 utilities.css 統一管理 */

/* =============================================================================
   14. 語言切換器統一樣式 Unified Language Switcher Styles
   NOTE: 語言切換器樣式已統一至 frontend-pastel.css
   ============================================================================= */

/* =============================================================================
   15. 效能優化 Performance Optimizations
   ============================================================================= */

/* GPU 加速 GPU Acceleration */
.card-responsive,
.modal-responsive,
.sidebar-responsive {
    will-change: transform;
    transform: translateZ(0);
}

/* 字體渲染優化 Font Rendering Optimization */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}