/* CMDB Assessment Kit - レスポンシブ対応CSS */
/* 既存のbellwood-theme.css, components.css, quiz-assessment.cssと組み合わせて使用 */

/* ===== モバイルメニューボタン ===== */
.mobile-menu-btn {
  display: none;
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 50;
  background-color: var(--color-slate-800);
  color: var(--color-white);
  padding: 0.5rem;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.mobile-menu-btn:hover {
  background-color: var(--color-slate-700);
}

.mobile-menu-btn:focus {
  outline: 2px solid var(--bws-gold);
  outline-offset: 2px;
}

/* ===== サイドバーオーバーレイ ===== */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: color-mix(in srgb, var(--color-black) 50%, transparent);
  z-index: 39;
  transition: opacity 0.3s ease;
}

.sidebar-overlay.open {
  display: block;
}

/* ===== モバイル用クローズボタン ===== */
.sidebar-close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: var(--color-white);
  padding: 0.25rem;
  cursor: pointer;
  display: none;
}

.sidebar-close-btn:focus {
  outline: 2px solid var(--bws-gold);
  outline-offset: 2px;
}

/* ===== レスポンシブテーブル ===== */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-slate-200);
}

.table-responsive table {
  min-width: 600px;
  width: 100%;
}

/* ===== モバイル対応 (768px以下) ===== */
@media (max-width: 768px) {
  /* モバイルメニューボタン表示 */
  .mobile-menu-btn {
    display: block;
  }

  .sidebar-close-btn {
    display: block;
  }

  /* サイドバーのモバイル対応 */
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    width: 280px;
    z-index: 40;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  /* メインコンテンツの調整 */
  main {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 1rem;
  }

  /* ヘッダーのモバイル調整 */
  .chapter-header {
    text-align: center;
    margin-bottom: 2rem;
  }

  .chapter-header h1 {
    font-size: var(--text-3xl);
    line-height: var(--text-3xl--line-height);
  }

  .chapter-header .subtitle {
    font-size: var(--text-lg);
    line-height: var(--text-lg--line-height);
  }

  /* セクションカードの調整 */
  .section-card {
    padding: 1rem;
    margin-bottom: 1.5rem;
  }

  /* フォントサイズの調整 */
  h1 {
    font-size: var(--text-3xl);
    line-height: var(--text-3xl--line-height);
  }

  h2 {
    font-size: var(--text-xl);
    line-height: var(--text-xl--line-height);
  }

  h3 {
    font-size: var(--text-lg);
    line-height: var(--text-lg--line-height);
  }

  /* アセスメントフォームの改善 */
  .assessment-form .radio-group {
    justify-content: space-between;
    gap: 0.25rem;
    margin-top: 0.5rem;
  }

  .assessment-form .radio-group > div {
    margin: 0.125rem;
    flex: 1;
    min-width: 0;
  }

  .assessment-form .radio-group label {
    width: 100%;
    padding: 0.5rem 0.25rem;
    font-size: var(--text-sm);
    min-width: 36px;
    text-align: center;
    display: block;
  }

  /* クイズコンテナの調整 */
  .game-container {
    padding: 1rem;
    margin: 1rem;
  }

  .game-container .game-title {
    font-size: 1.125rem;
    line-height: 1.4;
  }

  .options-container {
    flex-direction: column;
    gap: 0.5rem;
  }

  .option-button {
    padding: 0.75rem 1rem;
    font-size: var(--text-sm);
    text-align: left;
  }

  .action-button {
    width: 100%;
    margin: 0.5rem 0;
    padding: 0.75rem 1.5rem;
    font-size: var(--text-base);
  }

  /* アコーディオンの調整 */
  .term-accordion summary {
    padding: 0.75rem;
    font-size: var(--text-sm);
  }

  .term-accordion .accordion-content {
    padding: 0.75rem;
    font-size: var(--text-sm);
  }

  /* チャートコンテナの調整 */
  #assessment-charts-container {
    padding: 1rem;
  }

  #assessment-charts-container .chart-wrapper {
    height: 250px;
    min-height: 250px;
  }
}

/* ===== 極小画面対応 (480px以下) ===== */
@media (max-width: 480px) {
  main {
    padding: 0.75rem;
  }

  .section-card {
    padding: 0.75rem;
  }

  /* より小さなフォントサイズ */
  h1 {
    font-size: var(--text-2xl);
    line-height: var(--text-2xl--line-height);
  }

  h2 {
    font-size: var(--text-lg);
    line-height: var(--text-lg--line-height);
  }

  h3 {
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
  }

  /* アセスメントボタンをさらに小さく */
  .assessment-form .radio-group label {
    padding: 0.375rem 0.125rem;
    font-size: var(--text-xs);
    min-width: 30px;
  }

  /* ゲームコンテナの調整 */
  .game-container {
    padding: 0.75rem;
    margin: 0.5rem;
  }

  .game-container .game-title {
    font-size: 1rem;
  }

  /* アクションボタンの調整 */
  .action-button {
    padding: 0.625rem 1rem;
    font-size: var(--text-sm);
  }

  /* チャート高さをさらに調整 */
  #assessment-charts-container .chart-wrapper {
    height: 200px;
    min-height: 200px;
  }
}

