/* Reset & base styles */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
#root {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

body {
  font-family: "Hiragino Sans", "Noto Sans JP", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #09090b;
  color: #fafafa;
}

input,
textarea,
select,
button {
  font-family: inherit;
}

/* iOS でズームを防ぐため、入力フィールドは最低 16px */
input,
textarea,
select {
  font-size: 16px;
}

/* スクロールバー（任意） */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ============================================================
   Phase 24b 後続 (2026/5/27 セッション 58): 顧客一覧クイックアクション 3 ボタンの
   モバイル対応。プロジェクト全体は inline style 設計だが、メディアクエリ分岐は CSS
   側でしか書けないため、本セクションでのみ class セレクタを使用 (CrmPanel.jsx
   の 3 ボタンで className 指定)。

   ブレークポイント 640px: Tailwind の sm 互換、業界標準 (Apple HIG / Material
   Design でも mobile/tablet 境界として一般的)。

   PC (>= 641px) の表示:
     [📋 活動] [💰 売上] [📁 案件]
     - .qa-btn-icon: 絵文字表示 (📋 / 💰 / 📁)
     - .qa-btn-label: テキスト表示 (活動 / 売上 / 案件)
     - .qa-btn-mobile-label: 非表示 (display: none)

   スマホ (<= 640px) の表示 (2026/5/27 セッション 58 後半 更新):
     [動] [売] [件]
     - .qa-btn-icon: 非表示 (display: none、絵文字を消して幅を稼ぐ)
     - .qa-btn-label: visually-hidden (sr-only パターン、DOM 残置で a11y 維持)
     - .qa-btn-mobile-label: 漢字 1 文字表示 (動 / 売 / 件)
     - .qa-btn: 最小サイズに縮小 (高さ 24px 程度、padding 最小)

   a11y: スマホでも .qa-btn-label は visually-hidden で DOM に残し、スクリーン
   リーダーが「活動」「売上」「案件」を読み上げ可能。さらに button 自体に
   aria-label="活動記録" 等のフルラベルがある (CrmPanel.jsx 側で指定)、title 属性
   も併用で 3 層防御。
   ============================================================ */

/* PC 既定: スマホ専用ラベルを非表示 */
.qa-btn-mobile-label {
  display: none;
}

@media (max-width: 640px) {
  /* スマホ表示: 絵文字を完全に非表示 (幅節約) */
  .qa-btn-icon {
    display: none;
  }
  /* スマホ表示: PC 用テキスト「活動」「売上」「案件」を視覚的に隠す (sr-only パターン)。
     display: none ではなくスクリーンリーダーには残す手法 = a11y 維持 (button の
     aria-label と併せて 2 層防御)。 */
  .qa-btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  /* スマホ表示: 漢字 1 文字「動」「売」「件」を表示 */
  .qa-btn-mobile-label {
    display: inline;
  }
  /* スマホ表示: ボタンサイズを最小化。
     漢字 1 文字なので min-width 24px / min-height 24px で十分、tap target は
     ブラウザ既定 (約 24-28px) を尊重しつつ最小、複数ボタン横並びでも会社名表示
     領域を最大化。 */
  .qa-btn {
    padding: 4px 6px !important;
    font-size: 13px !important;
    font-weight: 700;
    min-width: 24px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
}