/* ============================================================
 * manual.css
 * マニュアル詳細ページCSS
 * Manual detail pages CSS (chapter sidebar, content, navigation)
 * ============================================================ */

/* ------------------------------------------------------------
 * マニュアル一覧（ダッシュボード内）
 * Manual list items (shown in dashboard)
 * ------------------------------------------------------------ */
.manual-list { display: flex; flex-direction: column; gap: 0.5rem; }
.manual-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: rgba(255, 255, 255, 0.03); border-radius: 6px; border: 1px solid var(--dash-glass-border); }
.manual-item svg { stroke: var(--dash-accent); flex-shrink: 0; }
.manual-item-title { flex: 1 1 0%; color: var(--dash-text-primary); font-size: 0.875rem; }
a.manual-item { text-decoration: none; }
a.manual-item:hover { background: rgba(255, 255, 255, 0.06); }
.manual-item .dashboard-table-btn { margin-left: auto; }

/* ------------------------------------------------------------
 * マニュアル詳細：レイアウト
 * Manual detail: main layout (sidebar + content area)
 * ------------------------------------------------------------ */
.manual-detail-container { display: flex; gap: 1.5rem; height: calc(-120px + 100vh); padding: 1.5rem; }
.manual-chapter-sidebar { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; gap: 0.25rem; overflow-y: auto; padding-right: 0.5rem; }
.manual-chapter-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: transparent; border: none; border-radius: 6px; cursor: pointer; text-align: left; color: var(--dash-text-secondary); font-size: 0.875rem; }
.manual-chapter-item:hover { background: rgba(255, 255, 255, 0.05); }
.manual-chapter-item.active { background: rgba(34, 211, 238, 0.1); color: var(--dash-text-primary); }
.manual-chapter-number { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; font-size: 0.75rem; font-weight: 600; flex-shrink: 0; }
.manual-chapter-item.active .manual-chapter-number { background: var(--dash-accent); color: rgb(15, 23, 42); }
.manual-chapter-title { flex: 1 1 0%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------
 * 目次トグル（モバイル用）
 * Table of Contents toggle and dropdown (mobile)
 * ------------------------------------------------------------ */
.dashboard-toc-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--dash-glass-border); border-radius: 8px; color: var(--dash-text-secondary); cursor: pointer; transition: all 0.2s ease 0s; }
.dashboard-toc-toggle:hover { background: rgba(255, 255, 255, 0.1); color: var(--dash-text-primary); }
.manual-toc-dropdown { background: var(--dash-glass); border: 1px solid var(--dash-glass-border); border-radius: 12px; margin: 0px 1rem 1rem; overflow: hidden; }
.manual-toc-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem; border-bottom: 1px solid var(--dash-glass-border); font-weight: 600; color: var(--dash-text-primary); }
.manual-toc-close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: transparent; border: none; color: var(--dash-text-secondary); cursor: pointer; border-radius: 6px; }
.manual-toc-close:hover { background: rgba(255, 255, 255, 0.1); color: var(--dash-text-primary); }
.manual-toc-list { display: flex; flex-direction: column; max-height: 300px; overflow-y: auto; }
.manual-toc-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: transparent; border: none; text-align: left; color: var(--dash-text-secondary); cursor: pointer; transition: background 0.2s ease 0s; }
.manual-toc-item:hover { background: rgba(255, 255, 255, 0.05); }
.manual-toc-item.active { background: rgba(34, 211, 238, 0.1); color: var(--dash-text-primary); }
.manual-toc-number { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; font-size: 0.75rem; font-weight: 600; flex-shrink: 0; }
.manual-toc-item.active .manual-toc-number { background: var(--dash-accent); color: rgb(15, 23, 42); }
.manual-toc-title { flex: 1 1 0%; }
@media (max-width: 768px) {
  .dashboard-toc-toggle { display: flex; }
}

/* ------------------------------------------------------------
 * 目次サイドバー（モバイル全画面）
 * TOC sidebar (mobile fullscreen overlay)
 * ------------------------------------------------------------ */
