/* ============================================================
   試薬在庫管理システム  パステルテーマ
   ============================================================ */
* { box-sizing: border-box; }

:root {
  --bg:          #f2f6fc;   /* 背景(淡い青) */
  --card:        #ffffff;
  --ink:         #3b414d;   /* 本文 */
  --ink-soft:    #6b7280;   /* 補助文字 */
  --line:        #e6ecf5;   /* 罫線 */
  --primary:     #8ec5e6;   /* パステルブルー */
  --primary-deep:#5e97c1;   /* ボタン等 */
  --primary-hov: #4f86af;
  --header-a:    #aad6f2;   /* ヘッダーグラデ */
  --header-b:    #ccc3ee;
  --th-bg:       #eaf1fa;
  --focus:       rgba(142,197,230,0.40);
}

/* ===== テーマ(パステル数種類) 設定画面で選択 ===== */
:root[data-theme="green"] {
  --bg:#eef8f1; --line:#dcefe3; --primary:#93d3ac; --primary-deep:#4fa274; --primary-hov:#428a63;
  --header-a:#b7e6c8; --header-b:#c3e6da; --th-bg:#e6f4ec; --focus:rgba(120,200,160,0.40);
}
:root[data-theme="pink"] {
  --bg:#fdf2f6; --line:#f5e0e8; --primary:#f0a9c0; --primary-deep:#d2708f; --primary-hov:#bd5c7c;
  --header-a:#f7c8d8; --header-b:#eec8ea; --th-bg:#fbe8ef; --focus:rgba(230,160,190,0.40);
}
:root[data-theme="purple"] {
  --bg:#f4f2fb; --line:#e6e0f4; --primary:#b6a4e0; --primary-deep:#836dc0; --primary-hov:#7059ab;
  --header-a:#cebdee; --header-b:#c4c1ef; --th-bg:#eee9fb; --focus:rgba(160,140,220,0.40);
}
:root[data-theme="warm"] {
  --bg:#fdf5ee; --line:#f3e4d5; --primary:#f2bf94; --primary-deep:#d38b4c; --primary-hov:#bd783d;
  --header-a:#f7d2ac; --header-b:#f3dabf; --th-bg:#fbeee1; --focus:rgba(230,180,130,0.40);
}
:root[data-theme="gray"] {
  --bg:#f3f5f8; --line:#e2e7ee; --primary:#aebccb; --primary-deep:#6c8298; --primary-hov:#5b7085;
  --header-a:#ccd6e1; --header-b:#d6dbe3; --th-bg:#eef2f7; --focus:rgba(150,170,190,0.40);
}