/* ===== タブレット対応 (769px-1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {
  .sidebar {
    width: 240px;
  }

  main {
    margin-left: 240px;
    width: calc(100% - 240px);
    padding: 1.5rem;
  }

  .section-card {
    padding: 1.25rem;
  }

  h1 {
    font-size: var(--text-4xl);
    line-height: var(--text-4xl--line-height);
  }

  h2 {
    font-size: var(--text-2xl);
    line-height: var(--text-2xl--line-height);
  }
}

/* ===== デスクトップ (1025px以上) ===== */
@media (min-width: 1025px) {
  .mobile-menu-btn,
  .sidebar-close-btn {
    display: none;
  }

  .sidebar {
    transform: translateX(0);
    width: 256px;
  }

  main {
    margin-left: 256px;
    width: calc(100% - 256px);
    padding: 2rem;
  }
}

/* ===== 大画面対応 (1441px以上) ===== */
@media (min-width: 1441px) {
  main {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 280px;
  }

  .sidebar {
    left: calc((100vw - 1200px) / 2);
  }
}

/* ===== アクセシビリティ改善 ===== */
@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .sidebar-overlay,
  .mobile-menu-btn {
    transition: none !important;
  }

  .action-button,
  .option-button {
    transition: none !important;
  }
}

/* ===== ダークモード対応の準備 ===== */
@media (prefers-color-scheme: dark) {
  .sidebar-overlay {
    background-color: color-mix(in srgb, var(--color-black) 70%, transparent);
  }
}

/* ===== プリント用スタイル ===== */
@media print {
  .sidebar,
  .mobile-menu-btn,
  .sidebar-overlay,
  .sidebar-close-btn {
    display: none !important;
  }

  main {
    margin: 0 !important;
    width: 100% !important;
    padding: 0 !important;
  }

  .section-card {
    break-inside: avoid;
    margin-bottom: 1rem;
  }

  .no-print,
  .action-button {
    display: none !important;
  }

  /* テキストサイズの調整 */
  body {
    font-size: 12pt;
    line-height: 1.4;
  }

  h1 { font-size: 18pt; }
  h2 { font-size: 16pt; }
  h3 { font-size: 14pt; }
}

/* ===== タッチデバイス対応 ===== */
@media (hover: none) and (pointer: coarse) {
  /* タッチフレンドリーなサイズ */
  .action-button,
  .option-button,
  .mobile-menu-btn,
  .sidebar-close-btn {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
  }

  /* タップハイライトの調整 */
  .action-button,
  .option-button,
  .term-accordion summary,
  .assessment-form .radio-group label {
    -webkit-tap-highlight-color: color-mix(in srgb, var(--bws-gold) 30%, transparent);
  }
}

/* ===== フォーカス管理の改善 ===== */
.focus-visible-only:focus:not(:focus-visible) {
  outline: none;
}

.focus-visible-only:focus-visible {
  outline: 2px solid var(--bws-gold);
  outline-offset: 2px;
}

/* キーボードナビゲーション用 */
.sidebar a:focus,
.action-button:focus,
.option-button:focus,
.mobile-menu-btn:focus,
.sidebar-close-btn:focus {
  outline: 2px solid var(--bws-gold);
  outline-offset: 2px;
  z-index: 1;
}

/* ===== 高コントラストモード対応 ===== */
@media (prefers-contrast: high) {
  .sidebar {
    border-right: 2px solid var(--color-white);
  }

  .action-button,
  .option-button {
    border: 2px solid currentColor;
  }

  .assessment-form .radio-group label {
    border-width: 2px;
  }
}

/* ===== ランドスケープモード (モバイル横向き) ===== */
@media (max-width: 812px) and (orientation: landscape) {
  .sidebar {
    width: 240px;
  }

  main {
    padding: 1rem;
  }

  .game-container {
    padding: 1rem;
  }

  /* ヘッダーを小さくして縦スペースを節約 */
  .chapter-header {
    margin-bottom: 1rem;
  }

  .chapter-header h1 {
    font-size: var(--text-2xl);
    margin-bottom: 0.5rem;
  }
}