/*
 * taskle テーマ: Redmine 標準の見た目を Backlog に寄せる。
 * 設計: docs/backlog-feature-parity-design.md 4.15
 *
 * 方針:
 *   - 本体の application.css を読み込み、その上に差分だけを書く（HTML 構造は変えない）
 *   - 本体は青系の色を Open Color の変数（--oc-blue-* / --oc-indigo-*）で参照しているので、
 *     その変数を緑の階調に差し替えて全画面の基調色をまとめて変える
 *   - Backlog のロゴや画像は使わない。色・余白・角丸・部品の形だけを寄せる
 */
@import url("/assets/application-5bad425e.css");

:root {
  /* 基調色（緑）。0 が最も淡く 9 が最も濃い。9 はリンク色で、白地でのコントラスト比 5.5 以上 */
  --oc-blue-0: #eaf7f3;
  --oc-blue-1: #d3efe6;
  --oc-blue-2: #a9dfcd;
  --oc-blue-3: #7fcfb5;
  --oc-blue-4: #5fc2a3;
  --oc-blue-5: #4caf93;
  --oc-blue-6: #3d9f84;
  --oc-blue-7: #2c8a70;
  --oc-blue-8: #1f755e;
  --oc-blue-9: #00755f;
  --oc-indigo-0: #eaf7f3;
  --oc-indigo-1: #d3efe6;
  --oc-indigo-2: #a9dfcd;
  --oc-indigo-3: #7fcfb5;
  --oc-indigo-4: #5fc2a3;
  --oc-indigo-5: #4caf93;
  --oc-indigo-6: #3d9f84;
  --oc-indigo-7: #2c8a70;
  --oc-indigo-8: #1f755e;
  --oc-indigo-9: #00755f;

  --taskle-header: #2c8a70;
  --taskle-header-dark: #1f6b57;
  --taskle-page: #f3f3ef;
  --taskle-border: #e0e0da;
  --taskle-text: #333333;

  --fonts-main: "Open Sans", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "Noto Sans JP", "Noto Sans", sans-serif;
}

body { color: var(--taskle-text); }
#content h1, h2, h3, h4, h5, h6 { color: var(--taskle-text); }
a:hover, a:active { color: var(--oc-blue-8); }

/***** ヘッダー *****/
nav.top-menu { background: var(--taskle-header-dark); }
#header { background: var(--taskle-header); }
#header h1 { font-weight: bold; letter-spacing: 0.02em; }
#quick-search #q { border-color: transparent; border-radius: 4px; }

#main-menu { background: var(--oc-white); border-block-end: 1px solid var(--taskle-border); }
#main-menu li a { color: #555; }
#main-menu li a:hover { background-color: var(--oc-blue-0); color: var(--taskle-text); }
#main-menu li a.selected, #main-menu li a.selected:hover {
  color: var(--oc-blue-9);
  box-shadow: inset 0 -3px 0 var(--oc-blue-5);
}
#main-menu li a.new-object {
  background-color: var(--oc-blue-5);
  border-color: var(--oc-blue-5);
  color: var(--oc-white);
}
#main-menu li a.new-object:hover { background-color: var(--oc-blue-6); color: var(--oc-white); }

/***** 本文: 灰色の地に白いカードを置く *****/
#wrapper, #main { background: var(--taskle-page); }
#content {
  background: var(--oc-white);
  border: 1px solid var(--taskle-border);
  border-radius: 6px;
  margin: 12px;
}
#sidebar { background: transparent; }
#sidebar h3 { color: #666; font-size: 0.8125rem; }
#footer { background: var(--taskle-page); border-block-start: 0; }

.box {
  background-color: var(--oc-white);
  color: var(--taskle-text);
  border-color: var(--taskle-border);
  border-radius: 6px;
}
fieldset.collapsible, fieldset.box { border-color: var(--taskle-border); }

/***** 一覧表 *****/
table.list, .table-list { border-color: var(--taskle-border); }
table.list th, .table-list-header {
  background-color: #f7f7f4;
  border-block-end: 1px solid var(--taskle-border);
  color: #666;
  font-weight: normal;
  padding-block: 7px;
}
table.list td { border-block-start-color: #ecece6; padding-block: 6px; }
table.list:not(.odd-even) tbody tr:nth-child(even), .even { background-color: var(--oc-white); }
table.list:not(.odd-even) tbody tr:nth-child(odd):hover, .odd:hover,
table.list:not(.odd-even) tbody tr:nth-child(even):hover, .even:hover { background-color: var(--oc-blue-0); }

/***** ボタンと入力欄 *****/
input[type="submit"], button[type="submit"] {
  background-color: var(--oc-blue-5);
  border: 1px solid var(--oc-blue-5);
  border-radius: 4px;
  color: var(--oc-white);
  padding-inline: 14px;
}
input[type="submit"]:hover, button[type="submit"]:hover { background-color: var(--oc-blue-6); }
input[type="submit"]:disabled, button[type="submit"]:disabled { opacity: 0.5; cursor: default; }
input[type="text"], input[type="password"], input[type="date"], input[type="number"], select, textarea {
  border-radius: 4px;
}

/***** 課題の詳細 *****/
div.issue {
  background: var(--oc-white);
  border-color: var(--taskle-border);
  border-radius: 6px;
}
#history .journal, div.journal { border-color: var(--taskle-border); }

/***** ステータスのバッジ（javascripts/theme.js が付ける） *****/
.status-pill {
  display: inline-block;
  min-inline-size: 4.5em;
  padding: 1px 10px;
  border-radius: 999px;
  background: #868cb7;
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.6;
  text-align: center;
  white-space: nowrap;
}
.status-pill[data-status-kind="open"] { background: #ed8077; }
.status-pill[data-status-kind="in-progress"] { background: #4488c5; }
.status-pill[data-status-kind="resolved"] { background: #5eb5a6; }
.status-pill[data-status-kind="closed"] { background: #b0be3c; }
.status-pill[data-status-kind="feedback"] { background: #e8a23a; }
.status-pill[data-status-kind="rejected"] { background: #9a9a9a; }

/***** ログイン画面 *****/
#login-form { border-color: var(--taskle-border); border-radius: 6px; background: var(--oc-white); }
/* パスワードの表示・非表示（javascripts/theme.js が付ける）。欄を包む div の右端にボタンを重ねる */
#login-form .password-field { position: relative; }
#login-form .password-field input { padding-inline-end: 4.5em; }
#login-form .password-toggle {
  position: absolute;
  inset-inline-end: 6px;
  inset-block-start: 0;
  block-size: 29px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--oc-blue-6);
  font-size: 0.8rem;
  cursor: pointer;
}
#login-form .password-toggle:hover { text-decoration: underline; }

/***** 印刷では地の色を付けない *****/
@media print {
  #wrapper, #main { background: var(--oc-white); }
  #content { border: 0; margin: 0; }
}