/* =========================================
   まんまる ダッシュボード - 共通スタイル
   ========================================= */

:root {
  /* ===== Base palette (5 colors only) =====
     1. Neutral ベース：bg / card / border / text
     2. Accent     ：1色（緑）
     3. Dark       ：1色（ネイビー、サイドバー＆強調用）
     4. Warn       ：1色（黄、注意状態）
     5. Danger     ：1色（赤、要対応状態）
  */

  /* Neutral / Surface — 温かいクリーム基調（hitofro.com 参考の明るいトンマナ） */
  --bg: #fbf8f2;
  --card: #fff;
  --card-alt: #f6f2ea;
  --border: #ece6da;
  --border-strong: #ddd5c6;
  --muted: #9c958a;
  --text: #3c3833;
  --text-light: #6f695f;
  --input-bg: #fdfcf9;

  /* Accent (緑) — メインのブランド色 */
  --accent: #3d8b6e;
  --accent-light: #eaf6f0;
  --accent-dark: #2d6b53;
  --success: #3d8b6e;        /* = accent */

  /* Dark (ネイビー) — サイドバー・情報系強調 */
  --navy: #1f2b3a;
  --navy-light: rgba(31, 43, 58, .08);

  /* Status colors */
  --warn: #d4a03c;            /* 注意（黄） */
  --warn-light: #fbf3e0;
  --danger: #d4645c;          /* 要対応（赤） */
  --danger-light: #fbe9e7;

  /* Shadows */
  --shadow: 0 2px 12px rgba(0, 0, 0, .04);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, .06);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .08);

  /* Category accent (機能カテゴリ識別、3色) */
  --cat-recruitment: #3d8b6e;       /* = accent */
  --cat-recruitment-light: #eaf6f0;
  --cat-quality: #d4a03c;           /* = warn */
  --cat-quality-light: #fbf3e0;
  --cat-sales: #d4645c;             /* = danger */
  --cat-sales-light: #fbe9e7;

  /* Sidebar — 明るいアイボリー（旧ネイビーから刷新） */
  --sidebar-bg: #f3eee2;
  --sidebar-text: #6f695f;
  --sidebar-text-active: #2d6b53;
  --sidebar-bg-active: rgba(61, 139, 110, .12);
  --sidebar-border: rgba(60, 56, 51, .10);
  /* Topbar（明るい白系） */
  --topbar-bg: #fffdf9;
  --topbar-border: #ece6da;

  /* KPI palette — 旧8色を4色に集約 */
  --kpi-navy: #1f2b3a;              /* 情報系（中立） */
  --kpi-green: #3d8b6e;             /* 良好・主要 */
  --kpi-yellow: #d4a03c;            /* 注意 */
  --kpi-red: #d4645c;               /* 警告 */

  /* Legacy aliases — 既存HTMLの色変数を新パレットへ自動マップ */
  --kpi-blue: #1f2b3a;              /* → navy */
  --kpi-orange: #d4a03c;            /* → yellow */
  --kpi-purple: #1f2b3a;            /* → navy */
  --kpi-teal: #3d8b6e;              /* → green */

  /* Chart palette aliases (グラフでの統一カラー用) */
  --chart-1: #3d8b6e;               /* primary = accent */
  --chart-2: #1f2b3a;               /* dark = navy */
  --chart-3: #d4a03c;               /* warn */
  --chart-4: #d4645c;               /* danger */
  --chart-5: #8db9a8;               /* accent light(薄緑) */
  --chart-6: #6b7888;               /* navy light(薄グレー青) */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  font-size: 16px;
  line-height: 1.65;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img, svg { display: block; max-width: 100%; }
table { border-collapse: collapse; }

::selection { background: var(--accent-light); color: var(--accent); }

/* =========================================
   Animations
   ========================================= */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cardStagger {
  from { opacity: 0; transform: translateY(24px) scale(.96); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

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

@keyframes pulse {
  0%, 100% { opacity: .7; }
  50% { opacity: .35; }
}

/* =========================================
   Accessibility polish（2026-07-21・全ページ共通）
   ========================================= */
/* キーボード操作時のフォーカスリング（マウス操作では出ない） */
a:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* OSで「視差効果を減らす」設定のユーザーにはアニメーションを止める */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* =========================================
   Utility classes
   ========================================= */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }