/**
 * ファイル名: style.css
 * 説明: ActionHub 共通スタイルシート
 *
 * このファイルには以下が含まれます:
 * - CSS変数（テーマカラー）
 * - リセット・ベーススタイル
 * - 共通コンポーネント（ah-プレフィックス付き）
 *   - .ah-container, .ah-input, .ah-select, .ah-textarea, .ah-checkbox
 *   - .ah-button2-primary, .ah-button2-secondary, .ah-button2-tertiary, .ah-button2-danger
 *   - .ah-button2-tertiary-sm, .ah-button2-tertiary-icon, .ah-button2-tertiary-xs
 *   - .ah-button2-danger-sm
 *   - .ah-btn-progress
 *   - .ah-badge, .ah-pill, .ah-pro-badge
 *   - .ah-message, .ah-message-success, .ah-message-warning, .ah-message-error
 *   - .ah-link, .ah-loading
 *   - .ah-footer, .ah-simple-footer
 *   - .ah-button1, .ah-button1-inline, .ah-button1-secondary, .ah-button1-danger（LP・認証用）
 * - ヘッダー・ツールバー共通スタイル
 *   - .ah-toolbar, .ah-toolbar-user, .ah-toolbar-username
 *   - .ah-form-inline-action
 *
 * 機能別CSSファイル:
 * - dashboard.css: ダッシュボード・タスク・メモ・プロジェクト
 * - project-page.css: プロジェクト専用ページ
 * - lp.css: ランディングページ
 * - auth.css: 認証・法定ページ
 * - admin.css: 管理画面（ops）
 * - help.css: ヘルプページ
 */

/*
  ------------------------------------------------------------
  CSS変数（テーマカラー）
  ------------------------------------------------------------
*/

/* ライトテーマ（デフォルト） */
:root {
  --bg: #f8fafc; /* 薄いグレー背景 */
  --panel: #ffffff; /* 白パネル */
  --muted: #64748b; /* グレーテキスト */
  --text: #0f172a; /* 濃い黒テキスト */
  --brand: #3b82f6; /* 青強調 */
  --green: #10b981; /* 成功 */
  --yellow: #f59e0b; /* 注意 */
  --red: #ef4444; /* 危険 */
  --blue: #2563eb; /* リンク・アクセント */
  --ring: rgba(59, 130, 246, .35); /* フォーカスリング */
  --card: #f1f5f9; /* カード背景1 */
  --card2: #e2e8f0; /* カード背景2 */
  --border: #cbd5e1; /* ボーダー */
  --bg-secondary: #f1f5f9; /* セカンダリ背景 */
  --bg-hover: #e2e8f0; /* ホバー背景 */
  --text-muted: #64748b; /* ミュートテキスト */
  --orange: #f59e0b; /* オレンジ */
  --purple: #a855f7; /* 紫 */
  --pink: #ec4899; /* ピンク */
  --green-bg: #d1fae5; /* 成功系背景 */
  --yellow-bg: #fef3c7; /* 警告系背景 */
  --red-bg: #fee2e2; /* エラー系背景 */
  --card-bg: #ffffff; /* カード背景 */
  --button-text: #f1f5f9; /* ボタンテキスト */
  --button-bg: #3b82f6; /* ボタン背景 */
  /* Primaryボタン用（WCAG AA準拠: 白テキストとのコントラスト4.5:1以上） */
  --primary-start: #2563eb; /* blue-600: コントラスト4.5:1 */
  --primary-end: #1d4ed8; /* blue-700: コントラスト5.8:1 */
}

