/* ==============================
   0. ルート変数
   ============================== */
:root {
  --bg-light: #f4f7ff;

  --neon-violet: #7c3aed;
  --neon-cyan: #22d3ee;
  --neon-pink: #ec4899;
}

/* ==============================
   1. ベース背景・レイアウト
   ============================== */

body {
  background:
    radial-gradient(circle at top, rgba(124,58,237,0.12), transparent 55%),
    radial-gradient(circle at bottom right, rgba(34,211,238,0.08), transparent 55%),
    var(--bg-light);
  color: #111827;
  min-height: 100vh;
}

main.container {
  padding-bottom: 3rem;
}

/* ==============================
   2. グローバルナビ（.app-navbar）
   ============================== */

.app-navbar {
  background: linear-gradient(90deg, #020617, #0f172a);
  color: #e5e7eb;
  min-height: 52px;
  padding: 0.6rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 左側：TaskApp + ナビリンク */
.app-navbar .navbar-left {
  display: flex;
  align-items: center;
  column-gap: 0.8rem;  /* TaskApp とリンク群の距離 */
}

.app-navbar .nav-brand {
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #e5e7eb;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1.05rem;
}

/* PC用リンク群（タスク一覧 / ダッシュボード / ...） */
.app-navbar .nav-links {
  display: flex;
  align-items: center;
  column-gap: 0.8rem;  /* 各リンク同士の間隔 */
}

.app-navbar .nav-link {
  color: rgba(248, 250, 252, 0.8);
  font-size: 0.9rem;
  text-decoration: none;
  position: relative;
  padding: 0.15rem 0.25rem 0.1rem;
}

.app-navbar .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.1rem;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink));
  transition: width 0.18s ease-out;
}

.app-navbar .nav-link:hover {
  color: #ffffff;
}

.app-navbar .nav-link:hover::after {
  width: 100%;
}

/* 右側：ユーザー名 + Logout */
.app-navbar .navbar-right {
  display: flex;
  align-items: center;
  column-gap: 2rem;   /* 👤デモ と Logout の距離 */
}

.app-navbar .navbar-user {
  display: flex;
  align-items: center;
  font-size: 0.85rem;
  color: rgba(248, 250, 252, 0.9);
  margin-right: 1rem;
}

/* Logout ボタン（ダークモードボタンもこれ前提） */
.btn-outline.small {
  border-radius: 999px;
  padding: 0.25rem 0.9rem;
  font-size: 0.85rem;
  border: 1px solid rgba(148, 163, 184, 0.7);
  color: #e5e7eb;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
}

/* ナビリンクのクリック有効化 */
.app-navbar .nav-link,
.mobile-nav-link {
  pointer-events: auto;
  cursor: pointer;
}

/* PCナビのリンク間隔を少し広げる・ホバー背景 */
.app-navbar .navbar-left nav .nav-link {
  padding-inline: 0.25rem;
}

.app-navbar .navbar-left nav .nav-link + .nav-link {
  margin-left: 0.25rem;
}

@media (min-width: 992px) {
  .app-navbar .navbar-left nav .nav-link + .nav-link {
    margin-left: 0.5rem;
  }
}

.app-navbar .navbar-left nav .nav-link:hover {
  background-color: rgba(148, 163, 184, 0.18);
  border-radius: 999px;
}

/* スマホ offcanvas のリンク */
.mobile-nav-link {
  display: block;
  color: #0f172a !important;
  font-weight: 500;
  padding: 0.5rem 0.25rem;
  border-radius: 0.5rem;
  text-decoration: none;
  font-size: 0.95rem;
}

.mobile-nav-link:hover {
  background-color: #f3f4f6;
  text-decoration: none;
}

/* ==============================
   3. ページヘッダー共通
   ============================== */

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.25rem;
}

.page-title-block {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* 小さいラベル */
.page-kicker {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border-radius: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6b7280;
  background-color: transparent;
}

/* タイトル（下線付き） */
.page-title {
  font-size: 1.6rem;
  font-weight: 600;
  color: #0f172a;
  margin: 0;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e5e7eb;
}

/* 説明文 */
.page-description {
  max-width: 32rem;
}

.page-subtitle {
  font-size: 0.85rem;
  color: #6b7280;
  margin: 0.2rem 0 0;
}

/* スマホ時のタイトルサイズ調整 */
@media (max-width: 576px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .page-title {
    font-size: 1.4rem;
  }

  .page-description {
    font-size: 0.8rem;
  }
}

/* ==============================
   4. ネオン系共通コンポーネント
   ============================== */

/* カード（neon-card） */
.neon-card {
  border-radius: 1.25rem;
  border: none;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
  background: #ffffff;
}

/* 小さい光るドット */
.glow-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.15);
}