.toc-sidebar { display: none; position: fixed; top: 0px; left: 0px; width: 100%; height: 100vh; background: linear-gradient(135deg, rgb(15, 23, 42) 0%, rgb(30, 41, 59) 100%); z-index: 1001; flex-direction: column; transform: translateX(-100%); transition: transform 0.3s ease 0s; overflow: hidden; }
.toc-sidebar::before { content: ""; position: absolute; bottom: 20%; right: 10%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(34, 211, 238, 0.15) 0%, transparent 70%); pointer-events: none; }
.toc-sidebar.open { transform: translateX(0px); }
.toc-sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--dash-glass-border); position: relative; z-index: 1; }
.toc-sidebar-title { font-size: 1rem; font-weight: 600; color: var(--dash-text-primary); }
.toc-sidebar-list { flex: 1 1 0%; overflow-y: auto; padding: 0.75rem; position: relative; z-index: 1; }
.toc-sidebar-item { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.875rem 1rem; background: transparent; border: none; border-radius: 8px; cursor: pointer; text-align: left; color: var(--dash-text-secondary); transition: all 0.2s ease 0s; }
.toc-sidebar-item:hover { background: rgba(255, 255, 255, 0.05); }
.toc-sidebar-item.active { background: rgba(34, 211, 238, 0.1); color: var(--dash-text-primary); }
.toc-sidebar-number { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; font-size: 0.8rem; font-weight: 600; flex-shrink: 0; }
.toc-sidebar-item.active .toc-sidebar-number { background: var(--dash-accent); color: rgb(15, 23, 42); }
.toc-sidebar-chapter-title { flex: 1 1 0%; font-size: 0.9rem; }
@media (max-width: 768px) {
  .toc-sidebar { display: flex; }
}

/* ------------------------------------------------------------
 * マニュアルコンテンツエリア
 * Manual content area (chapter content, text, images)
 * ------------------------------------------------------------ */
.manual-content-area { flex: 1 1 0%; display: flex; flex-direction: column; background: var(--dash-glass); border: 1px solid var(--dash-glass-border); border-radius: 12px; overflow: hidden; min-height: 0; }
.chapter-content { display: flex; flex-direction: column; flex: 1 1 0%; min-height: 0; overflow: hidden; }
.manual-content-scroll { flex: 1 1 0%; padding: 2rem; overflow-y: auto; }
.manual-content-title { font-size: 1.5rem; font-weight: 600; color: var(--dash-text-primary); margin-bottom: 1.5rem; }
.manual-content-item { margin-bottom: 1.5rem; }
.manual-content-item.with-image { display: flex; flex-direction: column; gap: 1.25rem; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--dash-glass-border); border-radius: 12px; padding: 1.5rem; margin-bottom: 0.5rem; }
.manual-content-item.with-image .manual-content-paragraph { margin-bottom: 0px; }
.manual-content-paragraph.step-heading { margin-top: 2rem; }
.manual-content-paragraph { color: var(--dash-text-secondary); font-size: 0.9375rem; line-height: 1.7; margin-bottom: 0px; white-space: pre-wrap; }
.manual-content-paragraph strong { color: var(--dash-text-primary); font-weight: 600; }
.manual-content-paragraph .text-red { color: rgb(239, 68, 68); font-weight: 500; }
.manual-content-paragraph .text-underline { text-decoration: underline; text-underline-offset: 3px; }
.manual-content-image { border-radius: 12px; overflow: hidden; border: 1px solid var(--dash-border); background: var(--dash-card); max-width: 220px; align-self: center; box-shadow: rgba(0, 0, 0, 0.3) 0px 8px 32px; cursor: pointer; transition: transform 0.2s ease 0s, box-shadow 0.2s ease 0s; }
.manual-content-image:hover { transform: scale(1.02); box-shadow: rgba(0, 0, 0, 0.4) 0px 12px 40px; }
.manual-content-image img { width: 100%; height: auto; max-height: 400px; object-fit: contain; display: block; }
@media (max-width: 768px) {
  .manual-content-item.with-image { padding: 1rem; }
  .manual-content-image { max-width: 180px; }
}
.manual-content-images-row { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: flex-start; }
.manual-content-images-row .manual-content-image { flex: 0 0 auto; max-width: 180px; }
.manual-content-images-row .manual-content-image img { max-height: 360px; }
@media (max-width: 768px) {
  .manual-content-images-row { gap: 0.75rem; }
  .manual-content-images-row .manual-content-image { max-width: 140px; }
  .manual-content-images-row .manual-content-image img { max-height: 280px; }
}
.manual-content-image-placeholder { margin: 2rem 0px; }
.manual-placeholder-box { background: rgba(255, 255, 255, 0.03); border: 1px dashed var(--dash-border); border-radius: 8px; height: 200px; display: flex; align-items: center; justify-content: center; color: var(--dash-text-muted); font-size: 0.875rem; }

