/* ==========================================================================
   フォーム営業システム（ウェルビーライフHD）— 見た目の層
   app.css の部品名はそのまま、色・書体・骨格だけをここで差し替える。

   考え方: 介護事業の承継を扱う社内の「帳簿」。
   - 骨格色は苔（moss）。サイドバーの深い緑が唯一の濃い面で、本文側は白と薄い紙色だけ。
   - 琥珀（amber）は「人の手が要るもの」（承認待ち・要返信・手動送信）にだけ使う。
   - 煉瓦（brick）は「止まっている・失敗」にだけ使う。装飾には使わない。
   - 書体は2つ: 本文と操作は Zen Kaku Gothic New、画面の名前と数字は Shippori Mincho。
   - 影は使わない。区切りは罫線。角はほとんど落とさない。
   ========================================================================== */

:root {
  --ink: #1b2622;
  --ink-2: #3f4b46;
  --ink-3: #6a7570;
  --ink-4: #9aa49f;

  --paper: #f3f5f2;
  --surface: #ffffff;
  --surface-2: #f7f9f6;
  --line: #dde3df;
  --line-strong: #c3ccc6;

  /* 苔: 主操作・進捗・リンク */
  --ai: #2f5f4a;
  --ai-700: #22463a;
  --ai-500: #3c7a60;
  --ai-100: #d8e6dd;
  --ai-50: #edf3ef;

  /* 煉瓦: 停止・不達・失敗・エラーだけ */
  --shu: #a8432f;
  --shu-700: #86321f;
  --shu-50: #f8ece8;

  /* 若葉: 完了 */
  --take: #2f7a5a;
  --take-50: #e4f1e9;

  /* 琥珀: 人の手が要るもの */
  --kin: #a5690b;
  --kin-50: #fbf1dc;

  --moss-deep: #1e3a2f;
  --moss-deep-2: #254838;
  --moss-text: #d9e6dd;
  --moss-text-dim: #9fb7aa;

  --font-ui: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif;
  --font-mark: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;

  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 4px;

  --sidebar-w: 248px;
  --content-max: 1120px;
  --focus: 0 0 0 3px rgba(165, 105, 11, 0.35);
  --shadow-pop: 0 10px 28px rgba(27, 38, 34, 0.18), 0 1px 3px rgba(27, 38, 34, 0.08);
}

body {
  font-family: var(--font-ui);
  font-weight: 400;
  letter-spacing: 0.01em;
}

a {
  color: var(--ai-500);
}
a:hover {
  color: var(--ai-700);
}

/* ---------- サイドバー（唯一の濃い面） ---------- */
.sidebar {
  background: var(--moss-deep);
  border-right: 0;
  padding: 24px 12px 16px;
  color: var(--moss-text);
}
.sidebar-brand {
  padding: 0 10px 20px;
  border-bottom: 1px solid rgba(217, 230, 221, 0.18);
  margin-bottom: 10px;
}
.sidebar .wordmark,
.sidebar .wordmark:hover {
  color: #fff;
  align-items: center;
}
.sidebar .wordmark-main {
  font-size: 15px;
  letter-spacing: 0.02em;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.35;
}
.wordmark-seal {
  background: transparent;
  border: 1.5px solid currentColor;
  color: inherit;
  border-radius: 2px;
  width: 24px;
  height: 24px;
  font-size: 14px;
}
.topbar .wordmark-seal {
  color: var(--ai);
}
.nav {
  gap: 1px;
}
.nav-group {
  margin: 18px 0 6px;
  padding: 0 10px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--moss-text-dim);
}
.nav-group:first-child {
  margin-top: 4px;
}
.nav-item {
  color: var(--moss-text);
  border-radius: var(--r-md);
  min-height: 38px;
  font-size: 14px;
  position: relative;
}
.nav-item svg {
  stroke-width: 1.5;
  opacity: 0.85;
}
.nav-item:hover {
  background: var(--moss-deep-2);
  color: #fff;
}
.nav-item.is-active {
  background: var(--moss-deep-2);
  color: #fff;
  font-weight: 500;
}
.nav-item.is-active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 7px;
  bottom: 7px;
  width: 3px;
  background: var(--kin);
}
.nav-count {
  background: var(--kin);
  color: #1b2622;
  font-weight: 700;
}
.nav-item[data-nav="replies"] .nav-count {
  background: #e8a98f;
  color: #4a1d12;
}
.sidebar-foot {
  border-top: 1px solid rgba(217, 230, 221, 0.18);
}
.account-name {
  color: #fff;
}
.account-mail {
  color: var(--moss-text-dim);
}
.sidebar .sidebar-legal,
.sidebar .small,
.sidebar .muted {
  color: var(--moss-text-dim);
}

