/* Sprint 32 Sub-12: キャメル UI 統一カラーパレット (60-30-10) - 既存テンプレート互換オーバーライド込 */

/* ===== 既存 .site-header (Sprint 1〜31) との互換: ロゴ画像表示 ===== */
.site-header__logo-img {
  height: 40px;
  width: auto;
  display: block;
}

.camel-header__inner-compat {
  display: flex;
  align-items: center;
  gap: 16px;
}

.site-header__brand.camel-header__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  padding: 0;
}

/* ===== 既存 60% 背景 #F7F8FA → 砂ベージュ #FAF6EE ===== */
body {
  background: #FAF6EE !important;
}

.tab-placeholder,
.tab-placeholder__body,
.bl-hydrate-banner__body,
.tab-panel--report .pane__body {
  background: #FAF6EE !important;
}

/* CSS 変数を Camel に置き換え (--color-bg は既存全テンプレが参照)。
   SSOT 化の本体は下記 §2.3-C ブロック (--camel-* 定義の直後) を参照。 */

/* 各画面の細部: あえて Sprint 30/31 のスポット白カードはそのまま (30% 白 = OK) */

.header-quick-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--camel-text-muted, #4B5563);
  background: var(--camel-sub, #FFFFFF);
  border: 1px solid var(--camel-border, #E0DCD0);
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  min-height: 32px;
  white-space: nowrap;
}

/* CSS 詳細度バグ修正: 上の display:inline-flex が UA の [hidden]{display:none} を上書きするため、
   sprint37_settings.js が role 出し分けで link.hidden=true にしても「ユーザー管理」リンクが
   非 admin に漏れ表示される(settings.html / admin_users.html はグローバル [hidden] 救済を読まない)。
   class+属性で詳細度を上げ確実に隠す。参照: feedback_hidden_attr_vs_class_display */
.header-quick-link[hidden] {
  display: none !important;
}

.header-quick-link:hover {
  color: var(--camel-accent, #1F4D8A);
  border-color: var(--camel-accent, #1F4D8A);
  background: var(--camel-sub-accent, #FFF6E0);
  text-decoration: none;
}

/* ============================================================ 60-30-10 ルール
 *
 *
 * 60% (main_base): #FAF6EE 砂ベージュ
 * 30% (sub):       #FFFFFF 純白
 * 10% (accent):    #1F4D8A 深ネイビー
 *  5% (sandstone): #C9A77C 砂岩茶
 *  5% (silt_gray): #7A8C9E シルト灰
 *  5% (薄黄):       #FFF6E0 (Sprint 30 継承)
 *
 * 8 ポイントグリッド: 8 / 16 / 24 / 32 / 40 / 48 / 64
 * AI スロップ禁止: 紫グラデ・メッシュグラデ・ネオン・3D 風ボタン NG
 */

:root {
  --camel-main-base: #FAF6EE;
  --camel-sub: #FFFFFF;
  --camel-accent: #1F4D8A;
  --camel-accent-dark: #163E73;
  --camel-accent-light: #2D5EA5;
  --camel-sandstone: #C9A77C;
  --camel-sand-light: #D9B98F;
  --camel-silt-gray: #7A8C9E;
  --camel-sub-accent: #FFF6E0;

  --camel-text: #1F2937;
  --camel-text-muted: #4B5563;
  --camel-text-soft: #6B7280;
  --camel-border: #E0DCD0;
  --camel-border-strong: #C4BFB1;

  --camel-success: #4F8F4F;
  --camel-warn: #E8A33D;
  --camel-error: #D9534F;
  --camel-info: #1F4D8A;

  --camel-radius-sm: 4px;
  --camel-radius-md: 8px;
  --camel-radius-lg: 12px;

  --camel-shadow-sm: 0 1px 2px rgba(31, 41, 55, 0.06);
  --camel-shadow-md: 0 2px 6px rgba(31, 41, 55, 0.08);
  --camel-shadow-lg: 0 8px 20px rgba(31, 41, 55, 0.10);

  --camel-font-sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", "Yu Gothic", "Yu Gothic UI", sans-serif;
  --camel-font-mono: "SF Mono", Menlo, Consolas, monospace;
}

/* ============================================================ SSOT トークン統合
 * (Sprint 36 UI 刷新 2026-06-04, docs/260604_camel_ui_redesign_plan_v2.md §2.3-C)
 *
 * 課題: デザイントークンが --color-*(report_demo_base.css 基盤) と --camel-*(本ファイル)
 *       の 2 系統に分裂。case-bar 等が --color-primary / --color-border を参照しており、
 *       --camel-accent / --camel-border と数値がわずかにズレて二度と一致しない状態だった。
 *
 * 方針 (安全版): 全 usage を一括書換えする risky な作業はしない。代わりに、構造系の
 *   --color-* トークンを --camel-* の正規値の「エイリアス」にして単一情報源(SSOT)に寄せる。
 *   CSS カスタムプロパティは使用時解決なので、本ブロックが上書きすれば全 --color-* 参照が
 *   自動で --camel-* 正規値に揃う。色が二度と diverge しない。
 *
 * 対応表 (構造系: primary/accent/surface/bg/border/text。数値差はいずれも知覚困難な微差で
 *   60-30-10 ロールは不変):
 *   --color-bg             #F7F8FA →(既存override #FAF6EE)→ --camel-main-base   #FAF6EE  砂ベージュ60%
 *   --color-surface        #FFFFFF                        → --camel-sub         #FFFFFF  白30% (同値)
 *   --color-surface-hover  #FAFBFC                        → --camel-sub-accent? : 残置(用途差で残す)
 *   --color-primary        #1F4D8A                        → --camel-accent      #1F4D8A  ネイビー10% (同値)
 *   --color-primary-hover  #18407A                        → --camel-accent-dark #163E73  (微差)
 *   --color-border         #E3E6EB                        → --camel-border      #E0DCD0  (微差/砂寄り)
 *   --color-border-strong  #C9CED6                        → --camel-border-strong #C4BFB1 (微差/砂寄り)
 *   --color-text           #1A1A1A                        → --camel-text        #1F2937  (微差)
 *   --color-text-sub       #505050                        → --camel-text-muted  #4B5563  (微差)
 *   --color-text-muted     #6B6B6B                        → --camel-text-soft   #6B7280  (微差)
 *
 * 状態色(success/warn/error)と primary-active/primary-soft は意味づけ・コンポーネント文脈が
 *   2 系統で異なり、揃えると見た目が変わる(=success条件「見た目不変」を破る)おそれがあるため
 *   今回は SSOT 化対象外として残置。将来 component 標準化 Sub で個別に整合させる。
 * ============================================================ */
:root {
  /* 60% ベース */
  --color-bg: var(--camel-main-base);            /* #FAF6EE */
  /* 30% サーフェス (同値) */
  --color-surface: var(--camel-sub);             /* #FFFFFF */
  /* 10% アクセント (primary == camel-accent, 同値) */
  --color-primary: var(--camel-accent);          /* #1F4D8A */
  --color-primary-hover: var(--camel-accent-dark); /* #163E73 (旧 #18407A) */
  /* 罫線 (砂寄りの暖色グレーに統一) */
  --color-border: var(--camel-border);           /* #E0DCD0 (旧 #E3E6EB) */
  --color-border-strong: var(--camel-border-strong); /* #C4BFB1 (旧 #C9CED6) */
  /* テキスト階調 */
  --color-text: var(--camel-text);               /* #1F2937 (旧 #1A1A1A) */
  --color-text-sub: var(--camel-text-muted);     /* #4B5563 (旧 #505050) */
  --color-text-muted: var(--camel-text-soft);    /* #6B7280 (旧 #6B6B6B) */
}

/* Reset 補足 */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--camel-main-base);
  color: var(--camel-text);
  font-family: var(--camel-font-sans);
  font-size: 15px;
  line-height: 1.65;
}

a { color: var(--camel-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

button {
  font-family: inherit;
  cursor: pointer;
}

/* ヘッダー (キャメル統一ヘッダー) */
.camel-header {
  background: var(--camel-sub);
  border-bottom: 1px solid var(--camel-border);
  box-shadow: var(--camel-shadow-sm);
  position: sticky;
  top: 0;
  z-index: 100;
}

.camel-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.camel-header__brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.camel-header__logo {
  height: 40px;
  display: block;
}

.camel-header__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.camel-header__nav-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  font-size: 14px;
  color: var(--camel-text-muted);
  border-radius: var(--camel-radius-md);
  transition: background-color 120ms, color 120ms;
  font-weight: 500;
  white-space: nowrap;
}

.camel-header__nav-link:hover {
  background: var(--camel-sub-accent);
  color: var(--camel-accent);
  text-decoration: none;
}

.camel-header__nav-link.is-active {
  background: var(--camel-accent);
  color: var(--camel-sub);
}

.camel-header__user {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.camel-header__user-name {
  font-size: 13px;
  color: var(--camel-text);
  font-weight: 500;
}

.camel-header__user-role {
  display: inline-flex;
  padding: 2px 10px;
  background: var(--camel-sub-accent);
  color: var(--camel-accent);
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid var(--camel-border);
}

.camel-header__logout {
  font-size: 13px;
  color: var(--camel-text-muted);
  padding: 6px 12px;
  border: 1px solid var(--camel-border);
  border-radius: var(--camel-radius-md);
  text-decoration: none;
  background: var(--camel-sub);
}

.camel-header__logout:hover {
  background: var(--camel-main-base);
  color: var(--camel-accent);
  text-decoration: none;
}

/* フッター */
.camel-footer {
  background: var(--camel-sub);
  border-top: 1px solid var(--camel-border);
  margin-top: 64px;
}

.camel-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--camel-text-muted);
}

.camel-footer__inner p {
  margin: 4px 0;
}

.camel-footer__note {
  font-size: 12px;
  color: var(--camel-text-soft);
}

/* 共通ボタン */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 24px;
  background: var(--camel-accent);
  color: var(--camel-sub);
  border: none;
  border-radius: var(--camel-radius-md);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 120ms, transform 80ms;
}

.btn-primary:hover {
  background: var(--camel-accent-dark);
  text-decoration: none;
  color: var(--camel-sub);
}

.btn-primary:active {
  transform: translateY(1px);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 24px;
  background: var(--camel-sub);
  color: var(--camel-accent);
  border: 1.5px solid var(--camel-accent);
  border-radius: var(--camel-radius-md);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 120ms;
}

.btn-secondary:hover {
  background: var(--camel-sub-accent);
  text-decoration: none;
  color: var(--camel-accent-dark);
}

.btn-warning {
  background: var(--camel-warn);
  color: #fff;
}

.btn-danger {
  background: var(--camel-error);
  color: #fff;
}

/* レスポンシブ */
@media (max-width: 1023px) {
  .camel-header__inner {
    padding: 12px 16px;
    flex-wrap: wrap;
    gap: 16px;
  }
  .camel-header__nav {
    order: 3;
    width: 100%;
    flex-wrap: wrap;
  }
}

@media (max-width: 767px) {
  .camel-header__user-name { display: none; }
  .camel-header__nav-link { padding: 6px 10px; font-size: 13px; }
}

@media (max-width: 538px) {
  .camel-header__logo { height: 32px; }
}