/* ============================================================
   Lethonaut — Base
   リセット・ベース要素のスタイル(Bootstrapデフォルトも上書き)
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-base);
  color: var(--fg-base);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--fg-base);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-md); }
h6 { font-size: var(--text-base); }

p {
  margin: 0 0 var(--space-3) 0;
}
p:last-child { margin-bottom: 0; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--accent-hover); }
a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
  border-radius: var(--radius-sm);
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-6) 0;
  opacity: 1;
}

::placeholder { color: var(--fg-subtle); opacity: 1; }
::-webkit-input-placeholder { color: var(--fg-subtle); }

/* スクロールバー (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--radius-md);
}
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* Selection */
::selection {
  background: var(--accent);
  color: var(--accent-fg);
}

/* 数字に等幅 */
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.display {
  font-family: var(--font-display);
}

.muted { color: var(--fg-muted); }
.subtle { color: var(--fg-subtle); }
.accent { color: var(--accent); }

/* ============================================================
   Bootstrap デフォルト上書き(全部潰す)
   グリッドとレスポンシブユーティリティだけは活かす
   ============================================================ */

/* Bootstrap の :root 変数をプロジェクトのものへ */
.container, .container-fluid, .container-sm, .container-md,
.container-lg, .container-xl, .container-xxl {
  --bs-gutter-x: var(--space-6);
}

/* Bootstrap btn の見た目を完全に消す */
.btn,
button.btn {
  --bs-btn-padding-x: 0;
  --bs-btn-padding-y: 0;
  --bs-btn-font-family: var(--font-sans);
  --bs-btn-font-size: var(--text-base);
  --bs-btn-font-weight: 500;
  --bs-btn-line-height: 1.4;
  --bs-btn-color: inherit;
  --bs-btn-bg: transparent;
  --bs-btn-border-width: 0;
  --bs-btn-border-color: transparent;
  --bs-btn-border-radius: 0;
  --bs-btn-hover-color: inherit;
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 0,0,0;
  --bs-btn-active-color: inherit;
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: inherit;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: transparent;
}

/* Bootstrap form-control / form-select の見た目を消す */
.form-control,
.form-select {
  --bs-body-bg: var(--bg-base);
  --bs-body-color: var(--fg-base);
  --bs-border-color: var(--border);
  --bs-border-radius: var(--radius-md);
  background-color: var(--bg-base);
  color: var(--fg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: none;
}
.form-control:focus,
.form-select:focus {
  background-color: var(--bg-base);
  color: var(--fg-base);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ============================================================
   全ての <select> タグの見た目を統一
   ・OSデフォルトの矢印を完全に消す
   ・Phosphor caret-down を SVG として background-image で配置
   ・矢印色はダーク/ライト両モードで --fg-muted の値に揃える
   ・SVGには width/height を明示し、ブラウザによるサイズ解釈の差を排除
   ・Bootstrap 5.3 の .form-select が持つ --bs-form-select-bg-img を握りつぶし、
     向こう側の SVG が裏で再注入されるのを防ぐ
   ============================================================ */
select,
.select,
.form-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--bg-base);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 256 256'%3e%3cpolyline points='208 96 128 176 48 96' fill='none' stroke='%23a39c96' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;
  padding-right: 32px;
  background-clip: padding-box;
  /* Bootstrap 5.3 の .form-select が当てる SVG を完全無効化 */
  --bs-form-select-bg-img: none;
  --bs-form-select-bg-icon: none;
}

/* ライトモードはダーク指定を完全に上書きする(背景関連プロパティを全部再宣言) */
[data-theme="light"] select,
[data-theme="light"] .select,
[data-theme="light"] .form-select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 256 256'%3e%3cpolyline points='208 96 128 176 48 96' fill='none' stroke='%237a716a' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;
}

/* hover/focus でも背景画像が崩れないよう、状態指定にも repeat / size を再宣言 */
select:hover, select:focus,
.select:hover, .select:focus,
.form-select:hover, .form-select:focus {
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;
}

/* IE 独自の矢印を消す保険 */
select::-ms-expand { display: none; }

