/* CRM のスタイル。SmartHR Design System のデザイントークンに従う。
 *
 * 出典: https://smarthr.design/products/design-tokens/
 * 値は 2026-08-05 時点の公開ドキュメントから取った。**推測で置いた値は書かない**——
 * 唯一の例外は TRANSPARENCY_30（影の色）で、OVERLAY (0.15) と SCRIM (0.5) から
 * rgba(3,3,2,0.3) と解釈した。
 *
 * SmartHR Design System は明色前提のため、暗色テーマは持たない。
 * 以前あった `color-scheme: light dark` はここで捨てている。
 */

:root {
  /* ---- 色 ---- */
  --main: #0077c7;
  --main-darken: #0068ad;              /* MAIN の押下状態。トークンには無いので自前 */
  --text-black: #23221e;
  --text-grey: #706d65;
  --text-link: #0071c1;
  --text-disabled: #c1bdb7;
  --text-white: #fff;
  --danger: #e01e5a;
  --warning: #ffcc17;
  --border: #d6d3d0;
  --background: #f8f7f6;
  --head: #edebe8;
  --column: #f8f7f6;
  --over-background: #f2f1f0;
  --white: #fff;
  --overlay: rgba(3, 3, 2, .15);
  --transparency-30: rgba(3, 3, 2, .3);

  /* ---- 余白（基準 16px） ---- */
  --space-025: .25rem;   /*  4px */
  --space-05: .5rem;     /*  8px */
  --space-075: .75rem;   /* 12px */
  --space-1: 1rem;       /* 16px */
  --space-125: 1.25rem;  /* 20px */
  --space-15: 1.5rem;    /* 24px */
  --space-2: 2rem;       /* 32px */
  --space-25: 2.5rem;    /* 40px */
  --space-3: 3rem;       /* 48px */

  /* ---- 文字 ---- */
  --font-xs: .75rem;
  --font-s: .857rem;
  --font-m: 1rem;
  --font-l: 1.2rem;
  --font-xl: 1.5rem;
  --font-xxl: 2rem;
  --leading-tight: 1.25;
  --leading-normal: 1.5;

  /* ---- 角丸 ---- */
  --radius-s: 4px;
  --radius-m: 6px;
  --radius-l: 8px;
  --radius-full: 10000px;

  /* ---- 影 ---- */
  --shadow-1: 0 1px 2px 0 var(--transparency-30);
  --shadow-3: 0 4px 8px 2px var(--transparency-30);
}

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

body {
  margin: 0;
  /* SmartHR は「利用者の環境に委ねる」方針でシステムフォントを使う */
  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans",
               "Noto Sans JP", "Yu Gothic UI", sans-serif;
  font-size: var(--font-m);
  line-height: var(--leading-normal);
  color: var(--text-black);
  background: var(--background);
}

a { color: var(--text-link); }
a:hover { text-decoration: none; }

/* ============================================================
 * ヘッダー
 * ============================================================ */

.app-header {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-15);
  height: 3.5rem;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  position: sticky;
  top: 0;
  z-index: 10;
}

.app-header .brand {
  font-size: var(--font-l);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--main);
  text-decoration: none;
  white-space: nowrap;
}

.app-nav { display: flex; align-items: center; gap: var(--space-025); flex: 1; }

.app-nav a {
  padding: var(--space-05) var(--space-075);
  border-radius: var(--radius-m);
  color: var(--text-black);
  text-decoration: none;
  white-space: nowrap;
}
.app-nav a:hover { background: var(--over-background); }

.app-header .spacer { flex: 1; }

.header-search input {
  width: 12rem;
  margin: 0;
}

.app-header .user {
  color: var(--text-grey);
  font-size: var(--font-s);
  text-decoration: none;
  white-space: nowrap;
}
.app-header .user:hover { text-decoration: underline; }

/* ============================================================
 * 本文
 * ============================================================ */

main {
  /* 1 行が長すぎると読めない。SmartHR も本文幅を制限する */
  max-width: 68rem;
  margin: 0 auto;
  padding: var(--space-2) var(--space-15) var(--space-3);
}

h1, h2, h3, h4 { line-height: var(--leading-tight); margin: 0 0 var(--space-1); }
h2 { font-size: var(--font-xl); margin-top: 0; }
h3 { font-size: var(--font-l); margin-top: var(--space-2); }
h4 { font-size: var(--font-m); margin-top: var(--space-15); }
p { margin: 0 0 var(--space-1); }

.muted { color: var(--text-grey); font-size: var(--font-s); }
.error { color: var(--danger); }

/* ============================================================
 * カード（テンプレートでは .panel）
 * ============================================================ */

.panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: var(--space-15);
  margin: 0 0 var(--space-15);
  box-shadow: var(--shadow-1);
}
.panel > h3:first-child, .panel > h4:first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }

/* ============================================================
 * 表
 * ============================================================ */

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  overflow: hidden;
  margin-bottom: var(--space-15);
}
th, td {
  text-align: left;
  padding: var(--space-075) var(--space-1);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
th {
  background: var(--head);
  font-size: var(--font-s);
  font-weight: 700;
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--column); }