/* ------------------------------------------------------------
 * マニュアルナビゲーション（前/次ボタン）
 * Manual navigation buttons (prev/next)
 * ------------------------------------------------------------ */
.manual-navigation { display: flex; justify-content: space-between; padding: 1rem 2rem; border-top: 1px solid var(--dash-glass-border); background: rgba(0, 0, 0, 0.2); flex-shrink: 0; }
.manual-nav-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.25rem; border-radius: 6px; font-size: 0.875rem; font-weight: 500; cursor: pointer; border: 1px solid var(--dash-glass-border); background: transparent; color: var(--dash-text-secondary); }
.manual-nav-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.05); color: var(--dash-text-primary); }
.manual-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.manual-nav-btn-next { background: var(--dash-accent); color: rgb(255, 255, 255); border-color: var(--dash-accent); }
.manual-nav-btn-next:hover:not(:disabled) { background: rgba(34, 211, 238, 0.8); }
.manual-nav-btn-next svg { stroke: rgb(255, 255, 255); }

/* ------------------------------------------------------------
 * レスポンシブ（マニュアル）
 * Responsive: manual detail layout changes
 * ------------------------------------------------------------ */

/* ------------------------------------------------------------
 * レスポンシブ（マニュアル）
 * Responsive: manual layout
 * ------------------------------------------------------------ */
@media (max-width: 768px) {
  .manual-item { padding: 0.625rem 0.75rem; }
  .manual-item-title { font-size: 0.8125rem; }
  .manual-detail-container { flex-direction: column; height: calc(-80px + 100vh); min-height: 0px; padding: 1rem; gap: 1rem; }
  .manual-chapter-sidebar { display: none; }
  .manual-content-area { flex: 1 1 0%; min-height: 0px; overflow: hidden; }
  .manual-content-scroll { padding: 1.25rem; }
  .manual-content-title { font-size: 1.125rem; margin-bottom: 1rem; }
  .manual-content-paragraph { font-size: 0.875rem; }
  .manual-navigation { padding: 0.75rem 1rem; }
  .manual-nav-btn { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
}
@media (max-width: 480px) {
  .manual-chapter-number { width: 20px; height: 20px; font-size: 0.625rem; }
}

/* ------------------------------------------------------------
 * CSS-onlyライトボックス（:target方式、JS不使用）
 * CSS-only lightbox using :target (no JavaScript)
 * ------------------------------------------------------------ */
.css-lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; pointer-events: none; }
.css-lightbox:target { opacity: 1; visibility: visible; pointer-events: auto; }
.css-lightbox .lightbox-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); cursor: pointer; }
.css-lightbox .lightbox-content { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; }
.css-lightbox .lightbox-image { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.5) 0px 20px 60px; }
.css-lightbox .lightbox-close { position: fixed; top: 20px; right: 30px; font-size: 48px; color: rgb(255, 255, 255); text-decoration: none; line-height: 1; opacity: 0.8; transition: opacity 0.2s ease; z-index: 2; }
.css-lightbox .lightbox-close:hover { opacity: 1; }
@media (max-width: 768px) {
  .css-lightbox .lightbox-close { top: 10px; right: 15px; font-size: 36px; }
  .css-lightbox .lightbox-image { max-width: 95vw; max-height: 85vh; }
}

/* ------------------------------------------------------------
 * CSS-onlyサイドバー開閉（:target方式、JS不使用）
 * CSS-only sidebar toggle using :target (no JavaScript)
 * ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .dashboard-sidebar:target { transform: translateX(0); }
  .dashboard-sidebar:target + .sidebar-overlay-target,
  .dashboard-sidebar:target ~ .sidebar-overlay-target { display: block; }
}
@media (max-width: 768px) {
  .toc-sidebar:target { transform: translateX(0); }
  .toc-sidebar:target + .sidebar-overlay-target,
  .toc-sidebar:target ~ .sidebar-overlay-target { display: block; }
}
.sidebar-overlay-target { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 999; }