/* ダークテーマ */
[data-theme="dark"] {
  --bg: #0f172a; /* スレート系の濃い背景 */
  --panel: #111827; /* パネル背景 */
  --muted: #9ca3af; /* 補助テキスト */
  --text: #e5e7eb; /* メインテキスト */
  --brand: #60a5fa; /* 強調 */
  --green: #34d399; /* 成功 */
  --yellow: #fbbf24; /* 注意 */
  --red: #f87171; /* 危険 */
  --blue: #3b82f6; /* リンク・アクセント */
  --ring: rgba(96, 165, 250, .35); /* フォーカスリング */
  --card: #0b1220; /* カード背景1 */
  --card2: #0e1526; /* カード背景2 */
  --border: #334455; /* ボーダー */
  --bg-secondary: #0b1220; /* セカンダリ背景 */
  --bg-hover: #0e1526; /* ホバー背景 */
  --text-muted: #9ca3af; /* ミュートテキスト */
  --orange: #fbbf24; /* オレンジ */
  --purple: #c084fc; /* 紫 */
  --pink: #f472b6; /* ピンク */
  --green-bg: rgba(52, 211, 153, 0.15); /* 成功系背景 */
  --yellow-bg: rgba(251, 191, 36, 0.15); /* 警告系背景 */
  --red-bg: rgba(248, 113, 113, 0.15); /* エラー系背景 */
  --card-bg: #1e293b; /* カード背景 */
  --button-text: #f1f5f9; /* ボタンテキスト */
  --button-bg: #3b82f6; /* ボタン背景 */
  /* Primaryボタン用（WCAG AA準拠: 白テキストとのコントラスト4.5:1以上） */
  --primary-start: #3b82f6; /* blue-500: コントラスト3.0:1（ダーク背景で視認性確保） */
  --primary-end: #2563eb; /* blue-600: コントラスト4.5:1 */
}

/*
  ------------------------------------------------------------
  リセット・ベーススタイル
  ------------------------------------------------------------
*/

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Noto Sans JP, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height: 1.55;
}

a {
  color: var(--brand);
  text-decoration: none;
}

/*
  ------------------------------------------------------------
  共通コンポーネント
  ------------------------------------------------------------
*/

/* コンテナ */
.ah-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

/* ヘッダー（共通） */
.ah-container > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* ヘッダータイトル部 */
.ah-container > header .title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ah-container > header .title h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
}

.ah-container > header .title h1 > i {
  margin-right: 0.5rem;
}

.ah-container > header .title .helper {
  font-size: 0.875rem;
  color: var(--muted);
}

/* ツールバー（共通） */
.ah-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ツールバー内のユーザー情報セクション */
.ah-toolbar-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ツールバー内のユーザー名表示 */
.ah-toolbar-username {
  font-size: 0.875rem;
  color: var(--muted);
}