/* ---------- 本文の骨格 ---------- */
.main {
  padding: 36px 44px 88px;
}
.page-head {
  margin-bottom: 26px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-strong);
}
.page-title {
  font-family: var(--font-mark);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: 0.04em;
  line-height: 1.3;
}
.page-desc {
  font-size: 13.5px;
  color: var(--ink-3);
}
h1, h2, h3 {
  letter-spacing: 0.01em;
}
.panel {
  border-radius: var(--r-lg);
  border-color: var(--line);
}
.panel-head {
  padding: 14px 20px;
}
.panel-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.panel-desc,
.field-hint,
.muted,
.small {
  color: var(--ink-3);
}

/* ---------- 数字（帳簿の数字は明朝） ---------- */
.metric-value,
.kpi-value {
  font-family: var(--font-mark);
  font-weight: 600;
  font-size: 30px;
  letter-spacing: 0.02em;
}
.metric-label,
.kpi-label {
  font-size: 13px;
  color: var(--ink-3);
}
.metrics {
  border-radius: var(--r-lg);
}

/* ---------- ボタン ---------- */
.btn {
  border-radius: var(--r-md);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.btn-primary {
  background: var(--ai);
  border-color: var(--ai);
}
.btn-primary:hover:not(:disabled) {
  background: var(--ai-700);
  border-color: var(--ai-700);
}
.btn-secondary {
  background: var(--surface);
  color: var(--ai-700);
  border-color: var(--ai-100);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--ai-50);
  color: var(--ai-700);
  border-color: var(--ai-500);
}
.btn-ghost {
  color: var(--ai-500);
}
.btn-danger {
  color: var(--shu);
  border-color: #e3c0b7;
}

/* ---------- 札（輪郭だけ・塗らない） ---------- */
.badge {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink-2);
  border-radius: 2px;
  height: 22px;
  font-weight: 500;
}
.badge-attention {
  background: transparent;
  color: var(--shu);
  border-color: #dba99d;
}
.badge-warning {
  background: var(--kin-50);
  color: #7f5107;
  border-color: #e4c98e;
}
.badge-success {
  background: transparent;
  color: var(--take);
  border-color: #a9d0bb;
}
.badge-info {
  background: transparent;
  color: var(--ai-500);
  border-color: var(--ai-100);
}

/* ---------- 表（罫線で読む） ---------- */
.table th {
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 700;
  border-bottom: 2px solid var(--ink-2);
  padding: 10px 14px;
}
.table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
}
.table tr.is-link:hover td {
  background: var(--ai-50);
}
.table .cell-strong {
  font-weight: 500;
}

/* ---------- 注意書き・バナー ---------- */
.alert {
  border-radius: var(--r-md);
}
.alert-info {
  background: var(--surface-2);
  border-color: var(--line);
}
.alert-info::before {
  background: var(--ai-500);
}
.send-banner {
  border-radius: var(--r-lg);
}

/* ---------- 入力 ---------- */
.input,
.select,
.textarea {
  border-radius: var(--r-md);
  border-color: var(--line-strong);
  background: var(--surface);
}
.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--ai-500);
}
.field-label {
  font-weight: 500;
  color: var(--ink-2);
}
.subnav .is-active {
  color: var(--ai-700);
  border-bottom-color: var(--kin);
}

/* ---------- 公開ページ（ログイン・予約） ---------- */
.public-header,
.auth-card {
  border-color: var(--line);
}
.auth-title,
.legal-title {
  font-family: var(--font-mark);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.public .wordmark-main {
  font-weight: 600;
  letter-spacing: 0.08em;
}
.public .wordmark-seal {
  color: var(--ai);
}

/* ---------- 出典 ---------- */
.data-attribution {
  margin-top: 48px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-4);
}

/* ---------- モバイル ---------- */
@media (max-width: 960px) {
  .topbar {
    background: var(--moss-deep);
    color: #fff;
  }
  .topbar .wordmark,
  .topbar .wordmark:hover,
  .topbar .icon-btn {
    color: #fff;
  }
  .topbar .wordmark-seal {
    color: #fff;
  }
  .main {
    padding: 20px 16px 72px;
  }
  .page-title {
    font-size: 23px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}