.glow-primary {
  background: #3b82f6;
  box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.18);
}

.glow-secondary {
  background: #8b5cf6;
  box-shadow: 0 0 0 6px rgba(139, 92, 246, 0.18);
}

/* ネオンっぽいタイトル色 */
.text-neon-primary {
  color: #2563eb;
  text-shadow: 0 0 4px rgba(59, 130, 246, 0.3);
}

.text-neon-subtle {
  letter-spacing: 0.16em;
  color: rgba(148, 163, 184, 0.82);
}

/* ネオンっぽいバッジ */
.badge-neon {
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(15, 23, 42, 0.03);
  color: #6b7280;
}

/* 細いプログレスバー */
.progress-thin {
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
}

.progress-thin .progress-bar {
  border-radius: 999px;
}

/* ==============================
   5. Empty state（検索結果ゼロなど）
   ============================== */

.empty-state {
  border-radius: 0.9rem;
  border: 1px dashed rgba(15, 23, 42, 0.12);
  background: linear-gradient(
    135deg,
    rgba(248, 250, 252, 0.95),
    rgba(241, 245, 249, 0.95)
  );
  color: #0f172a;
}

/* ==============================
   6. ダッシュボードページ
   ============================== */

/* ページ全体 */
.dashboard-page {
  color: #0f172a;
  padding-top: 1.75rem;
  padding-bottom: 2.25rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

@media (min-width: 992px) {
  .dashboard-page {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* Dashboard Hero（未使用なら残しても害なし） */
.dash-hero {
  border-radius: 1.5rem;
  padding: 1.6rem 1.8rem;
  margin-bottom: 1.25rem;
  background:
    radial-gradient(circle at top left,
      rgba(56, 189, 248, 0.18),
      transparent 55%),
    radial-gradient(circle at bottom right,
      rgba(244, 114, 182, 0.16),
      transparent 55%),
    linear-gradient(135deg, #020617, #020617);
  border: 1px solid rgba(148, 163, 184, 0.4);
  box-shadow:
    0 22px 45px rgba(15, 23, 42, 0.75),
    0 0 20px rgba(59, 130, 246, 0.35);
  color: #e5e7eb;
}

.dash-hero-label {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.9);
  margin-bottom: 0.25rem;
}

.dash-hero-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #f9fafb;
}

.dash-hero-subtitle {
  font-size: 0.9rem;
  color: #9ca3af;
}

.dash-hero-btn {
  border-radius: 999px;
  padding-inline: 1.2rem;
  border-color: rgba(148, 163, 184, 0.8);
}

/* Metric Cards */
.dash-metric-card {
  position: relative;
  border-radius: 1.1rem;
  padding: 1.1rem 1.2rem;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.9));
  border: 1px solid rgba(30, 64, 175, 0.5);
  box-shadow:
    0 18px 35px rgba(15, 23, 42, 0.75),
    0 0 0 1px rgba(15, 23, 42, 0.9);
  color: #e5e7eb;
}

.dash-metric-label {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.9);
  margin-bottom: 0.15rem;
}

.dash-metric-value {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
  color: #f9fafb;
}

.dash-metric-subtext {
  font-size: 0.8rem;
  margin-top: 0.2rem;
  color: #9ca3af;
}

/* アクセント付きバリエーション */
.dash-metric-card-accent-warning {
  border-color: rgba(234, 179, 8, 0.7);
  box-shadow:
    0 18px 35px rgba(15, 23, 42, 0.8),
    0 0 25px rgba(234, 179, 8, 0.35);
}

.dash-metric-card-accent-info {
  border-color: rgba(56, 189, 248, 0.7);
  box-shadow:
    0 18px 35px rgba(15, 23, 42, 0.8),
    0 0 25px rgba(56, 189, 248, 0.35);
}

