/* ============================================================
   KitazawaERP 共通テーマ —「やわらかポップ」緑基調（フラット・グラデ不使用）
   新規ページはこれを <link> で読み込み、色は変数で参照する。
   各ページが .card/.btn を再定義していても、色は var() 参照のため
   ここの変数を変えれば全画面が一括で再スキンされる。
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700&family=M+PLUS+Rounded+1c:wght@400;500;700;800&display=swap');

:root{
  /* グリーン階調（やわらかめ・少し鮮やか） */
  --green-900:#0f4a2a; --green-800:#15803d; --green-700:#16a34a;
  --green-600:#1eb257; --green-500:#34d76a; --green-400:#5fe08c;
  --green-200:#bbf3cf; --green-100:#dcfce7; --green-50:#f1fdf6;

  /* アクセント（メイン＝緑／サブ＝暖色でポップに） */
  --accent:#16a34a; --accent-dark:#13883a;
  --warm:#ff8a5c;  --warm-soft:#fff1ea;   /* コーラル */
  --sun:#fbbf24;   --sun-soft:#fef6e0;     /* イエロー */
  --sky:#38bdf8;   --sky-soft:#e7f6fe;     /* スカイ */
  --grape:#a78bfa; --grape-soft:#f1ecfe;   /* パープル */

  /* ベース */
  --ink:#143524; --sub:#3f5548; --line:#dcebe1;
  --bg:#eef9f1; --card:#ffffff; --bad:#dc2626;

  /* かたち */
  --radius:16px; --radius-sm:10px; --radius-pill:999px;

  /* 影（やわらかい二段影） */
  --shadow:0 4px 14px rgba(16,90,55,.08);
  --shadow-lg:0 12px 30px rgba(16,90,55,.16);

  /* かつてグラデだった変数は単色に統一（グラデ不採用）。
     既存ページが var(--grad-primary) を参照しているため、ここを単色にすると
     全ボタンがフラットな緑になる。 */
  --grad-primary:var(--accent);
  --grad-head:var(--green-800);
  --grad-bg:var(--bg);

  /* フォント（ポップな丸ゴシック） */
  --font-pop:'BIZ UDPGothic','M PLUS Rounded 1c', system-ui, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}

/* ── ベース ───────────────────────────────────────────────── */
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
/* フォントを全画面に強制適用（各ページが body{font-family} を自前指定して
   いるため !important で上書き。input/button等は継承しないので明示指定） */
body, input, select, textarea, button{
  font-family:var(--font-pop) !important;
  font-weight:500;
}
::selection{ background:var(--green-200); color:var(--green-900); }

/* フォーカスリング（キーボード操作時のみ） */
:focus-visible{ outline:2px solid var(--green-400); outline-offset:2px; }

/* スクロールバー（やわらかポップ） */
*{ scrollbar-width:thin; scrollbar-color:var(--green-400) transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:var(--green-400); border-radius:999px; border:2px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:var(--green-600); }
*::-webkit-scrollbar-track{ background:transparent; }

/* ── 基本コンポーネント（ページ未定義時の既定＋共通の底上げ） ── */
.btn{
  background:var(--grad-primary); color:#fff; border:0;
  border-radius:var(--radius-pill); padding:9px 16px; font-weight:700;
  cursor:pointer; box-shadow:0 3px 8px rgba(22,163,74,.25);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 6px 14px rgba(22,163,74,.32); filter:brightness(1.03); }
.btn:active{ transform:translateY(0) scale(.98); box-shadow:0 2px 6px rgba(22,163,74,.25); }
.btn.ghost{ background:#fff; color:var(--ink); border:1.5px solid var(--line); box-shadow:none; }
.btn.ghost:hover{ background:var(--green-50); border-color:var(--green-400); }

.badge-green{
  background:var(--green-100); color:var(--green-800);
  border:1px solid var(--green-200); border-radius:var(--radius-pill);
  padding:2px 11px; font-size:12px; font-weight:700;
}

/* ── 共通アニメーション（各ページで利用可） ─────────────────── */
@keyframes pop-in{ 0%{opacity:0; transform:translateY(8px) scale(.98);} 100%{opacity:1; transform:translateY(0) scale(1);} }
@keyframes fade-in{ from{opacity:0;} to{opacity:1;} }
@keyframes float-y{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-4px);} }
.pop-in{ animation:pop-in .32s cubic-bezier(.22,1,.36,1) both; }
.fade-in{ animation:fade-in .3s ease both; }

/* ── 汎用ユーティリティ（任意で使う） ───────────────────────── */
.chip-warm{ background:var(--warm-soft); color:#c2410c; border:1px solid #ffd9c7; border-radius:var(--radius-pill); padding:2px 11px; font-size:12px; font-weight:700; }
.chip-sun { background:var(--sun-soft);  color:#a16207; border:1px solid #fbe3a8; border-radius:var(--radius-pill); padding:2px 11px; font-size:12px; font-weight:700; }
.chip-sky { background:var(--sky-soft);  color:#0369a1; border:1px solid #c3e9fb; border-radius:var(--radius-pill); padding:2px 11px; font-size:12px; font-weight:700; }

/* ── .hidden を全画面で確実に効かせる（IDセレクタ/インラインdisplayに勝つ） ──
   各ページが独自に .hidden{display:none} を定義しても、#id{display:flex} や
   style="display:flex" があると詳細度で負けて消えない事故が起きる。
   utilityクラスなので !important で一律に無効化を保証する。 */
.hidden{ display:none !important; }