/* ========================================
   MASTER TEMPLATE - MOBILE RESPONSIVE CSS
   主模板手機版響應式樣式
   ======================================== */

/* ========================================
   目標：為所有頁面提供統一的手機版基礎樣式
   
   負責範圍：
   1. Header 頁頭導航
   2. Footer 頁腳
   3. Main Content Container 主要內容容器
   4. Global Layout 全局佈局
   
   不負責：
   - 頁面特定內容樣式（由子模板CSS處理）
   - 組件內部樣式（由組件CSS處理）
   ======================================== */

/* ===== BREAKPOINTS ===== */
/* 
  手機版: ≤768px
  平板版: 769px - 1023px
  桌面版: ≥1024px
*/

/* ========================================
   MOBILE: ≤768px
   ======================================== */
/* ===== 頁首底色：桌機/平板基準（避免透明看到下方內容） 2026-04-18 ===== */
.header {
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
  
  /* ===== 1. GLOBAL LAYOUT ===== */
  body {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* 主要內容區域 */
  .main-content,
  main {
    padding: 12px !important;
    min-height: calc(100vh - 140px) !important;
  }

  /* 容器 */
  .container,
  .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* ===== 2. HEADER (頁頭) ===== */
  .header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: white !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    padding: 10px 12px !important;
  }

  .header-container {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  /* Logo區域 */
  .header-left {
    flex: 1 !important;
    min-width: auto !important;
  }

  .logo-group {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .platform-logo {
    width: 32px !important;
    height: 32px !important;
  }

  .platform-name {
    display: none !important;
  }

  /* 桌面版導航隱藏 */
  .header-center.desktop-only {
    display: none !important;
  }

  /* 手機版導航顯示 */
  .header-right {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
  }

  /* Hamburger Menu Button */
  .mobile-menu-btn {
    display: flex !important;
    width: 40px !important;
    height: 40px !important;
    padding: 8px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
  }

  /* Mobile Navigation Drawer */
  .mobile-nav-drawer {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    width: 280px !important;
    height: 100vh !important;
    background: white !important;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2) !important;
    transition: right 0.3s ease !important;
    z-index: 2000 !important;
    overflow-y: auto !important;
  }

  .mobile-nav-drawer.open {
    right: 0 !important;
  }

  /* Mobile Nav Overlay */
  .mobile-nav-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.5) !important;
    display: none !important;
    z-index: 1999 !important;
  }

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

  /* ===== 3. FOOTER (頁腳) ===== */
  .footer {
    padding: 20px 12px !important;
    text-align: center !important;
  }

  .footer-container {
    flex-direction: column !important;
    gap: 16px !important;
  }

  .footer-links {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: center !important;
  }

  .footer-link {
    font-size: 13px !important;
  }

  .footer-text {
    font-size: 12px !important;
  }

  /* ===== 4. BOTTOM NAVIGATION (底部導航) ===== */
  .mobile-bottom-nav {
    display: block !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: white !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
    padding: 0 !important;
    z-index: 999 !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05) !important;
    height: 70px !important;
  }

  .mobile-bottom-nav-item {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 8px 4px !important;
    text-decoration: none !important;
    color: #6b7280 !important;
    transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
  }

  .mobile-bottom-nav-item.active {
    color: #8b5cf6 !important;
  }

  .mobile-bottom-nav-icon {
    width: 24px !important;
    height: 24px !important;
  }

  .mobile-bottom-nav-text {
    font-size: 11px !important;
    font-weight: 500 !important;
  }
  /* Fix: bottom-nav child styles using correct class names */
  .mobile-bottom-nav .bottom-nav-container {
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    height: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .mobile-bottom-nav .bottom-nav-item {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 8px 4px !important;
    text-decoration: none !important;
    color: #6b7280 !important;
    font-size: inherit !important;
    min-width: 0 !important;
  }

  .mobile-bottom-nav .bottom-nav-item.active {
    color: #8b5cf6 !important;
  }

  .mobile-bottom-nav .bottom-nav-icon {
    font-size: 1.25rem !important;
    line-height: 1 !important;
  }

  .mobile-bottom-nav .bottom-nav-icon .inline-svg svg {
    width: 22px !important;
    height: 22px !important;
  }

  .mobile-bottom-nav .bottom-nav-label {
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
    max-width: 100% !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  /* ===== 5. CARDS & CONTAINERS ===== */
  .card,
  .panel,
  .box {
    border-radius: 12px !important;
    margin-bottom: 12px !important;
  }

  .card-header,
  .panel-heading {
    padding: 14px 16px !important;
    font-size: 16px !important;
  }

  .card-body,
  .panel-body {
    padding: 16px !important;
  }

  /* ===== 6. BUTTONS ===== */
  .btn,
  button:not(.consolidation-tab-btn):not(.mobile-menu-btn):not(.lang-switcher__trigger):not(.transit-complete-btn):not(.btn-icon):not(.daily-date):not(.daily-stats-reset):not(.decimal-toggle):not(.mark-btn):not(.weight-row-btn):not(.inline-show-all-btn):not(.tracking-status):not(.currency-btn):not(.tab-btn):not(.bsmi-header):not(.bsmi-variant-select):not(.import-chip):not(.tracking-status):not(.notification-bell-btn):not(.lang-switcher__trigger) {
    padding: 12px 20px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
    min-height: 44px !important;
  }

  .btn-sm {
    padding: 8px 16px !important;
    font-size: 13px !important;
    min-height: 36px !important;
  }

  .btn-lg {
    padding: 14px 24px !important;
    font-size: 17px !important;
    min-height: 52px !important;
  }

  /* ===== 7. FORMS ===== */
  .form-group {
    margin-bottom: 16px !important;
  }

  .form-label,
  label {
    font-size: 14px !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
  }

  .form-control,
  input[type=text],
  input[type=email],
  input[type=password],
  input[type=number],
  input[type=tel],
  textarea,
  select {
    width: 100% !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
    min-height: 44px !important;
  }

  textarea {
    min-height: 100px !important;
  }

  /* ===== 8. TABLES ===== */
  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  table {
    font-size: 13px !important;
  }

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

  /* ===== 9. MODALS (模態框) ===== */
  .modal-dialog {
    margin: 10px !important;
    max-width: calc(100vw - 20px) !important;
  }

  .modal-content {
    border-radius: 16px !important;
  }

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

  .modal-title {
    font-size: 18px !important;
  }

  .modal-body {
    padding: 16px !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
  }

  .modal-footer {
    padding: 16px !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .modal-footer .btn {
    width: 100% !important;
  }

  /* ===== 10. ALERTS & NOTIFICATIONS ===== */
  .alert {
    padding: 14px 16px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
  }

  .notification {
    margin: 10px !important;
    max-width: calc(100vw - 20px) !important;
  }

  /* ===== 11. SPACING UTILITIES ===== */
  .mt-mobile-sm { margin-top: 8px !important; }
  .mt-mobile-md { margin-top: 16px !important; }
  .mt-mobile-lg { margin-top: 24px !important; }

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

  .p-mobile-sm { padding: 8px !important; }
  .p-mobile-md { padding: 16px !important; }
  .p-mobile-lg { padding: 24px !important; }

  /* ===== 12. VISIBILITY UTILITIES ===== */
  .desktop-only {
    display: none !important;
  }

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

  .mobile-flex {
    display: flex !important;
  }

  .mobile-grid {
    display: grid !important;
  }
}

/* ========================================
   TABLET: 769px - 1023px
   ======================================== */
@media (min-width: 769px) and (max-width: 1023px) {
  body {
    font-size: 15px !important;
  }

  .main-content,
  main {
    padding: 20px !important;
  }

  .header {
    padding: 12px 20px !important;
  }

  .container {
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ========================================
   DESKTOP: ≥1024px AND landscape
   (portrait wide screens like rotated monitors get mobile UI — see PORTRAIT block at EOF)
   ======================================== */
@media (min-width: 1024px) and (orientation: landscape) {
  .mobile-only {
    display: none !important;
  }

  .mobile-bottom-nav {
    display: none !important;
  }

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

/* ========================================
   Auth Page Input Fix - 認證頁面輸入框修復
   修復圖標與文字重疊問題 (高優先級選擇器)
   Added: 2026-01-17
   ======================================== */
@media (max-width: 768px) {
  input[type=text].auth-page__input,
  input[type=email].auth-page__input,
  input[type=password].auth-page__input,
  input[type=tel].auth-page__input {
    padding: 14px 15px 14px 52px !important;
  }
  
  .auth-page__input-wrapper:has(.auth-page__input-action) input.auth-page__input {
    padding-right: 48px !important;
  }
}


/* ============ Mobile footer (added 2026-04-28) ============ */
.mobile-footer {
    padding: 18px 16px calc(70px + 18px);  /* 70px reserved for fixed .mobile-bottom-nav */
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    text-align: center;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.6;
}

.mobile-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 8px;
    margin-bottom: 10px;
}

.mobile-footer-links a {
    color: #4b5563;
    text-decoration: none;
    font-weight: 500;
}

.mobile-footer-links a:hover,
.mobile-footer-links a:focus-visible {
    color: #6366f1;
    text-decoration: underline;
}

.mobile-footer-links span {
    color: #d1d5db;
}

.mobile-footer-contact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
    font-size: 11px;
}

/* a11y 2026-09-13：頁尾聯絡連結原本吃 typography.css 的 a{color:var(--color-primary)} #8b5cf6（對比 4.05），同色系加深到 AA */
.mobile-footer-contact a.mobile-footer-link {
    color: #814ef5;
}

.mobile-footer-copy {
    font-size: 11px;
    color: #697282;
}


/* ============ 防止 horizontal overflow 破壞 fixed positioning (2026-04-28) ============ */
/* 症狀：default 分支(未付/歷史)某元素撐爆 document 寬度，導致 .mobile-bottom-nav fixed 跟著 document 走而非 viewport */
@media (max-width: 768px) {
    html, body {
        overflow-x: clip !important;
        max-width: 100vw !important;
    }
}

/* ========================================
   PORTRAIT MONITOR / VERTICAL DISPLAY (added 2026-05-13)
   Use case: 直立螢幕直播（電腦螢幕轉 90°）+ 大尺寸 portrait 平板
   Trigger: orientation portrait AND viewport width 769-1366px
   Effect: show mobile bottom nav + hamburger menu so 直立直播畫面可操作
   ======================================== */
@media (orientation: portrait) and (min-width: 769px) and (max-width: 1366px) {
  .mobile-bottom-nav {
    display: block !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: #ffffff !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
    padding: 0 !important;
    z-index: 1020 !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05) !important;
    height: 70px !important;
  }
  .mobile-bottom-nav .bottom-nav-container {
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    height: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .mobile-bottom-nav .bottom-nav-item {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 10px 6px !important;
    text-decoration: none !important;
    color: #6b7280 !important;
    min-width: 0 !important;
  }
  .mobile-bottom-nav .bottom-nav-item.active { color: #8b5cf6 !important; }
  .mobile-bottom-nav .bottom-nav-icon { font-size: 1.5rem !important; line-height: 1 !important; }
  .mobile-bottom-nav .bottom-nav-icon .inline-svg svg { width: 28px !important; height: 28px !important; }
  .mobile-bottom-nav .bottom-nav-label { font-size: 13px !important; font-weight: 500 !important; line-height: 1.2 !important; white-space: nowrap !important; }

  body { padding-bottom: 70px !important; }
  .mobile-tablet-only { display: inline-flex !important; }
}


/* ========================================
   FIX 2026-05-29: 導覽列「頁首 / 頁尾」重複 (平板)
   ----------------------------------------
   底部導覽(頁尾: 首頁/帳單/集運/搜索/我的) 會在以下情境顯示:
     - 任何方向 ≤1023px
     - 直向 769–1366px (見上方 PORTRAIT 直向螢幕區塊)
   這些情境屬「手機版型」,桌機頂部導覽 (.header-center 5 圖示 + .more-menu-wrapper「更多」)
   應隱藏,避免與底部導覽重複;只用 底部導覽 + 漢堡 ☰。
   只有「桌機橫向 ≥1024px」沒有底部導覽,才保留頂部導覽並隱藏漢堡。
   斷點對齊 header.css(1024px) 與 portrait 直向區塊(1366px)。
   ======================================== */

/* (1) ≤1023px 任何方向:隱藏桌機「更多」下拉
       (中央 5 圖示 .header-center 已由 header.css 於 <1024px 隱藏) */
@media (max-width: 1023px) {
  .more-menu-wrapper.desktop-only { display: none !important; }
}

/* (2) 直向 769–1366px (如 iPad / iPad Pro 直向):底部導覽已顯示,
       隱藏整個桌機頂部導覽(中央 5 圖示 + 更多),只留 底部導覽 + 漢堡 ☰ */
@media (orientation: portrait) and (min-width: 769px) and (max-width: 1366px) {
  .header-center,
  .more-menu-wrapper.desktop-only { display: none !important; }
}

/* (3) 桌機橫向 ≥1024px (無底部導覽):隱藏漢堡 ☰,使用桌機頂部導覽。
       #hamburgerToggle 用 ID 高權重,壓過 a11y.css 的 .mobile-tablet-only !important */
@media (min-width: 1024px) and (orientation: landscape) {
  #hamburgerToggle { display: none !important; }
}

/* ========================================
   i18n 桌面防溢出修正 (2026-06-02)
   14 語系翻譯後文字變長,撐破桌面卡片/導覽容器的系統性修正。
   ======================================== */

/* (A) 全站安全底網:任何過長單字/字串可斷行,不影響刻意 nowrap 的覆寫。
       overflow-wrap:break-word 只在文字「即將溢出」時才介入,正常文字無副作用。 */
*, *::before, *::after { overflow-wrap: break-word; }

/* (B) 桌面導覽列 (≥1024px):
       1. 品牌字可縮、超長以 … 省略,不再把中央導覽擠到換行變形 (站長指定:品牌用 HowBridge)
       2. 導覽項文字不 mid-word 折行 (避免日文「集/荷」直向堆疊) */
@media (min-width: 1024px) {
  .platform-name {
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nav-text { white-space: nowrap; }
  .nav-link { white-space: nowrap; }
}