/* フォーム内インラインアクショングループ */
.ah-form-inline-action {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* フォーム要素共通 */
.ah-input, .ah-select, .ah-checkbox, .ah-textarea {
  background: var(--card2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
  font-family: inherit;
}

/* ボタン共通スタイル */
.ah-button2-secondary,
.ah-button2-primary,
.ah-button2-tertiary,
.ah-button2-danger,
.ah-button2-tertiary-sm,
.ah-button2-tertiary-icon,
.ah-button2-danger-sm,
.ah-button2-tertiary-xs {
  background: var(--card2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
  font-family: inherit;
  cursor: pointer;
  transition: .15s ease transform, .15s ease opacity;
}

.ah-textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
  width: 100%;
}

.ah-input:focus, .ah-select:focus, .ah-textarea:focus {
  box-shadow: 0 0 0 3px var(--ring);
  border-color: var(--brand);
}

/*
  ------------------------------------------------------------
  .ah-button2 系統: グラデーション背景のボタン
  - Primary: ah-button2-primary（青グラデーション、主目的アクション）
  - Secondary: ah-button2-secondary（グレーグラデーション、補助アクション）
  - Tertiary: ah-button2-tertiary（透明背景、キャンセル等）
  - Danger: ah-button2-danger（赤、削除等の危険操作）
  - サイズ: ah-button2-*-sm, ah-button2-*-icon
  ------------------------------------------------------------
*/

/* セカンダリ（グレーグラデーション） */
.ah-button2-secondary {
  background: linear-gradient(180deg, var(--card), var(--card2));
}

/* プライマリ（青グラデーション、WCAG AA準拠） */
.ah-button2-primary {
  background: linear-gradient(180deg, var(--primary-start), var(--primary-end));
  border-color: var(--primary-end);
  color: white;
}

/* 進捗ボタン（独自デザイン用、WCAG AA準拠） */
.ah-btn-progress {
  background: var(--card2);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 6px 8px;
  font-size: 12px;
  outline: none;
  font-family: inherit;
  cursor: pointer;
  transition: .15s ease transform, .15s ease opacity;
  background: linear-gradient(180deg, var(--primary-start), var(--primary-end));
  min-width: 64px;
}

.ah-btn-progress:hover {
  filter: brightness(1.1);
}

.ah-btn-progress:active {
  opacity: .9;
}

.ah-btn-progress:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ターシャリ（透明背景） */
.ah-button2-tertiary {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}

/* 危険（赤） */
.ah-button2-danger {
  background: var(--red);
  border-color: var(--red);
  color: white;
}

/* ホバー */
.ah-button2-secondary:hover {
  filter: brightness(1.1);
}

.ah-button2-primary:hover {
  filter: brightness(1.1);
}

.ah-button2-tertiary:hover {
  background: var(--bg-hover);
}

.ah-button2-danger:hover {
  filter: brightness(1.15);
}

/* アクティブ */
.ah-button2-secondary:active,
.ah-button2-primary:active,
.ah-button2-tertiary:active,
.ah-button2-danger:active {
  opacity: .9;
}

/* 無効状態 */
.ah-button2-secondary:disabled,
.ah-button2-primary:disabled,
.ah-button2-tertiary:disabled,
.ah-button2-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* アイコン */
.ah-button2-secondary i,
.ah-button2-primary i,
.ah-button2-tertiary i,
.ah-button2-danger i {
  margin-right: 4px;
}

/*
  統合クラス: サイズバリエーション
  - sm: 小さいサイズ
  - icon: アイコンのみ（最小パディング）
*/
.ah-button2-secondary-sm,
.ah-button2-primary-sm,
.ah-button2-tertiary-sm,
.ah-button2-danger-sm {
  padding: 6px 10px;
  font-size: 12px;
}

.ah-button2-secondary-icon,
.ah-button2-primary-icon,
.ah-button2-tertiary-icon,
.ah-button2-danger-icon {
  padding: 4px 8px;
  min-width: auto;
}

/* ターシャリ + サイズバリエーション（統合クラス） */
.ah-button2-tertiary-sm {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
  padding: 6px 10px;
  font-size: 12px;
}

.ah-button2-tertiary-icon {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
  padding: 4px 8px;
  min-width: auto;
}

.ah-button2-tertiary-sm:hover,
.ah-button2-tertiary-icon:hover {
  background: var(--bg-hover);
}

/* 危険 + サイズバリエーション（統合クラス） */
.ah-button2-danger-sm {
  background: var(--red);
  border-color: var(--red);
  color: white;
  padding: 6px 10px;
  font-size: 12px;
}

.ah-button2-danger-sm:hover {
  filter: brightness(1.15);
}

/* ターシャリ + xsサイズ（統合クラス） */
.ah-button2-tertiary-xs {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
  padding: 4px 6px;
  font-size: 11px;
}

.ah-button2-tertiary-xs:hover {
  background: var(--bg-hover);
}

/* メニュートグル */
.ah-button2-menu-toggle {
  color: var(--text);
  font-weight: 700;
}

/* インライン表示 */
.ah-button2-secondary-inline,
.ah-button2-primary-inline,
.ah-button2-tertiary-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Proバッジ */
.ah-pro-badge {
  display: inline-block;
  padding: 2px 6px;
  margin-left: 6px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  vertical-align: middle;
}

/* ピル型バッジ */
.ah-pill {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
}

/* 基本バッジ */
.ah-badge {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--muted);
}

.ah-badge.infinite {
  color: var(--green);
  border-color: var(--green);
  background: rgba(16, 185, 129, .15);
}

[data-theme="dark"] .ah-badge.infinite {
  background: rgba(52, 211, 153, .15);
}

/* メッセージボックス */
.ah-message {
  padding: 12px;
  margin: 8px 0;
  border-radius: 4px;
  border-left: 4px solid var(--border);
  background: var(--card);
}

.ah-message-success {
  background: var(--green-bg);
  border-left: 4px solid var(--green);
}

.ah-message-warning {
  background: var(--yellow-bg);
  border-left: 4px solid var(--yellow);
}

.ah-message-error {
  background: var(--red-bg);
  border-left: 4px solid var(--red);
}

/* セクションカード */
.ah-section {
  background: linear-gradient(180deg, var(--card), var(--card2));
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  min-height: 600px; /* 最小高さを確保 */
  margin-bottom: 24px;
}

.ah-section h2 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
  flex-shrink: 0;
}

.ah-section .sub {
  color: var(--muted);
  font-size: 12px;
  flex-shrink: 0;
}

/* セクションの高さを自動調整（インポート画面、設定画面など固定高さが不要なページ用） */
.ah-section-auto {
  height: auto;
  min-height: auto;
}