body {
  font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  margin: 0;
  background:
    radial-gradient(1200px 320px at 100% -10%, #eaf0ff 0%, rgba(234,240,255,0) 60%),
    var(--bg);
  color: var(--ink);
  line-height: 1.55;
}

/* ===== ヘッダー ===== */
header {
  background: linear-gradient(120deg, var(--header-a) 0%, var(--header-b) 100%);
  color: #3a4256;
  padding: 12px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  box-shadow: 0 3px 14px rgba(90, 110, 150, 0.18);
}
header h1 {
  font-size: 1.15rem;
  margin: 0;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #384867;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
header h1::before { content: "🧪"; font-size: 1.15rem; filter: saturate(0.9); }
header nav { display: flex; flex-wrap: wrap; gap: 2px; }
header nav a {
  color: #45506d;
  text-decoration: none;
  font-size: 0.92rem;
  padding: 6px 11px;
  border-radius: 9px;
  transition: background .15s, color .15s, box-shadow .15s;
}
header nav a:hover { background: rgba(255, 255, 255, 0.55); }
header nav a.active {
  background: #ffffff;
  color: #2f4a68;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(80, 105, 150, 0.22);
}
header .spacer { flex: 1; }
header .user { font-size: 0.9rem; color: #45506d; font-weight: 600; }

main { max-width: 980px; margin: 24px auto; padding: 0 18px; }

/* ===== カード ===== */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 22px;
  margin-bottom: 20px;
  box-shadow: 0 6px 20px rgba(120, 140, 180, 0.09);
}
.card h2 {
  font-size: 1.12rem;
  margin: 2px 0 16px;
  padding: 2px 0 2px 13px;
  border-left: 6px solid var(--primary-deep);
  border-radius: 2px;
  color: #35506e;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.card h3 {
  font-size: 1rem;
  color: #46586f;
  margin: 20px 0 8px;
  padding-bottom: 5px;
  border-bottom: 2px dashed #dbe3ee;
  font-weight: 700;
}

/* ===== フォーム ===== */
label { display: block; margin: 10px 0 4px; font-size: 0.86rem; font-weight: 700; color: var(--ink-soft); }
input, select {
  padding: 8px 10px;
  border: 1px solid #d4dce8;
  border-radius: 9px;
  font-size: 0.95rem;
  background: #fcfdff;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--primary-deep);
  box-shadow: 0 0 0 3px var(--focus);
}
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.row > div { flex: 1; min-width: 120px; }
.row input, .row select { width: 100%; }

/* ===== IME制御 ===== */
/* バーコードは半角固定(IME OFF)。備考等の自由入力欄はIME ON(日本語) */
.barcode-input { ime-mode: disabled; }
.ime-on, textarea, input[placeholder="任意"] { ime-mode: active; }

/* ===== バーコード読取欄(目立たせる) ===== */
.barcode-input {
  font-family: "Consolas", "SFMono-Regular", "Courier New", monospace;
  font-size: 1.1rem;
  letter-spacing: 0.07em;
  padding: 12px 14px 12px 40px;
  border: 2px solid var(--primary-deep);
  border-radius: 11px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23889ab0' stroke-width='2'><rect x='3' y='6' width='2' height='12'/><rect x='7' y='6' width='1' height='12'/><rect x='10' y='6' width='2' height='12'/><rect x='14' y='6' width='1' height='12'/><rect x='17' y='6' width='2' height='12'/><rect x='21' y='6' width='1' height='12'/></svg>") 12px center / 20px no-repeat,
    #f1f8ff;
  box-shadow: inset 0 1px 3px rgba(94, 151, 193, 0.12);
}
.barcode-input::placeholder { color: #9bb3c9; font-family: "Segoe UI", "Meiryo", sans-serif; letter-spacing: normal; }
.barcode-input:focus {
  border-color: var(--primary-hov);
  background-color: #eaf4ff;
  box-shadow: 0 0 0 4px var(--focus);
}
label.barcode-label { color: #35506e; font-weight: 800; }
label.barcode-label::before { content: "📷 "; }

/* ===== ボタン ===== */
button {
  padding: 8px 18px;
  border: none;
  border-radius: 10px;
  background: var(--primary-deep);
  color: #fff;
  cursor: pointer;
  font-size: 0.93rem;
  font-weight: 700;
  box-shadow: 0 2px 7px rgba(94, 151, 193, 0.38);
  transition: background .15s, box-shadow .15s, transform .04s;
}
button:hover { background: var(--primary-hov); }
button:active { transform: translateY(1px); }
button.secondary { background: #c0cbdb; color: #3a4757; box-shadow: none; }
button.secondary:hover { background: #adbacd; }
button.danger { background: #e2848c; box-shadow: 0 2px 7px rgba(226, 132, 140, 0.42); }
button.danger:hover { background: #d5717a; }

/* ===== テーブル ===== */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
th, td {
  border-bottom: 1px solid var(--line);
  padding: 8px 10px;
  text-align: left;
  font-size: 0.9rem;
}
th { background: var(--th-bg); color: #3f566f; font-weight: 700; }
tbody tr:nth-child(even) { background: #f7fafd; }
tbody tr:hover { background: #eef5fc; }
tr:last-child td { border-bottom: none; }
td a { color: var(--primary-deep); font-weight: 600; }

/* ===== メッセージ ===== */
.msg { min-height: 1.3em; font-size: 0.9rem; margin-top: 8px; font-weight: 600; }
.msg.error { color: #c85a62; }
.msg.ok { color: #3d9c69; }

/* ===== ステータスピル ===== */
.pill {
  display: inline-block;
  padding: 2px 11px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.pill.unordered { background: #fbe6bf; color: #8a6320; }
.pill.ordered   { background: #c6ddf4; color: #2f5f88; }
.pill.received  { background: #bfe6cf; color: #2c7a4f; }
.pill.canceled  { background: #e3e6ec; color: #6b7280; }