/* ============================================================
 * バッジ
 * ============================================================ */

.badge {
  display: inline-block;
  padding: 0 var(--space-05);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--white);
  font-size: var(--font-xs);
  line-height: 1.6;
  white-space: nowrap;
  color: var(--text-grey);
}
/* 状態の色。**意味が変わる箇所だけ着ける**——全部に色を付けると差が読めない */
.badge.is-open      { border-color: var(--main); color: var(--main); }
.badge.is-progress  { background: var(--main); border-color: var(--main); color: var(--text-white); }
.badge.is-done      { background: var(--head); }
.badge.is-danger    { border-color: var(--danger); color: var(--danger); }

/* ============================================================
 * フォーム
 * ============================================================ */

label { display: block; margin: 0 0 var(--space-075); }
label > input[type=checkbox] { margin-right: var(--space-025); }

input[type=text], input[type=email], input[type=password], input[type=search],
input[type=date], input[type=file], input[type=number], textarea, select {
  display: block;
  width: 100%;
  max-width: 34rem;
  margin-top: var(--space-025);
  padding: var(--space-05) var(--space-075);
  font: inherit;
  color: var(--text-black);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--main);
  outline-offset: 1px;
}
textarea { min-height: 8rem; resize: vertical; }

button, a.button {
  font: inherit;
  font-weight: 700;
  padding: var(--space-05) var(--space-1);
  color: var(--text-white);
  background: var(--main);
  border: 1px solid var(--main);
  border-radius: var(--radius-m);
  cursor: pointer;
}
a.button { display: inline-block; text-decoration: none; }
button:hover, a.button:hover { background: var(--main-darken); border-color: var(--main-darken); }
button:focus-visible, a.button:focus-visible { outline: 2px solid var(--main); outline-offset: 2px; }

/* 一覧に並ぶ小さな操作。主ボタンと同じ強さで並ぶと、どれが主か分からなくなる */
form.inline { display: inline; }
form.inline button, button.secondary {
  color: var(--text-black);
  background: var(--white);
  border-color: var(--border);
  font-weight: 400;
  font-size: var(--font-s);
  padding: var(--space-025) var(--space-05);
}
form.inline button:hover, button.secondary:hover { background: var(--over-background); }

.filters {
  display: flex;
  gap: var(--space-075);
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--space-15);
}
.filters input, .filters select { margin-top: 0; }

/* ============================================================
 * スレッド（チケットの対話・検索結果・お知らせ）
 * ============================================================ */

.thread { list-style: none; padding: 0; margin: 0 0 var(--space-15); }
.thread li {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: var(--space-1) var(--space-15);
  margin-bottom: var(--space-075);
}
/* 機械が書いた行は本文と区別する。読み飛ばしてよい情報だと分かるように */
.thread li.system { background: var(--column); }
.thread .meta {
  font-size: var(--font-xs);
  color: var(--text-grey);
  margin-bottom: var(--space-025);
}
.thread .body { white-space: pre-wrap; }

details summary { cursor: pointer; }
pre {
  background: var(--column);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: var(--space-075);
  overflow-x: auto;
  font-size: var(--font-s);
}
code {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: .9em;
}

/* ============================================================
 * Wiki の本文（サニタイズ済み HTML）
 * ============================================================ */

.wiki { max-width: 48rem; }
.wiki h1 { font-size: var(--font-xxl); margin-top: var(--space-2); }
.wiki h2 {
  font-size: var(--font-xl);
  margin-top: var(--space-2);
  padding-bottom: var(--space-025);
  border-bottom: 1px solid var(--border);
}
.wiki h3 { font-size: var(--font-l); }
.wiki code { background: var(--over-background); padding: 0 var(--space-025); border-radius: var(--radius-s); }
.wiki pre code { background: none; padding: 0; }
.wiki blockquote {
  margin: var(--space-1) 0;
  padding: var(--space-025) var(--space-1);
  border-left: 3px solid var(--border);
  color: var(--text-grey);
}
.wiki img { max-width: 100%; height: auto; border-radius: var(--radius-m); }

.app-footer {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 var(--space-15) var(--space-2);
  border-top: 1px solid var(--border);
  padding-top: var(--space-1);
}

/* ============================================================
 * ログイン
 * ============================================================ */

.login-page {
  max-width: 24rem;
  margin: var(--space-3) auto;
  padding: 0 var(--space-15);
}
.login-page .panel { padding: var(--space-2); }
.login-page button, .login-page a.button { width: 100%; margin-top: var(--space-05); text-align: center; }

/* ============================================================
 * 画面が狭いとき
 * ============================================================ */

@media (max-width: 40rem) {
  .app-header { height: auto; flex-wrap: wrap; padding: var(--space-05) var(--space-1); }
  .app-nav { order: 3; width: 100%; overflow-x: auto; }
  .header-search input { width: 8rem; }
  main { padding: var(--space-15) var(--space-1) var(--space-2); }
  table { display: block; overflow-x: auto; }
}