.ah-section ul {
  margin: 0;
  padding-left: 1.5em;
}

/*
  ------------------------------------------------------------
  ローディング・アニメーション
  ------------------------------------------------------------
*/

.ah-loading {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--border);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

/* Tabler Iconsのスピンアニメーション */
.ti-spin {
  animation: spin 1s linear infinite;
}

/* ------------------------------------------------------------
   共通フッター（ah-プレフィックスでActionHub共通コンポーネントを識別）
   ------------------------------------------------------------ */

/* 内部ページ用フッター（container内に配置） */
.ah-footer {
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.ah-footer-links {
  display: flex;
  gap: 1rem;
}

.ah-footer-links a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}

.ah-footer-links a:hover {
  color: var(--brand);
}

/* シンプルフッター（認証・公開ページ用、bodyの直接の子要素として配置） */
.ah-simple-footer {
  margin-top: auto;
  padding: 2rem 1rem;
  text-align: center;
}

.ah-simple-footer-inner {
  max-width: 600px;
  margin: 0 auto;
}

.ah-simple-footer p {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.ah-simple-footer-links {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.ah-simple-footer-links a {
  color: var(--text-muted);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.2s;
}

.ah-simple-footer-links a:hover {
  color: var(--brand);
}

/* ------------------------------------------------------------
   .ah-button1 系統: LP・認証ページ用ボタン（ライトテーマ固定）
   ------------------------------------------------------------ */

/* ブロックボタン（全幅） */
.ah-button1 {
  display: block;
  width: 100%;
  background-color: #3b82f6;
  color: #ffffff;
  font-weight: 600;
  padding: 12px 16px;
  border-radius: 8px;
  transition: background-color 0.2s ease, transform 0.2s ease;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.ah-button1:hover {
  background-color: #2563eb;
}

.ah-button1:active {
  transform: translateY(0);
  opacity: 0.9;
}

.ah-button1 .flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ah-button1 i {
  margin-right: 8px;
}

.ah-button1 .text-xs {
  font-size: 12px;
  margin-top: 6px;
  opacity: 0.9;
  font-weight: 400;
}

/* インラインボタン */
.ah-button1-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  background-color: #3b82f6;
  color: #ffffff;
  font-weight: 600;
  padding: 10px 24px;
  border-radius: 8px;
  border: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.ah-button1-inline:hover {
  background-color: #2563eb;
}

.ah-button1-inline:active {
  transform: translateY(0);
  opacity: 0.9;
}

.ah-button1-inline i {
  margin-right: 8px;
}

/* 小さいボタン */
.ah-button1-sm,
.ah-button1-inline.sm {
  padding: 8px 16px;
  font-size: 14px;
}

/* 無効状態 */
.ah-button1:disabled,
.ah-button1-inline:disabled {
  background-color: #94a3b8;
  cursor: not-allowed;
  opacity: 0.7;
}

.ah-button1:disabled:hover,
.ah-button1-inline:disabled:hover {
  background-color: #94a3b8;
  transform: none;
}

/* セカンダリ（グレー）ボタン */
.ah-button1-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  background-color: #e2e8f0;
  color: #475569;
  font-weight: 600;
  padding: 10px 24px;
  border-radius: 8px;
  border: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.ah-button1-secondary:hover {
  background-color: #cbd5e1;
}

.ah-button1-secondary:active {
  transform: translateY(0);
  opacity: 0.9;
}

.ah-button1-secondary i {
  margin-right: 8px;
}

.ah-button1-secondary.sm {
  padding: 8px 16px;
  font-size: 14px;
}

/* 全幅バリエーション */
.ah-button1-block,
.ah-button1-inline.block {
  display: flex;
  width: 100%;
  flex: 1;
}

.ah-button1-secondary.block {
  display: flex;
  width: 100%;
  flex: 1;
}

/* 危険（赤）ボタン */
.ah-button1-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  background-color: #ef4444;
  color: #ffffff;
  font-weight: 600;
  padding: 10px 24px;
  border-radius: 8px;
  border: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.ah-button1-danger:hover {
  background-color: #dc2626;
}

.ah-button1-danger:active {
  transform: translateY(0);
  opacity: 0.9;
}

.ah-button1-danger i {
  margin-right: 8px;
}

.ah-button1-danger.sm {
  padding: 8px 16px;
  font-size: 14px;
}