/* ==========================================================================
   ChingTech OS - Mobile Common Styles（手機響應式共用樣式）
   Sprint 3 深度優化
   ========================================================================== */

/* --------------------------------------------------------------------------
   Breakpoint：768px 以下視為手機
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  /* ========================================================================
     1. 全域觸控優化
     ======================================================================== */

  /* 避免手機雙擊縮放干擾操作 */
  html {
    touch-action: manipulation;
  }

  /* 確保所有可互動元素有足夠觸控區域（WCAG 2.5.5 建議 44×44px） */
  button,
  [role="button"],
  a,
  input,
  select,
  textarea {
    min-height: 44px;
    min-width: 44px;
  }

  /* ========================================================================
     2. 桌面圖示區域隱藏（當有視窗開啟時）
     ======================================================================== */

  /* 手機上視窗全螢幕，桌面圖示不需顯示 —— 由 JS 切換 body class */
  body.mobile-window-active .desktop-icon {
    display: none;
  }

  /* ========================================================================
     3. 安全區域（瀏海/挖孔螢幕/底部手勢列）
     ======================================================================== */
  body {
    /* 確保內容不被瀏海或底部手勢列遮擋 */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* header 頂部安全區域 */
  .header-bar {
    padding-top: env(safe-area-inset-top);
  }

  /* ========================================================================
     4. 捲動行為優化
     ======================================================================== */

  /* 使用原生慣性捲動 */
  .window-content,
  .desktop-area {
    -webkit-overflow-scrolling: touch;
  }

  /* ========================================================================
     5. 文字大小自動調整防護
     ======================================================================== */
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* ========================================================================
     6. Sprint 3 — 全域字體與間距微調
     ======================================================================== */

  /* 基礎字體略為放大，提高小螢幕可讀性 */
  body {
    font-size: var(--font-size-md, 15px);
    line-height: 1.6;
  }

  /* 標題層級在手機上的字體大小 */
  h1 { font-size: 1.5rem; line-height: 1.3; }
  h2 { font-size: 1.25rem; line-height: 1.35; }
  h3 { font-size: 1.1rem; line-height: 1.4; }

  /* 小字文字（如 caption、label）確保最小可讀性 */
  small, .text-sm, caption, label {
    font-size: max(0.75rem, 12px);
    line-height: 1.4;
  }

  /* ========================================================================
     7. Sprint 3 — Taskbar / Dock 在手機視窗開啟時隱藏
     ======================================================================== */
  body.mobile-window-active .taskbar {
    display: none;
  }

  /* ========================================================================
     8. Sprint 3 — 應用程式選單按鈕（由 JS 插入 .header-mobile-menu-btn）
     ======================================================================== */
  .header-mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm, 6px);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.15s ease;
    margin-right: var(--spacing-xs, 4px);
  }

  .header-mobile-menu-btn:hover,
  .header-mobile-menu-btn:active {
    background-color: var(--hover-bg, rgba(255, 255, 255, 0.08));
    color: var(--text-primary);
  }

  .header-mobile-menu-btn .icon svg {
    width: 22px;
    height: 22px;
  }

  /* ========================================================================
     9. Sprint 3 — 通用工具列換行（給子元件 CSS 繼承用）
     ======================================================================== */
  .toolbar-wrap-mobile {
    flex-wrap: wrap;
    gap: var(--spacing-xs, 4px);
    justify-content: center;
  }

  /* 工具列內按鈕在換行時也保持可讀性 */
  .toolbar-wrap-mobile > button,
  .toolbar-wrap-mobile > [role="button"],
  .toolbar-wrap-mobile > select {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: var(--font-size-sm, 0.875rem);
  }

  /* ========================================================================
     10. Sprint 3 — 視窗內容區域捲動與溢位處理
     ======================================================================== */
  .window-body {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }
}

/* ==========================================================================
   Login 頁面手機版樣式
   ========================================================================== */
@media (max-width: 768px) {
  .login-container {
    padding: var(--spacing-md);
  }

  .login-card {
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
  }

  .login-logo-icon {
    width: 64px;
    height: 64px;
  }

  .login-logo-text {
    font-size: 1.25rem;
  }

  .login-logo-text span {
    font-size: 1.25rem;
  }
}

/* ==========================================================================
   列印時隱藏不必要元素
   ========================================================================== */
@media print {
  .header-bar,
  .window-titlebar,
  .window-resize,
  .desktop-icon {
    display: none !important;
  }
}