/* 2026-09-08 CSS Phase A: @layer utilities で包む (Cascade Layers 導入)。 */
@layer utilities {
  /* ==================== ヘルパー・ユーティリティクラス ====================
   *
   * 2026-08-08 PR-A7-1: admin テンプレの style="..." 削減を進めるため、
   * 実際に 3 回以上出る繰り返しパターンを集約。
   *
   * 命名規則: Tailwind 風の短命 (u- prefix なし、業界標準に寄せる)。
   * ローカル定義との衝突は避けるため、追加時は `grep -rIn "\\.NAME"` で
   * 既存参照 0 件を確認してから追加すること。
   *
   * 対象: 通常の class 属性からのみ。data-* / aria-* からの動的付与は非対象。
   * ==================================================================== */

  /* ---- 表示制御 ----
   * 2026-08-20 F14 / 2026-09-08 Phase B: `@layer utilities` が最上位優先の
   * ため !important 削除。utility として全 layer (base/layout/components/pages)
   * の詳細度を宣言的に上書きする。
   * JS 側は .classList.remove('hidden') / .classList.add('hidden') で表示切替
   * (element.style.display での override は禁止、DESIGN.md §10.1 準拠)。
   */
  .hidden {
    display: none;
  }

  /* 2026-09-02 (Issue #1851 Medium): HTML5 [hidden] attribute の flex/grid 親配下バグ対応。
     `@layer utilities` の優位で他 layer の display: flex に確実に勝つ。 */
  [hidden] {
    display: none;
  }

  .d-inline {
    display: inline;
  }

  /* ---- テキスト整列 ---- */
  .text-center {
    text-align: center;
  }
  .text-right {
    text-align: right;
  }

  /* ---- ページネーションボタン (2026-08-20 F14 + F15) ----
   * 汎用「前へ / 次へ」リンク用。inline style で 4+ 回反復していたパターン。
   * 実利用: anomaly_list.html, permanent_disable_admin.html 等
   *
   * F15: touch target 44px 保証 (WCAG 2.5.5 Target Size AAA)
   */
  .pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0.4em 0.8em;
    border: 1px solid var(--border-default);
    border-radius: 4px;
    text-decoration: none;
    color: var(--text-primary);
  }
  .pagination-btn:hover {
    background: var(--surface-subtle);
    border-color: var(--brand-primary);
    color: var(--brand-primary);
  }
  .pagination-btn:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
  }

  /* ---- モーダル / ダイアログのフッタ (右寄せアクション行) ----
   * pattern: <div class="dialog-actions">... <button>... </div>
   * 実利用: admin_users.html / admin_stores.html / admin_operating_hours.html
   * 等の form 送信 / キャンセル 2 ボタン
   */
  .dialog-actions {
    margin-top: var(--space-4, 16px);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2, 8px);
  }

  /* ---- 2026-08-20 F14-D 追加: 3+ 回反復 inline style の class 化 ----
   * design-review report F14 finding。inline style 属性の削減。
   * 各パターンは 3+ 回反復していたもの。詳細は各パターンのコメント参照。
   */

  /* form label スモール (bqml_device_rightsizing / replacement_forecast /
     store_rankings で反復) */
  .form-label-sm {
    font-size: 14px;
    margin-bottom: 8px;
  }

  /* form ヒントテキスト — ラベル直下配置 (vendor csv_export で反復) */
  .helper-hint-below {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 2px;
  }

  /* form ヒントテキスト — 水平配置 (vendor csv_export で反復) */
  .helper-hint-inline {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-left: 6px;
  }

  /* margin utility (admin_device_mgmt 系で反復) */
  .mt-2 {
    margin-top: 0.5rem;
  }
  .mt-3 {
    margin-top: 0.75rem;
  }

  /* flex 行 折返し (device_variance / heatmap / device_calendar で反復) */
  .flex-row-wrap-md {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
  }

  /* inline-block utility (device_calendar で反復) */
  .d-inline-block {
    display: inline-block;
  }

  /* interaction utility (admin_floor_map_edit / device_status_table で反復) */
  .cursor-pointer {
    cursor: pointer;
  }

  /* text color utility (vendor/repair_list / floor_map で反復) */
  .text-critical {
    color: var(--color-critical);
  }
  /* 2026-09-02 (Issue #1851 Phase 1 Medium): success 色も utility 化 (scanner 接続表示等で反復) */
  .text-success {
    color: var(--color-success);
  }
  /* 2026-09-04: charger_mgmt/store_detail.html で使用されていたが CSS 定義漏れ */
  .text-muted {
    color: var(--text-tertiary);
  }

  /* text decoration utility (dashboard / vendor/repair_list / battery で反復) */
  .text-no-underline {
    text-decoration: none;
  }

  /* ==================== アクセシビリティ向上 ==================== */

  /* フォーカス状態の明示 */
  *:focus-visible {
    outline: 3px solid var(--brand-accent);
    outline-offset: 2px;
    border-radius: var(--border-radius-sm);
  }

  /* Skip link (2026-08-19 F11): キーボード / screen reader user が
     header/nav をバイパスして main content に直接ジャンプできる。
     普段は visually-hidden、focus 時のみ画面左上に表示。 */
  .skip-link {
    position: absolute;
    top: -100px;
    left: 8px;
    z-index: 10000;
    padding: var(--space-3) var(--space-4);
    background: var(--brand-primary);
    color: white;
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-md);
    transition: top var(--transition-speed-fast) var(--transition-easing);
  }

  .skip-link:focus-visible {
    top: 8px;
    outline: 2px solid white;
    outline-offset: 2px;
  }

  /* 2026-09-03 Issue #1851 Phase 1 L-2: 汎用エラー画面 layout */
  .error-page-container {
    max-width: 600px;
    margin: 2rem auto;
    text-align: center;
  }

  .floor-map-not-found {
    padding: 32px;
    text-align: center;
  }

  .floor-map-not-found__note {
    color: var(--color-text-secondary, #6b7280);
    margin: 16px 0;
  }

  /* 2026-09-03 Issue #1851 Phase 1 L-3: empty state 大アイコン */
  .empty-state__icon-lg {
    font-size: 2rem;
    margin-bottom: 0.5rem;
  }
}