/* Bootstrap card 上書き */
.card {
  --bs-card-bg: var(--bg-surface);
  --bs-card-color: var(--fg-base);
  --bs-card-border-color: var(--border);
  --bs-card-border-radius: var(--radius-lg);
  --bs-card-inner-border-radius: var(--radius-lg);
  --bs-card-spacer-y: var(--space-5);
  --bs-card-spacer-x: var(--space-5);
  background-color: var(--bg-surface);
  color: var(--fg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: none;
}

/* Bootstrap alert 上書き */
.alert {
  --bs-alert-bg: var(--bg-surface);
  --bs-alert-color: var(--fg-base);
  --bs-alert-border-color: var(--border);
  background-color: var(--bg-surface);
  color: var(--fg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
  box-shadow: none;
}

/* Bootstrap table 上書き */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--fg-base);
  --bs-table-border-color: var(--border);
  --bs-table-striped-bg: transparent;
  --bs-table-hover-bg: var(--hover-overlay);
  color: var(--fg-base);
  margin: 0;
  border-collapse: collapse;
}

/* Bootstrap badge 上書き */
.badge {
  --bs-badge-padding-x: var(--space-2);
  --bs-badge-padding-y: 2px;
  --bs-badge-font-size: var(--text-xs);
  --bs-badge-font-weight: 500;
  --bs-badge-color: var(--fg-base);
  --bs-badge-border-radius: var(--radius-sm);
  background-color: transparent;
}

/* Bootstrap nav 上書き */
.nav, .nav-link {
  --bs-nav-link-color: var(--fg-muted);
  --bs-nav-link-hover-color: var(--fg-base);
  --bs-nav-link-padding-x: 0;
  --bs-nav-link-padding-y: 0;
  --bs-nav-link-font-weight: 500;
  --bs-nav-link-font-size: var(--text-base);
}

/* Bootstrap dropdown / modal / list-group 等は使う際に随時上書き */

/* ============================================================
   C-6: prefers-reduced-motion 対応(アクセシビリティ)
   OS の「視差効果を減らす / Reduce Motion」を ON にしている人には
   アニメーション・トランジションをほぼ無効化する(完全 0 だと一部の
   :focus などが瞬間遷移して不自然になるため 0.01ms に丸める定石)。
   既存の見た目には影響せず、動きに敏感な人の体験だけを守る。
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   C-7: View Transitions(ページ間クロスフェード)
   対応ブラウザ(Chrome 系など)でのみ、同一オリジンのページ遷移を
   160ms の控えめなクロスフェードにする。@view-transition は
   プログレッシブ強化=非対応ブラウザは従来どおり一切変化なし。
   時間は既存哲学(120〜200ms / --transition-base)に合わせる。

   固定・sticky の永続クローム(サイドバー / モバイルヘッダー / 下部タブ /
   FAB)には view-transition-name を与えて root スナップショットから分離する。
   分離しないと、遷移中に固定要素がページのスクロール位置に追従して
   ズレて見える既知の不具合が起きる(分離すれば遷移中も真に固定のまま)。
   各クラスは base.html に1個ずつ(名前重複は遷移が丸ごとスキップされる)。
   ============================================================ */
@view-transition {
  navigation: auto;
}

/* 本文(root)側のクロスフェード時間を既存哲学に合わせる */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 160ms;
  animation-timing-function: ease;
}

/* 永続クロームは遷移中も据え置く(root から分離し、ズレ・チラつきを防ぐ) */
.sidebar         { view-transition-name: app-sidebar; }
.mobile-header   { view-transition-name: app-mobile-header; }
.mobile-tabs     { view-transition-name: app-mobile-tabs; }
.quick-fab       { view-transition-name: app-quick-fab; }
/* Home 右下の固定オンボーディングウィジェット(Home に1個・常時表示)も分離。
   Home は縦スクロールするため、付けないと bottom 固定の widget が遷移中にズレうる。
   Home 限定なので Home 出入りで片側フェードになるが .quick-fab と同様に無害。 */
.home-onboarding { view-transition-name: app-home-onboarding; }

/* OS の「動きを減らす」設定では演出を無効化(遷移は即時・破綻なし)。
   ::view-transition-* 擬似要素は上の *セレクタでは届かないため個別指定。 */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-image-pair(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}