/* ========================================
   台灣即時監控平台 - 手機響應式設計
   Mobile Responsive Design Guidelines
   ======================================== */

/* ========== 基礎手機斷點 ========== */
/* Small phones: 320px - 374px */
/* Regular phones: 375px - 599px */
/* Tablets: 600px - 959px */
/* Desktops: 960px+ */

/* ========== 通用手機優化 ========== */
@media (max-width: 768px) {
    * {
        -webkit-tap-highlight-color: transparent;
    }

    body {
        font-size: 16px; /* 防止iOS自動放大 */
    }

    .container {
        padding: 0 15px !important;
    }

    /* 導航條優化 */
    .navbar {
        padding: 10px 0 !important;
    }

    .navbar-content {
        flex-wrap: wrap;
        gap: 10px;
    }

    .logo {
        font-size: 0.9rem !important;
    }

    .logo span {
        display: none; /* 隱藏文字，只顯示圖標 */
    }

    .nav-btn {
        padding: 8px 12px !important;
        font-size: 0.85rem !important;
    }

    /* 標題優化 */
    .header h1 {
        font-size: 1.5rem !important;
        margin: 10px 0 !important;
    }

    .header p {
        font-size: 0.85rem !important;
    }

    /* 按鈕優化 */
    button, .btn, .back-btn {
        padding: 10px 15px !important;
        font-size: 0.9rem !important;
        min-height: 44px !important; /* iOS 建議觸擊目標 */
    }

    button, .btn {
        border-radius: 6px !important;
    }

    /* 表格優化 */
    table {
        font-size: 0.85rem !important;
    }

    thead {
        font-size: 0.8rem !important;
    }

    td, th {
        padding: 8px 5px !important;
    }

    /* 網格系統 */
    .grid, .cameras-grid, .features-grid, .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .grid-2 {
        grid-template-columns: 1fr !important;
    }

    .grid-3 {
        grid-template-columns: 1fr !important;
    }

    .grid-4 {
        grid-template-columns: 1fr !important;
    }

    /* 卡片優化 */
    .card, .camera-card, .feature-card, .contact-card, .stat-card {
        padding: 12px !important;
        border-radius: 8px !important;
    }

    .card-header, .camera-info {
        padding: 10px !important;
    }

    .card-body {
        padding: 10px !important;
    }

    /* 圖片高度調整 */
    .camera-image {
        height: 150px !important;
    }

    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* 表單優化 */
    .form-group {
        margin-bottom: 15px !important;
    }

    input, textarea, select {
        font-size: 16px !important; /* 防止自動放大 */
        padding: 12px !important;
        border-radius: 6px !important;
    }

    input, textarea, select {
        width: 100% !important;
        max-width: 100% !important;
    }

    .form-row {
        grid-template-columns: 1fr !important;
    }

    /* 下拉選單優化 */
    select {
        appearance: none;
        background: white url('data:image/svg+xml;utf8,<svg fill="black" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat;
        background-position: right 10px center;
        background-size: 20px;
        padding-right: 30px;
    }

    /* 側邊欄收起 */
    .sidebar {
        position: fixed !important;
        left: -250px !important;
        top: 0 !important;
        width: 250px !important;
        height: 100vh !important;
        z-index: 1000 !important;
        transition: left 0.3s !important;
        background: white !important;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1) !important;
    }

    .sidebar.active {
        left: 0 !important;
    }

    /* 模態框優化 */
    .modal-content {
        width: 95% !important;
        max-width: 100% !important;
        max-height: 90vh !important;
        margin: 5vh auto !important;
        border-radius: 12px !important;
    }

    .modal-header {
        padding: 12px !important;
    }

    .modal-body {
        max-height: 70vh !important;
        overflow-y: auto !important;
    }

    .close-btn {
        font-size: 1.5rem !important;
        padding: 5px 10px !important;
    }

    /* 統計面板 */
    .stats-panel {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .stat-card {
        padding: 12px !important;
    }

    .stat-value {
        font-size: 1.3rem !important;
    }

    .stat-label {
        font-size: 0.75rem !important;
    }

    /* 頁腳優化 */
    .footer {
        padding: 15px 0 !important;
    }

    .footer-links {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .footer-link {
        font-size: 0.8rem !important;
    }

    /* 過濾器優化 */
    .filter-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .filter-group {
        flex: 1 !important;
    }

    .filter-group label {
        display: block !important;
        margin-bottom: 5px !important;
        font-size: 0.85rem !important;
    }

    /* 搜尋框優化 */
    .search-box {
        width: 100% !important;
    }

    .search-input {
        width: 100% !important;
        padding: 10px !important;
        font-size: 16px !important;
    }

    /* 菜單按鈕顯示 */
    .menu-toggle {
        display: block !important;
    }

    .menu-toggle {
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        padding: 10px;
        min-height: 44px;
    }

    /* 麵包屑 */
    .breadcrumb {
        font-size: 0.75rem !important;
        flex-wrap: wrap !important;
    }

    /* 標籤和徽章 */
    .badge, .tag {
        padding: 4px 8px !important;
        font-size: 0.75rem !important;
        border-radius: 4px !important;
    }

    /* 列表優化 */
    .list-item {
        padding: 12px !important;
        border-bottom: 1px solid #eee !important;
    }

    .list-item:last-child {
        border-bottom: none !important;
    }

    /* 英雄區 */
    .hero {
        padding: 30px 0 !important;
    }

    .hero-title {
        font-size: 1.5rem !important;
    }

    .hero-subtitle {
        font-size: 1rem !important;
    }

    .hero-buttons {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .hero-buttons .btn {
        width: 100% !important;
    }

    /* 手風琴/折疊菜單 */
    .accordion-header {
        padding: 12px !important;
    }

    .accordion-content {
        padding: 12px !important;
    }

    /* 標籤頁 */
    .tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .tab-button {
        padding: 10px 12px !important;
        font-size: 0.85rem !important;
    }

    /* 通知/警報 */
    .alert, .notification {
        padding: 10px !important;
        margin: 10px 0 !important;
        border-radius: 6px !important;
    }

    /* 進度條 */
    .progress-bar {
        height: 6px !important;
    }

    /* 浮動按鈕 */
    .fab {
        width: 50px !important;
        height: 50px !important;
        bottom: 20px !important;
        right: 20px !important;
        font-size: 1.3rem !important;
    }

    /* 載入動畫 */
    .spinner {
        width: 30px !important;
        height: 30px !important;
    }

    /* 可視化圖表 */
    canvas {
        max-width: 100% !important;
        height: auto !important;
    }

    /* 地圖優化 */
    #map, .leaflet-container {
        height: 300px !important;
    }

    .leaflet-control {
        margin: 5px !important;
    }

    /* Flex 容器 */
    .flex-row {
        flex-direction: column !important;
    }

    .flex-between {
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* 可摺疊區域 */
    .collapsible {
        width: 100% !important;
    }

    /* 視頻容器 */
    .video-container {
        position: relative;
        width: 100%;
        padding-bottom: 56.25%; /* 16:9 */
        height: 0;
        overflow: hidden;
    }

    .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

/* ========== 超小螢幕優化 (≤480px) ========== */
@media (max-width: 480px) {
    .header h1 {
        font-size: 1.2rem !important;
    }

    .header p {
        font-size: 0.8rem !important;
        display: none; /* 隱藏副標題節省空間 */
    }

    .navbar {
        padding: 8px 0 !important;
    }

    button, .btn, .back-btn {
        padding: 8px 12px !important;
        font-size: 0.85rem !important;
    }

    table {
        font-size: 0.75rem !important;
    }

    td, th {
        padding: 5px 3px !important;
    }

    .card, .camera-card, .feature-card {
        padding: 8px !important;
    }

    .card-header, .camera-info {
        padding: 8px !important;
    }

    .camera-image {
        height: 120px !important;
    }

    .stat-card {
        padding: 8px !important;
    }

    .stat-value {
        font-size: 1.1rem !important;
    }

    .stats-panel {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .modal-content {
        width: 98% !important;
    }

    .footer-links {
        grid-template-columns: 1fr !important;
    }

    .hero-title {
        font-size: 1.2rem !important;
    }

    .hero-subtitle {
        font-size: 0.9rem !important;
    }

    #map, .leaflet-container {
        height: 250px !important;
    }

    .badge, .tag {
        font-size: 0.7rem !important;
        padding: 3px 6px !important;
    }

    /* 隱藏不必要的元素 */
    .desktop-only {
        display: none !important;
    }

    /* 優化間距 */
    .section {
        padding: 15px 0 !important;
    }

    .container {
        padding: 0 10px !important;
    }
}

/* ========== 平板優化 (600px - 959px) ========== */
@media (min-width: 600px) and (max-width: 959px) {
    .cameras-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .stats-panel {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .footer-links {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    table {
        font-size: 0.9rem !important;
    }

    .modal-content {
        width: 90% !important;
    }
}

/* ========== 橫屏優化 (landscape) ========== */
@media (max-height: 500px) and (orientation: landscape) {
    .header {
        padding: 10px 0 !important;
    }

    .header h1 {
        margin-bottom: 5px !important;
    }

    .hero {
        padding: 15px 0 !important;
    }

    #map, .leaflet-container {
        height: 250px !important;
    }

    .modal-body {
        max-height: 60vh !important;
    }
}

/* ========== 觸控裝置優化 ========== */
@media (hover: none) and (pointer: coarse) {
    /* 觸控裝置 - 移除 hover 效果，增大點擊區域 */
    
    .btn, button, a[role="button"] {
        min-height: 48px !important;
        min-width: 48px !important;
    }

    .camera-card:hover {
        transform: none !important; /* 移除 hover 動畫 */
    }

    .nav-btn:hover {
        background: inherit !important;
    }

    /* 移除 hover 的陰影效果 */
    .card:hover {
        box-shadow: inherit !important;
    }
}

/* ========== 高對比度模式 ========== */
@media (prefers-contrast: more) {
    body {
        font-weight: 500;
    }

    button, .btn {
        border: 2px solid currentColor;
    }

    .card {
        border: 1px solid #000;
    }
}

/* ========== 深色模式手機優化 ========== */
@media (max-width: 768px) {
    .dark-mode {
        background: #1a1a1a;
        color: #fff;
    }

    .dark-mode .header {
        background: #2a2a2a;
    }

    .dark-mode .card,
    .dark-mode .camera-card,
    .dark-mode .modal-content {
        background: #2a2a2a;
        color: #fff;
    }

    .dark-mode input,
    .dark-mode textarea,
    .dark-mode select {
        background: #333;
        color: #fff;
        border-color: #444;
    }
}

/* ========== 打印優化 ========== */
@media print {
    .header, .footer, .nav-btn, .menu-toggle, .fab {
        display: none !important;
    }

    body {
        background: white;
    }

    .card, .modal-content {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* ========== 安全區域 (瀏海屏手機) ========== */
@supports (padding: max(0px)) {
    body {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }

    .header {
        padding-top: max(12px, env(safe-area-inset-top));
    }

    .footer {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
}

/* ========== 輔助功能 ========== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========== 常見 UI 元素手機最佳化 ========== */

/* 確認對話框 */
.confirm-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 12px;
    z-index: 2000;
    max-width: 90vw;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

/* 吐司通知 */
.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 12px 16px;
    border-radius: 6px;
    max-width: 90vw;
    z-index: 1500;
}

/* 下拉列表 */
.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid #eee;
    border-radius: 6px;
    min-width: 150px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    z-index: 100;
}

.dropdown-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item:hover {
    background: #f0f0f0;
}

/* ========== 動畫和過渡 ========== */
@media (prefers-reduced-motion: no-preference) {
    * {
        scroll-behavior: smooth;
    }
}