/* ============================================================
 * 平台共用手機響應式 CSS
 * 所有 platform-*.html 共用，導入：
 *   <link rel="stylesheet" href="/css/platform-mobile.css">
 * 須放在頁內 <style> 之後（覆蓋優先）
 * ============================================================ */

/* App-like：禁用 iOS 雙擊縮放、防止橫向卷軸 */
html, body {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

/* 手機版（< 768px）覆蓋 */
@media (max-width: 768px) {
  /* Header */
  .header-inner {
    padding: 0 12px !important;
    height: 56px !important;
    gap: 8px !important;
  }
  .logo {
    font-size: 17px !important;
  }
  .nav, .nav-links {
    display: flex !important;
    gap: 0 !important;
    flex: 0 0 auto;
    flex-shrink: 0;
  }
  .nav-btn, .nav-link {
    padding: 6px 12px !important;
    font-size: 13px !important;
    flex-shrink: 0;
    white-space: nowrap;
  }
  /* 行動版完全隱藏頂部 nav—改由底部 Bottom Navigation 提供導覽 */
  .nav, .nav-links { display: none !important; }
  /* 行動版隱藏搜尋框 */
  .search-box { display: none !important; }
  .header-right { margin-left: auto !important; }
  /* 把 logo 與 header-right 兩端對齊 */
  .header-inner { justify-content: space-between !important; }
  .header-right {
    gap: 4px !important;
  }
  .btn-login, .btn-out, .btn-signout {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
  .user-info {
    font-size: 12px !important;
  }
  .user-info span {
    max-width: 60px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .avatar, .user-avatar {
    width: 26px !important;
    height: 26px !important;
  }

  /* Page container */
  .page, .container, main {
    padding: 12px 10px 50px !important;
  }
  .page-header h2 {
    font-size: 15px !important;
  }

  /* Strategy bar — 改為水平捲動 */
  .strat-btns {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    padding: 8px !important;
    gap: 6px !important;
    scrollbar-width: none;
  }
  .strat-btns::-webkit-scrollbar { display: none; }
  .strat-btn {
    padding: 6px 12px !important;
    font-size: 12px !important;
    flex-shrink: 0;
  }

  /* Stock table — 字體放小、padding 緊縮 */
  .stock-table { font-size: 12px !important; min-width: auto !important; }
  .stock-table th, .stock-table td { padding: 7px 6px !important; }
  .stock-table .cell-name { max-width: 90px !important; }

  /* Login gate */
  .login-gate { padding: 32px 18px !important; margin: 16px 10px !important; }
  .login-gate h3 { font-size: 17px !important; }
  .login-gate p { font-size: 13px !important; }

  /* Result panel header */
  .result-head { padding: 10px 12px !important; gap: 6px !important; }
  .result-name { font-size: 13px !important; }
  .result-date, .result-cnt { font-size: 10px !important; padding: 2px 6px !important; }
  .result-ts { display: none !important; }

  /* Date tabs */
  .hist-tabs { padding: 6px 8px !important; }
  .hist-tab { padding: 4px 10px !important; font-size: 11px !important; }

  /* Voucher box */
  #voucher-area {
    padding: 0 10px !important;
  }
  #voucher-area > div {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 14px !important;
  }
  #voucher-input {
    width: 100% !important;
  }
  #voucher-submit {
    width: 100% !important;
  }
}

/* 更小螢幕 (iPhone SE) < 360px */
@media (max-width: 360px) {
  .nav-btn { padding: 5px 8px !important; font-size: 11px !important; }
  .stock-table { font-size: 11px !important; }
  .stock-table th, .stock-table td { padding: 6px 4px !important; }
}

/* App-like 安全區域（iOS Safari 底部 home indicator） */
@supports (padding: max(0px)) {
  body {
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
  .header-inner {
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
  }
}