.dash-metric-card-accent-success {
  border-color: rgba(34, 197, 94, 0.7);
  box-shadow:
    0 18px 35px rgba(15, 23, 42, 0.8),
    0 0 25px rgba(34, 197, 94, 0.35);
}

.dash-metric-card-accent-danger {
  border-color: rgba(248, 113, 113, 0.8);
  box-shadow:
    0 18px 35px rgba(15, 23, 42, 0.8),
    0 0 25px rgba(248, 113, 113, 0.35);
}

/* ラベル用チップ */
.dash-metric-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.5rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.chip-warning {
  background: rgba(253, 224, 71, 0.1);
  color: #facc15;
}

.chip-info {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
}

.chip-success {
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
}

/* 完了率エリア */
.dash-completion-percent {
  font-size: 1.7rem;
  font-weight: 700;
  color: #22c55e;
}

.dash-progress {
  height: 0.55rem;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.95);
}

.dash-progress .progress-bar {
  background: linear-gradient(90deg, #22c55e, #a3e635);
}

/* Chart Card */
.dash-chart-card {
  margin-top: 0.5rem;
  border-radius: 1.2rem;
  padding: 1.2rem 1.3rem 1.4rem;
  background:
    radial-gradient(circle at top left,
      rgba(56, 189, 248, 0.18),
      transparent 55%),
    radial-gradient(circle at bottom right,
      rgba(244, 114, 182, 0.16),
      transparent 55%),
    linear-gradient(135deg, #020617, #020617);
  border: 1px solid rgba(148, 163, 184, 0.5);
  box-shadow:
    0 20px 40px rgba(15, 23, 42, 0.9),
    0 0 30px rgba(59, 130, 246, 0.35);
  color: #e5e7eb;
}

.dash-chart-title {
  font-size: 0.95rem;
  font-weight: 600;
}

.dash-chart-subtitle {
  font-size: 0.8rem;
  color: #9ca3af;
}

/* 円グラフキャンバス */
.dash-chart-canvas {
  max-width: 260px;
  width: 100%;
  margin: 0 auto;
  padding-block: 0.25rem;
}

/* ダッシュボードの「タスク一覧へ」ボタン（スマホ右寄せ用） */
@media (max-width: 576px) {
  .dashboard-page
  > .mb-4.mt-1
  > .d-flex.flex-wrap.justify-content-between.align-items-start.gap-3
  > .pt-1 {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-left: auto;
    text-align: right;
  }
}

/* ==============================
   7. タスク一覧ページ（tasks-page）
   ============================== */

/* 全体のトーン */
.tasks-page {
  background: radial-gradient(circle at top, #f9fafb 0, #f3f4f6 32%, #eef2ff 100%);
}

/* フラッシュメッセージ */
.tasks-flash {
  border-radius: 999px;
  border: 1px solid rgba(34,197,94,0.2);
}

/* ヒーロー */
.tasks-hero {
  border-radius: 1.25rem;
  background: radial-gradient(circle at top left,
      rgba(129,140,248,0.16) 0,
      rgba(236,72,153,0.08) 40%,
      rgba(15,23,42,0.01) 100%);
}

.tasks-hero-title {
  letter-spacing: .01em;
}

.tasks-hero-sub {
  max-width: 360px;
}

.tasks-hero-icon {
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 10px 24px rgba(15,23,42,0.18);
  font-size: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tasks-hero-pill {
  padding: .15rem .7rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(129,140,248,0.35);
}

.tasks-hero-right {
  min-width: 220px;
}

/* 小さな統計チップ */
.tasks-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem .7rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(148,163,184,0.5);
}

.tasks-stat-chip-done {
  border-color: rgba(34,197,94,0.5);
}

.tasks-stat-chip-doing {
  border-color: rgba(56,189,248,0.5);
}

.tasks-stat-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #6b7280;
}

.tasks-stat-value {
  font-weight: 600;
  color: #111827;
}

.tasks-hero-btn {
  font-size: .8rem;
}

.tasks-hero-btn-main {
  box-shadow: 0 8px 18px rgba(59,130,246,0.35);
}

/* フィルターカード */
.tasks-filter-card {
  border-radius: 1.1rem;
  background: rgba(255,255,255,0.96);
}

.tasks-filter-dot {
  width: .6rem;
  height: .6rem;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #4f46e5, #ec4899);
}

.tasks-input {
  border-radius: .75rem;
  border-color: rgba(148,163,184,0.6);
  font-size: .9rem;
}

.tasks-input:focus {
  box-shadow: 0 0 0 .15rem rgba(129,140,248,0.28);
  border-color: #6366f1;
}

.tasks-filter-btn {
  border-radius: 999px;
  font-size: .85rem;
  padding-inline: 1rem;
}

.tasks-chip {
  border-radius: 999px;
  padding-block: .1rem;
  padding-inline: .6rem;
  font-size: .7rem;
}

.btn-xs {
  --bs-btn-padding-y: 0.15rem;
  --bs-btn-padding-x: 0.45rem;
  --bs-btn-font-size: 0.7rem;
}

/* 空状態 */
.tasks-empty-card {
  border-radius: 1.25rem;
  background: rgba(255,255,255,0.96);
}

.tasks-empty-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 999px;
  background: rgba(148,163,184,0.15);
}

.tasks-empty-alert {
  border-radius: 1rem;
  background: rgba(239,246,255,0.96);
}

/* テーブルカード */
.tasks-table-card {
  border-radius: 1.1rem;
  overflow: hidden;
}

/* テーブルヘッダー */
.modern-task-table thead {
  background: linear-gradient(90deg, #f9fafb, #eef2ff);
  border-bottom: 1px solid #e5e7eb;
}

.modern-task-table thead th {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #6b7280;
  border-bottom: none;
  padding-block: .6rem;
}

/* 行ホバー */
.modern-task-table tbody tr.task-row {
  transition: background-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

.modern-task-table tbody tr.task-row:hover {
  background-color: #f9fafb;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}

/* アバターなど */
.task-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 600;
  background: #e5e7eb;
  color: #4b5563;
}

.task-avatar-todo {
  background: rgba(148, 163, 184, 0.2);
  color: #4b5563;
}

.task-avatar-doing {
  background: rgba(56, 189, 248, 0.18);
  color: #0284c7;
}

.task-avatar-done {
  background: rgba(34, 197, 94, 0.18);
  color: #16a34a;
}

.task-row-done {
  background: linear-gradient(90deg, rgba(22, 163, 74, 0.02), transparent);
}

.task-title {
  font-size: .92rem;
}

.task-desc {
  max-width: 260px;
}

/* タグチップ */
.tag-chip {
  background: #e0f2fe;
  color: #0369a1;
  border-radius: 999px;
}

/* 操作ボタン */
.tasks-action-btn {
  border-radius: 999px;
  font-size: .78rem;
  padding-inline: .75rem;
  white-space: nowrap;
}

/* ==============================
   7-1. タスク一覧：スマホ向けレイアウト
   ============================== */

@media (max-width: 767.98px) {

  /* ページ余白ちょい詰め */
  .tasks-page {
    padding-inline: .5rem;
  }

  /* ヒーロー右側を縦並び & 左寄せに */
  .tasks-hero {
    padding-inline: .4rem;
  }
  .tasks-hero-right {
    align-items: flex-start !important;
    text-align: left !important;
  }
  .tasks-hero-sub {
    max-width: 100%;
  }

  /* テーブル → カード風 */
  .modern-task-table {
    border: 0;
  }

  .modern-task-table thead {
    display: none;
  }

  .modern-task-table tbody,
  .modern-task-table tr,
  .modern-task-table td {
    display: block;
    width: 100%;
  }

  /* 1行をカード風に */
  .modern-task-table tr {
    margin-bottom: .85rem;
    padding: .7rem .8rem .55rem;
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
  }

  .modern-task-table td {
    border-top: 0;
    padding: .25rem 0;
    font-size: .85rem;
  }

  /* 各セルの左側にラベル（data-label）を表示 */
  .modern-task-table td::before {
    content: attr(data-label);
    flex-shrink: 0;
    display: inline-block;
    min-width: 4.5rem;
    margin-right: .5rem;
    font-size: .72rem;
    font-weight: 600;
    color: #64748b;
    text-transform: none;
  }

  /* タイトル行だけはラベルなし */
  .modern-task-title-cell {
    margin-bottom: .2rem;
  }
  .modern-task-title-cell::before {
    content: none;
  }
  .modern-task-title-cell .fw-semibold {
    font-size: .95rem;
  }
  .modern-task-title-cell .modern-task-desc {
    max-width: 100% !important;
  }

  /* タグ行：バッジを折り返して見やすく */
  .modern-task-tags-cell .badge {
    margin-bottom: .15rem;
  }

  /* 操作ボタン：下にまとめて表示（ラベルも非表示） */
  .modern-task-actions-cell {
    margin-top: .35rem;
  }
  .modern-task-actions-cell::before {
    content: none;
  }
  .modern-task-actions-cell .btn {
    font-size: .78rem;
    padding: .25rem .6rem;
  }

  /* === スマホ時のタスク一覧 ID を左詰めでキレイに揃える === */
  .modern-task-cell-id {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.2rem 0 0.35rem 0rem;
    font-size: 0.85rem;
    font-weight: 600;
  }

  .modern-task-table td.modern-task-cell-id::before {
    content: "ID";
    display: inline-block;
    min-width: 2.5rem;
    margin-right: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
  }
}

/* ==============================
   8. 「← タスク一覧へ」ボタン共通
   ============================== */

/* 形（PC/スマホ共通） */
.back-to-list {
  border-radius: 999px !important;
  padding-inline: 1rem;
}

/* スマホ時：基本は右寄せ */
@media (max-width: 576px) {
  .back-to-list {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    margin-left: auto;
    margin-top: 0.25rem;
  }
}

/* ==============================
   AIタスクアシスタント画面ヘッダー
   スマホ時は右ブロックを右寄せ
   ============================== */
@media (max-width: 576px) {

  /* 右側：バッジ + 「タスク一覧へ」コンテナ */
  .dashboard-page
  > .d-flex.flex-wrap.justify-content-between.align-items-start.mb-4.mt-1.gap-3.px-1.px-md-0
  > .d-flex.flex-column.align-items-end.gap-2 {
    width: 100%;                         /* 横いっぱい使う */
    align-items: flex-end !important;    /* 中身を右寄せ */
    text-align: right;
    margin-left: auto;
  }

  /* 戻るボタン自体も右端に寄せる */
  .dashboard-page
  > .d-flex.flex-wrap.justify-content-between.align-items-start.mb-4.mt-1.gap-3.px-1.px-md-0
  > .d-flex.flex-column.align-items-end.gap-2
  .back-to-list {
    align-self: flex-end !important;     /* 自分も右端 */
    border-radius: 999px;                /* pill 形状維持（念のため） */
    margin-left: 0;
    margin-right: 0;
  }
}

/* ==============================
   layoutヘッダーの背景
   ============================== */
.app-navbar {
  background:
    radial-gradient(
      circle at top left,
      rgba(124, 58, 237, 0.35),
      rgba(15, 23, 42, 0.94)
    );
  border-bottom: 1px solid rgba(148, 163, 184, 0.4);
  box-shadow:
    0 10px 22px rgba(15, 23, 42, 0.45),
    0 0 14px rgba(56, 189, 248, 0.25);
  backdrop-filter: blur(18px);
}

/* ==============================
   Logout / ダークモードボタンの
   ネオンホバーを復活
   ============================== */
.btn-outline.small {
  border-radius: 999px;
  padding: 0.25rem 0.9rem;
  font-size: 0.85rem;
  border: 1px solid rgba(148, 163, 184, 0.7);
  color: #e5e7eb;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;

  /* ★ ここからネオン感 */
  background:
    radial-gradient(circle at 0 0, rgba(34,211,238,0.35), transparent 55%),
    transparent;
  box-shadow:
    0 0 14px rgba(34, 211, 238, 0.45),
    inset 0 0 8px rgba(15, 23, 42, 0.9);
  transition:
    box-shadow 0.16s ease-out,
    transform 0.12s ease-out,
    border-color 0.16s ease-out,
    background 0.16s ease-out;
}

.btn-outline.small:hover {
  transform: translateY(-1px);
  border-color: rgba(236,72,153,0.9);
  box-shadow:
    0 0 22px rgba(236,72,153,0.7),
    0 0 12px rgba(34,211,238,0.6);
  background:
    radial-gradient(circle at 100% 0, rgba(236,72,153,0.45), transparent 55%),
    transparent;
}

/* ライトモード時は文字色を少し明るめに */
body:not(.dark) .btn-outline.small {
  color: #f8fafc;
}

/* ==============================
   タスク一覧 検索フォームの
   「検索」「クリア」ボタンを右寄せ
   ============================== */

/* スマホ幅のときも右寄せにする */
@media (max-width: 767.98px) {
  .tasks-filter-card .col-md-2.text-md-end {
    text-align: right !important;   /* テキスト右寄せ */
    display: flex;                  /* ボタンを横並びで扱う */
    justify-content: flex-end;      /* 右端に寄せる */
    gap: 0.5rem;                    /* ボタン同士のすき間 */
    margin-top: 0.25rem;
  }
}

/* ==============================
   タスク一覧 クイックフィルタ（スマホ）
   「すべて表示」も含めて1行にして横スクロール
   ============================== */
@media (max-width: 576px) {

  /* クイックフィルタ全体のコンテナを1行＆横スクロールに */
  .tasks-filter-card .d-flex.flex-wrap.gap-2.small.align-items-center {
    flex-wrap: nowrap !important;          /* ★ 強制的に折り返し禁止 */
    overflow-x: auto;                       /* はみ出したら横スクロール */
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;                    /* テキストも折り返さない */
  }

  /* 中の子要素は全部「横に並ぶ固定幅」にする */
  .tasks-filter-card .d-flex.flex-wrap.gap-2.small.align-items-center > * {
    flex: 0 0 auto;                         /* 縮まず・伸びず */
  }
}

/* ==============================
   タスク一覧 クイックフィルタ（スマホ）
   横スクロールだけ残してスクロールバー非表示
   ============================== */
@media (max-width: 576px) {

  /* 1行＆横スクロール */
  .tasks-filter-card .d-flex.flex-wrap.gap-2.small.align-items-center {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;

    /* ★ スクロールバー非表示 */
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* 古い Edge / IE 対策（ほぼおまじない） */
  }

  .tasks-filter-card .d-flex.flex-wrap.gap-2.small.align-items-center::-webkit-scrollbar {
    display: none;                  /* Chrome / Safari */
  }

  /* 子要素は全部「横に並ぶパーツ」に固定 */
  .tasks-filter-card .d-flex.flex-wrap.gap-2.small.align-items-center > * {
    flex: 0 0 auto;
  }
}

/* === スマホ時：「AIと会話」「新規タスクを追加」を右端に寄せる === */
@media (max-width: 767.98px) {

  /* 右側ブロックを横幅いっぱいに広げる */
  .tasks-hero-right {
    width: 100%;
  }

  /* その中で、ボタン行だけ右端に寄せる */
  .tasks-hero-actions {
    margin-left: auto;      /* ← これで右端にくっつく */
  }
}

/* === スマホ時：全タスク / 完了 / 進行中チップも右端に寄せる === */
@media (max-width: 767.98px) {

  /* 統計チップの行を横幅いっぱいに広げる */
  .tasks-hero-stats {
    width: 100%;
    justify-content: flex-end;  /* 念のため明示 */
  }
}

/* ==============================
   タスク一覧 / タグ管理ヘッダー右側
   スマホ時に全部右端に寄せる
   ============================== */
@media (max-width: 767.98px) {

  /* 右ブロック自体を横幅いっぱい ＆ 右寄せに */
  .tasks-hero-right {
    width: 100%;
    align-items: flex-end !important;
    text-align: right !important;
  }

  /* 「全タスク / 完了 / 進行中」「登録タグ」のチップ行も右端へ */
  .tasks-hero-stats {
    width: 100%;
    justify-content: flex-end;
  }

  /* その下のボタン2つの行だけ、右端に寄せる */
  .tasks-hero-right > .d-flex.gap-2.mt-1 {
    margin-left: auto;   /* これで右端にスッと寄る */
  }
}

/* ==============================
   タグ一覧（スマホ）のタグ名を
   「ID番号の真下」くらいに寄せる
   ============================== */
@media (max-width: 767.98px) {
  .tasks-page .modern-task-title-cell .d-flex.align-items-center {
    justify-content: flex-start; /* 中央寄せ解除 */
    margin-left: 2.9rem;        /* ← IDの「数字」と同じくらいの位置 */
  }
}

@media (min-width: 992px) {
  .page-title {
    display: inline-block !important;
  }
}

@media (max-width: 576px) {
  section.py-5 {
    padding-top: 2.5rem;
    padding-bottom: 3rem;
  }

  .neon-card {
    border-radius: 1rem;
  }

  .mb-4.text-center h1.h4 {
    font-size: 1.25rem;
  }
}

@media (max-width: 767.98px) {
  .modern-task-cell-id {
    padding-left: 0 !important;
    display: flex;
    align-items: center;
  }
}

/* ブランドロゴ（左上 TaskApp）をうっすら青く光らせる */
.nav-brand {
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 0.03em;

    /* ベースカラー（少し青っぽく） */
    color: #0ea5e9;

    /* ほんのりネオンっぽい光 */
    text-shadow:
        0 0 4px rgba(56, 189, 248, 0.7),
        0 0 10px rgba(56, 189, 248, 0.5);
}

/* ホバー時はちょい明るく */
.navbar .nav-brand:hover {
    color: #38bdf8;
    text-shadow:
        0 0 6px rgba(56, 189, 248, 0.9),
        0 0 14px rgba(56, 189, 248, 0.7);
}

/* ヘッダー内の左右の余白を少しだけ詰める（TaskApp を気持ち左へ） */
.app-navbar .container-fluid {
    padding-left: 4rem;   /* デフォルト(px-3)は 1rem。ちょっとだけ詰める */
    padding-right: 8rem; /* 右も少しだけ詰めてバランス調整（お好みで） */
}

/* ===== スマホ表示での「タグ」列のレイアウト調整 ===== */
@media (max-width: 768px) {

    /* タグのセルだけ、横並びレイアウトにする */
    td.modern-task-tags-cell {
        display: flex;
        align-items: center;   /* ラベルとタグバッジの縦位置を揃える */
    }

    /* 共通の ::before ルールを打ち消して、ラベルを横並び用に調整 */
    td.modern-task-tags-cell::before {
        float: none;           /* 左フロートを解除 */
        display: inline-block;
        width: auto;           /* 幅固定が入っている場合に備えて上書き */
        min-width: 4.6rem;       /* 「タグ」の幅ぶんだけちょい確保（お好みで調整OK） */
        margin: 0;
        margin-right: 0.5rem;  /* ラベルとタグの間に少しだけ余白 */
        text-align: left;
    }

    /* タグ名の入っているコンテナは普通の左寄せに */
    td.modern-task-tags-cell .d-flex {
        justify-content: flex-start;
        margin-left: 0;        /* 以前の margin-left 調整があれば打ち消す */
    }
}

/* ===== タスクフォームのセレクト見た目を安定させる ===== */

/* ステータス／優先度などの select を、スマホでも素直な表示にする */
.dashboard-page select.form-select {
  margin-top: 0;             /* ラベルとの間を詰める */
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  line-height: 1.5;          /* テキストを縦方向で中央寄せっぽく */
  height: auto;              /* ブラウザのデフォルトに任せる */
}

/* スマホ幅では右カラムの余白も少し詰める */
@media (max-width: 768px) {
  .dashboard-page .col-lg-4 .border.rounded-3.p-3 {
    padding: 0.75rem;
  }

  .dashboard-page .col-lg-4 .mb-3 {
    margin-bottom: 0.75rem;
  }
}

.modern-task-table td.modern-task-cell-id {
    padding-left: 10rem;
}

/* 「操作」だけ位置をいじる */
.modern-task-table td[data-label="操作"]::before {
  /* 例：ちょっと左に寄せたい場合（マイナス方向） */
  margin-right: 15rem;
  /* さらにラベル幅を少し短くしたいなら */
  min-width: 3.5rem;
  text-align: left !important;   /* ← こっちが勝つ */
}

/* スマホのとき、入力欄がタップされたときにズームしないようにする */
@media (max-width: 767.98px) {
  .tasks-input {
    font-size: 16px;  /* ← ここがポイント */
  }

/* ▼ スマホのときだけ「操作」セル内の 編集/削除ボタンを少し左にずらす */
  .modern-task-table td[data-label="操作"] > .d-inline-flex {
    transform: translateX(-16px);  /* -8px とか -16px に変えて微調整OK */
  }

}