/**
 * 手機版共用樣式元件 (Mobile Shared CSS Component)
 * 檔案: static/css/mobile-shared.css
 * 日期: 2025-10-22
 * 版本: v1.0.0
 *
 * 說明：
 * 此檔案定義所有模組手機版樣式的統一標準，基於 Material Design 3 和 8px Grid System。
 * 所有新模組的 mobile CSS 都應該引用這些變數，確保視覺一致性。
 *
 * 使用方式：
 * 在模組的 mobile CSS 檔案開頭引用這些變數：
 * @import url('mobile-shared.css');
 * 或直接在 HTML 中載入：
 * <link rel="stylesheet" href="{% static 'css/mobile-shared.css' %}">
 *
 * 設計原則：
 * - 8px Grid System（所有間距都是 8 的倍數）
 * - Material Design 3 觸控標準（最小 48px）
 * - 響應式設計（只在手機版 @media(max-width:767px) 生效）
 */

/* ============================================
   Design Tokens - 設計變數（全域可用）
   ============================================ */
:root {
    /* ==================== 間距系統 (8px Grid) ==================== */

    /* 頁面級別間距 */
    --mobile-page-padding: 8px;          /* 頁面左右邊距（最外層 container） */
    --mobile-page-padding-vertical: 12px; /* 頁面上下邊距 */

    /* 卡片間距 */
    --mobile-card-padding: 16px;         /* 卡片內部 padding */
    --mobile-card-padding-sm: 12px;      /* 小卡片內部 padding（統計卡片） */
    --mobile-card-gap: 12px;             /* 卡片之間的間距 */
    --mobile-card-radius: 12px;          /* 卡片圓角 */
    --mobile-card-radius-sm: 8px;        /* 小卡片圓角 */

    /* 區塊間距 */
    --mobile-section-gap: 16px;          /* 不同區塊之間的間距 */
    --mobile-section-gap-lg: 24px;       /* 大區塊之間的間距 */

    /* 表單間距 */
    --mobile-form-field-padding: 12px;   /* 輸入框內部 padding */
    --mobile-form-field-gap: 16px;       /* 表單欄位之間的間距 */
    --mobile-form-label-gap: 8px;        /* 標籤與輸入框之間的間距 */

    /* 列表項目間距 */
    --mobile-list-item-padding: 16px;    /* 列表項目內部 padding */
    --mobile-list-item-gap: 8px;         /* 列表項目之間的間距 */

    /* 按鈕間距 */
    --mobile-button-padding-x: 16px;     /* 按鈕左右內距 */
    --mobile-button-padding-y: 12px;     /* 按鈕上下內距 */
    --mobile-button-gap: 8px;            /* 按鈕之間的間距 */


    /* ==================== 觸控標準 (Material Design 3) ==================== */
    --mobile-touch-target: 48px;         /* 最小觸控區域高度 */
    --mobile-button-height: 48px;        /* 標準按鈕高度 */
    --mobile-input-height: 48px;         /* 標準輸入框高度 */
    --mobile-icon-size: 24px;            /* 標準圖示大小 */
    --mobile-icon-touch: 48px;           /* 可觸控圖示區域 */


    /* ==================== 字體系統 ==================== */
    --mobile-font-size-xs: 12px;         /* 極小字體（次要資訊） */
    --mobile-font-size-sm: 14px;         /* 小字體（標籤、說明文字） */
    --mobile-font-size-base: 16px;       /* 基礎字體（內文、輸入框）*/
    --mobile-font-size-lg: 18px;         /* 大字體（小標題） */
    --mobile-font-size-xl: 20px;         /* 特大字體（大標題） */
    --mobile-font-size-xxl: 24px;        /* 超大字體（頁面標題） */

    /* 行高 */
    --mobile-line-height-tight: 1.2;     /* 緊湊行高（標題） */
    --mobile-line-height-normal: 1.4;    /* 標準行高（內文） */
    --mobile-line-height-relaxed: 1.6;   /* 寬鬆行高（長文） */

    /* 字重 */
    --mobile-font-weight-normal: 400;    /* 標準字重 */
    --mobile-font-weight-medium: 500;    /* 中等字重 */
    --mobile-font-weight-semibold: 600;  /* 半粗體 */
    --mobile-font-weight-bold: 700;      /* 粗體 */


    /* ==================== 顏色系統 ==================== */

    /* 主要顏色 */
    --mobile-color-primary: var(--primary, #00A0E8);     /* 主要品牌色 */
    --mobile-color-primary-dark: var(--primary-dark, #2563eb); /* 主色加深 */
    --mobile-color-primary-light: var(--primary-light, #33b8ef); /* 主色減淡 */

    /* 語意顏色（引用全域 theme-tokens） */
    --mobile-color-success: var(--color-success, #28a745);     /* 成功（綠色） */
    --mobile-color-warning: var(--color-warning, #ffc107);     /* 警告（黃色） */
    --mobile-color-danger: var(--color-danger, #dc3545);       /* 危險（紅色） */
    --mobile-color-info: var(--color-info, #007bff);           /* 資訊（藍色） */
    --mobile-color-secondary: var(--text-tertiary, #6c757d);   /* 次要（灰色） */

    /* 文字顏色（引用全域 theme-tokens） */
    --mobile-color-text-primary: var(--text-primary, #212529);      /* 主要文字 */
    --mobile-color-text-secondary: var(--text-secondary, #6c757d);  /* 次要文字 */
    --mobile-color-text-muted: var(--text-placeholder, #adb5bd);    /* 淡化文字 */
    --mobile-color-text-inverse: var(--text-inverse, #ffffff);      /* 反色文字（用於深色背景） */

    /* 背景顏色（引用全域 theme-tokens） */
    --mobile-color-bg-body: var(--surface-base, #ffffff);           /* 頁面背景 */
    --mobile-color-bg-surface: var(--surface-raised, #f8f9fa);      /* 表面背景（卡片預設底色） */
    --mobile-color-bg-surface-hover: var(--surface-hover, #e9ecef); /* 表面背景 hover */
    --mobile-color-bg-overlay: rgba(0, 0, 0, 0.5); /* 遮罩背景 */

    /* 邊框顏色（引用全域 theme-tokens） */
    --mobile-color-border: var(--border-default, #e0e0e0);          /* 標準邊框 */
    --mobile-color-border-light: var(--border-subtle, #f0f0f0);     /* 淡邊框 */
    --mobile-color-border-dark: var(--border-strong, #d0d0d0);      /* 深邊框 */


    /* ==================== 陰影系統 ==================== */
    --mobile-shadow-none: none;
    --mobile-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);     /* 極淡陰影 */
    --mobile-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);      /* 小陰影（卡片） */
    --mobile-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);    /* 中陰影（Modal） */
    --mobile-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);     /* 大陰影（FAB） */
    --mobile-shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.25);   /* 超大陰影（Bottom Sheet） */


    /* ==================== 圓角系統 ==================== */
    --mobile-radius-none: 0;
    --mobile-radius-xs: 4px;             /* 極小圓角 */
    --mobile-radius-sm: 8px;             /* 小圓角（按鈕、徽章） */
    --mobile-radius-md: 12px;            /* 中圓角（卡片、輸入框） */
    --mobile-radius-lg: 16px;            /* 大圓角（Bottom Sheet） */
    --mobile-radius-xl: 20px;            /* 超大圓角 */
    --mobile-radius-full: 9999px;        /* 完全圓角（圓形按鈕） */


    /* ==================== 動畫系統 ==================== */
    --mobile-transition-fast: 0.15s ease;      /* 快速過渡（按鈕 hover） */
    --mobile-transition-normal: 0.2s ease;     /* 標準過渡（卡片展開） */
    --mobile-transition-slow: 0.3s ease;       /* 慢速過渡（Modal 出現） */

    /* Easing 函數 */
    --mobile-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);  /* Material Design 標準 */
    --mobile-ease-out: cubic-bezier(0.0, 0, 0.2, 1);     /* 減速 */
    --mobile-ease-in: cubic-bezier(0.4, 0, 1, 1);        /* 加速 */


    /* ==================== Z-Index 系統 ==================== */
    --mobile-z-base: 1;                  /* 基礎層 */
    --mobile-z-dropdown: 1000;           /* 下拉選單 */
    --mobile-z-sticky: 1020;             /* 置頂元素 */
    --mobile-z-fixed: 1030;              /* 固定元素（FAB） */
    --mobile-z-modal-backdrop: 1040;     /* Modal 背景 */
    --mobile-z-modal: 1050;              /* Modal 本體 */
    --mobile-z-popover: 1060;            /* Popover */
    --mobile-z-tooltip: 1070;            /* Tooltip（最上層） */
}


/* ============================================
   手機版基礎樣式（只在 767px 以下生效）
   ============================================ */
@media (max-width: 767px) {

    /* ==================== 頁面容器統一樣式 ==================== */

    /* Bootstrap container-fluid 統一邊距 */
    .container-fluid {
        padding-left: var(--mobile-page-padding) !important;
        padding-right: var(--mobile-page-padding) !important;
    }

    /* Bootstrap row 移除負邊距 */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Bootstrap col-* 統一邊距 */
    [class*='col-'] {
        padding-left: var(--mobile-page-padding);
        padding-right: var(--mobile-page-padding);
    }


    /* ==================== 卡片統一樣式 ==================== */

    /* Bootstrap 卡片 */
    .card,
    .iq-card {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: var(--mobile-card-gap) !important;
        border-radius: var(--mobile-card-radius) !important;
        box-shadow: var(--mobile-shadow-sm) !important;
    }

    .card-body,
    .iq-card-body {
        padding: var(--mobile-card-padding) !important;
    }

    /* 小卡片（統計卡片） */
    .card.card-sm,
    .iq-card.card-sm {
        padding: var(--mobile-card-padding-sm);
    }


    /* ==================== 表單統一樣式 ==================== */

    /* 表單控制項 */
    .form-control,
    select.form-control,
    textarea.form-control,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="date"] {
        min-height: var(--mobile-input-height);
        font-size: var(--mobile-font-size-base) !important; /* 防止 iOS 自動縮放 */
        padding: var(--mobile-form-field-padding) !important;
        border-radius: var(--mobile-card-radius-sm) !important;
    }

    /* Textarea 特殊處理 */
    textarea.form-control {
        min-height: 120px;
        line-height: var(--mobile-line-height-normal);
    }

    /* 表單群組間距 */
    .form-group {
        margin-bottom: var(--mobile-form-field-gap) !important;
    }

    /* 表單標籤 */
    .form-label,
    label {
        font-size: var(--mobile-font-size-sm);
        font-weight: var(--mobile-font-weight-semibold);
        margin-bottom: var(--mobile-form-label-gap);
        color: var(--mobile-color-text-primary);
    }


    /* ==================== 按鈕統一樣式 ==================== */

    /* Bootstrap 按鈕 */
    .btn {
        min-height: var(--mobile-button-height);
        padding: var(--mobile-button-padding-y) var(--mobile-button-padding-x) !important;
        font-size: var(--mobile-font-size-base) !important;
        border-radius: var(--mobile-card-radius-sm) !important;
        transition: all var(--mobile-transition-fast) !important;
    }

    /* 小按鈕 */
    .btn-sm {
        min-height: 40px;
        padding: 8px 12px;
        font-size: var(--mobile-font-size-sm);
    }

    /* 大按鈕 */
    .btn-lg {
        min-height: 56px;
        padding: 16px 24px;
        font-size: var(--mobile-font-size-lg);
    }

    /* 按鈕群組間距 */
    .btn-group .btn {
        margin-right: var(--mobile-button-gap);
    }

    .btn-group .btn:last-child {
        margin-right: 0;
    }

    /* 圖示按鈕（Icon Button）- 覆寫全域 .btn 樣式 */
    .btn.btn-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        max-width: 44px;
        min-height: 44px;
        max-height: 44px;
        padding: 0 !important;
        border-radius: 10px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        line-height: 1;
        box-sizing: border-box;
    }

    .btn.btn-icon i {
        font-size: 20px;
        line-height: 1;
        margin: 0;
        padding: 0;
    }


    /* ==================== 表格統一樣式 ==================== */

    /* 手機版隱藏桌面表格（使用卡片列表） */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 表格單元格最小觸控區域 */
    .table td,
    .table th {
        min-height: var(--mobile-touch-target);
        padding: 12px 8px;
        font-size: var(--mobile-font-size-sm);
    }


    /* ==================== 徽章統一樣式 ==================== */
    .badge {
        padding: 6px 12px;
        font-size: var(--mobile-font-size-xs) !important;
        font-weight: var(--mobile-font-weight-semibold);
        border-radius: var(--mobile-radius-sm);
    }


    /* ==================== 分頁統一樣式（引用 pagination-shared.css） ==================== */
    /* 分頁樣式請使用 pagination-shared.css */
    /* 這裡不重複定義，確保單一來源 */


    /* ==================== 通用工具類 ==================== */

    /* 間距工具類 */
    .mobile-mt-xs { margin-top: 4px; }
    .mobile-mt-sm { margin-top: 8px; }
    .mobile-mt-md { margin-top: 16px; }
    .mobile-mt-lg { margin-top: 24px; }

    .mobile-mb-xs { margin-bottom: 4px; }
    .mobile-mb-sm { margin-bottom: 8px; }
    .mobile-mb-md { margin-bottom: 16px; }
    .mobile-mb-lg { margin-bottom: 24px; }

    .mobile-px-page {
        padding-left: var(--mobile-page-padding);
        padding-right: var(--mobile-page-padding);
    }

    .mobile-py-page {
        padding-top: var(--mobile-page-padding-vertical);
        padding-bottom: var(--mobile-page-padding-vertical);
    }

    /* 觸控區域確保 */
    .mobile-touch-target {
        min-height: var(--mobile-touch-target);
        min-width: var(--mobile-touch-target);
    }

    /* 隱藏/顯示工具類 */
    .mobile-hide {
        display: none !important;
    }

    .mobile-show {
        display: block !important;
    }
}


/* ============================================
   桌面版預設（隱藏手機版專用元素）
   ============================================ */
@media (min-width: 768px) {
    .mobile-only {
        display: none !important;
    }

    .mobile-filter-btn-container {
        display: none !important;
    }
}


/* ============================================
   暗色模式覆蓋 (Dark Mode Override)
   ============================================ */
[data-theme="dark"] {
    /* 文字顏色（繼承自 theme-tokens dark 值） */
    --mobile-color-text-primary: var(--text-primary, #cbd5e1);
    --mobile-color-text-secondary: var(--text-secondary, #94a3b8);
    --mobile-color-text-muted: var(--text-placeholder, #64748b);
    --mobile-color-text-inverse: var(--text-inverse, #0f172a);

    /* 背景顏色（繼承自 theme-tokens dark 值） */
    --mobile-color-bg-body: var(--surface-base, #0f172a);
    --mobile-color-bg-surface: var(--surface-raised, #1e293b);
    --mobile-color-bg-surface-hover: var(--surface-hover, #283548);

    /* 邊框顏色（繼承自 theme-tokens dark 值） */
    --mobile-color-border: var(--border-default, #334155);
    --mobile-color-border-light: var(--border-subtle, #283548);
    --mobile-color-border-dark: var(--border-strong, #475569);

    /* 陰影（暗色模式更明顯） */
    --mobile-shadow-sm: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.3));
    --mobile-shadow-md: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.4));
}