/*
  管理画面 共通スタイル
  トーン（左メニュー紺・白い作業エリア・配色）は docs/admin_mockup.html を踏襲。

  モックは Google Fonts を @import していたが、管理画面が外部通信に依存し
  読めない環境で崩れるため、システムフォント優先のスタックに置き換えている。
*/

:root{
  --bg:#eef1f4;
  --panel:#ffffff;
  --ink:#1b2733;
  --sub:#5f6b78;
  --line:#dde3ea;
  --line-strong:#c6cfd9;
  --navy:#1f3a5f;
  --navy-deep:#16304f;
  --accent:#2e6da4;
  --ok:#1a7a46;
  --ok-bg:#e6f4ec;
  --danger:#b03a2e;
  --danger-bg:#fbeaea;
  --danger-deep:#8f2e24;
  --void:#9aa5b1;
}

*{margin:0;padding:0;box-sizing:border-box}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  background:var(--bg);color:var(--ink);
  font-size:14px;line-height:1.6;
}

/* ===== ログイン前：中央パネル ===== */
.login-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
}
.login-panel{
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:32px 36px;width:320px;box-shadow:0 8px 30px rgba(27,39,51,.08);
}
.login-panel .brand{text-align:center;margin-bottom:22px}
.login-panel .brand strong{display:block;font-size:19px;color:var(--navy-deep)}
.login-panel .brand small{display:block;font-size:11px;color:var(--sub);letter-spacing:.08em;margin-top:4px}
.login-panel .fld{margin-bottom:14px;display:flex;flex-direction:column;gap:4px}
.login-panel label{font-size:12px;color:var(--sub)}
.login-panel input{
  font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--line-strong);
  border-radius:6px;background:#fff;color:var(--ink);
}
.login-panel input:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.login-panel .btn-primary{width:100%;margin-top:6px}

/* ===== ログイン後：左メニュー＋作業エリア ===== */
.app{display:grid;grid-template-columns:220px 1fr;min-height:100vh}

.side{background:var(--navy);color:#c9d6e5;display:flex;flex-direction:column}
.brand{
  padding:20px 20px 16px;font-size:17px;font-weight:700;color:#fff;
  letter-spacing:.04em;border-bottom:1px solid rgba(255,255,255,.12);
}
.brand small{display:block;font-size:11px;font-weight:400;color:#8aa0bb;margin-top:3px;letter-spacing:.08em}

.nav{padding:10px 0;flex:1}
.nav .grp{padding:14px 20px 6px;font-size:11px;color:#7d93ad;letter-spacing:.06em}
.nav-item{
  display:block;padding:10px 20px;font-size:13.5px;border-left:3px solid transparent;
  text-decoration:none;transition:.12s;
}
a.nav-item,a.nav-item:visited{color:#c9d6e5}
a.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
a.nav-item.on{background:var(--navy-deep);color:#fff;border-left-color:var(--accent);font-weight:500}
.nav-item.disabled{color:#7d93ad;cursor:default}

.who{padding:14px 20px;border-top:1px solid rgba(255,255,255,.12);font-size:12px;color:#a9bcd2}
.who b{color:#fff;font-weight:500;display:block;font-size:13px}
.lo-form{margin-top:8px}
.lo{
  display:inline-block;background:transparent;color:#c9d6e5;text-decoration:none;
  border:1px solid rgba(255,255,255,.25);border-radius:5px;padding:3px 12px;font-size:12px;
  font:inherit;cursor:pointer;
}
.lo:hover{background:rgba(255,255,255,.08);color:#fff}

.main{padding:24px 28px;min-width:0}
.head{margin-bottom:18px}
.head h1{font-size:20px;font-weight:700;letter-spacing:.02em}
.head .sub{color:var(--sub);font-size:12.5px;margin-top:2px}

.btn{
  font:inherit;font-size:13px;padding:7px 16px;border-radius:6px;border:1px solid transparent;
  cursor:pointer;font-weight:500;
}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-deep)}

.msg{padding:10px 14px;border-radius:6px;margin-bottom:16px;font-size:13px}
.msg-error{background:var(--danger-bg);color:var(--danger)}
.msg-success{background:var(--ok-bg);color:var(--ok)}

/* 再登録の開放中の警告帯（flashの.msgとは別物：flashは1回で消え、帯は開放中ずっと
   出続ける）。色は黄系（赤=エラー・緑=成功・青=強調とは意味が違うため）。
   .review-flag-* と同じく:rootの変数を使わず、リテラルの3色（地色・文字色・枠線）を持つ */
.notice-open{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:10px 14px;border-radius:6px;margin-bottom:16px;font-size:13px;background:#fdf6dc;color:#6b5200;border:1px solid #e0cd8a}
.notice-open a{white-space:nowrap;font-weight:600;color:inherit;text-decoration:underline}

/* /admin/devices の再登録モードの状態表示（平常状態の案内。色は持たせない：
   .notice-open の黄は「開放中の警告」の意味なので流用しない） */
.mode-state{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:4px;font-size:13px}
.mode-state a{white-space:nowrap;color:var(--accent);text-decoration:none}
.mode-state a:hover{text-decoration:underline}
.mode-note{margin-bottom:16px}

/* ===== 一覧（カード＋テーブル） ===== */
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.card-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 16px;border-bottom:1px solid var(--line);
}
.card-top .cnt{font-size:12.5px;color:var(--sub)}
.card-top .acts{display:flex;gap:8px}

table{width:100%;border-collapse:collapse}
th,td{padding:10px 16px;text-align:left;font-size:13px}
th{background:#f7f9fb;color:var(--sub);font-weight:500;font-size:11.5px;border-bottom:1px solid var(--line)}
td{border-bottom:1px solid #eef2f6}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:#f9fbfc}

.badge{display:inline-block;font-size:11.5px;font-weight:500;padding:2px 10px;border-radius:4px;line-height:1.5;margin-left:6px}
.b-active{background:var(--ok-bg);color:var(--ok)}
.b-retired{background:#eef1f4;color:var(--void)}
/* 区分バッジ：出社=青、退社=緑。打刻元：カード=グレー、手動=オレンジ（第3部①共通事項） */
.b-in{background:#e5f0fa;color:#1f5f96}
.b-out{background:var(--ok-bg);color:var(--ok)}
.b-nfc{background:#eef1f4;color:var(--sub)}
.b-manual{background:#fdf1e3;color:#b5651d}

/* 要確認打刻の印専用（badgeの流用をやめ、濃い背景+はっきりした文字色にする。
   色は「問題の重さ」＝急ぎの度合いを表す。漏れ2種は同じ赤系、二度押しは控えめ
   （要確認打刻 4a §2-1・§2-7）*/
.review-flag{display:inline-block;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:4px;line-height:1.5}
.review-flag-missing{background:#fbeae8;color:#8f2b20;border:1px solid #d3a6a0}
.review-flag-duplicate{background:#f1f3f5;color:#4b5563;border:1px solid #d3d8dd}

/* 漏れ2種の中の「足りない区分」タグ（4b②実装）。区分列の.b-in/.b-outと
   同じ色を使うが、クラスは別にする：.badgeはmargin-leftを持ち、外側の
   .review-flag-missingの淡い赤地に入れ子にすると4aで見送った「badgeの
   流用」と同じ形になるため（127行目のコメント参照）。文字色は区分列と
   同じ値をそのまま使う（新しい色は持ち込まない）。 */
.review-flag-type{display:inline-block;font-size:11px;font-weight:600;padding:1px 6px;border-radius:3px;line-height:1.4;margin-right:4px;vertical-align:1px}
.review-flag-type-in{background:#e5f0fa;color:#1f5f96}
.review-flag-type-out{background:var(--ok-bg);color:var(--ok)}

.rowact a,.rowact button.linklike{color:var(--accent);text-decoration:none;font-size:12.5px;margin-right:12px}
.rowact a:hover,.rowact button.linklike:hover{text-decoration:underline}
.rowact a.danger,.rowact button.linklike.danger{color:var(--danger)}
.rowact form{display:inline}
.rowact button.linklike{background:none;border:none;padding:0;font:inherit;cursor:pointer}

/* ===== ボタン（追加分） ===== */
.btn-ghost{background:#fff;border-color:var(--line-strong);color:var(--ink)}
.btn-ghost:hover{background:#f5f7f9}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:var(--danger-deep)}
a.btn{display:inline-block}

/* ===== フォーム（一覧・確認以外の全画面が使う） ===== */
.form{max-width:480px}
.form .fld{margin-bottom:14px;display:flex;flex-direction:column;gap:4px}
.form label{font-size:12px;color:var(--sub)}
.form .req{color:var(--danger);font-size:11px;margin-left:6px}
.form input[type=text],.form input[type=password],.form input[type=number]{
  font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--line-strong);
  border-radius:6px;background:#fff;color:var(--ink);
}
.form input[type=text]:focus,.form input[type=password]:focus,.form input[type=number]:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.fld-error{color:var(--danger);font-size:12px;margin-top:2px}
.form-card{padding:20px 24px}
.form-actions{display:flex;gap:10px;margin-top:18px}
.gen-actions{display:flex;gap:10px;margin-top:6px;align-items:center;flex-wrap:wrap}
.gen-value{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;word-break:break-all;user-select:all}

/* ===== 確認画面 ===== */
.confirm-box{padding:20px 24px;max-width:480px}
.confirm-message{font-size:14px;margin-bottom:18px;line-height:1.7}
.hint{font-size:11.5px;color:var(--sub)}
.error-list{margin:8px 0 16px;padding-left:20px;font-size:13px}
.error-list li{margin-bottom:4px;color:var(--danger)}
.name-list{margin:8px 0 16px;padding-left:20px;font-size:13px}
.name-list li{margin-bottom:4px;color:var(--ink)}

/* ===== 検索バー（一覧画面共通） ===== */
.filters{
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:14px 16px;margin-bottom:16px;display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;
}
.filters .fld{display:flex;flex-direction:column;gap:4px;margin-bottom:0}
.filters label{font-size:11.5px;color:var(--sub)}
.filters input,.filters select{
  font:inherit;font-size:13px;padding:6px 9px;border:1px solid var(--line-strong);
  border-radius:6px;background:#fff;color:var(--ink);min-width:130px;
}
.filters input:focus,.filters select:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.spacer{flex:1}

/* チェックボックス1つだけのフィルタ項目：上にラベルを置かず、
   チェックボックスとテキストを1行で隣接させる。他の項目と同じく
   .filters の align-items:flex-end で検索ボタンと下端が揃う */
.filters .check-label{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;color:var(--ink);white-space:nowrap;
}
.filters .check-label input[type=checkbox]{
  width:auto;min-width:0;padding:0;margin:0;
}

/* 一覧ヘッダー右側のCSV出力（検索フォームとは別のフォーム。Enterキーの
   送信先を検索欄だけにするため分離。現在の検索条件はhiddenで引き継ぐ） */
.card-top .csv-form{display:flex;align-items:center;gap:8px}
.card-top .csv-form select{
  font:inherit;font-size:12.5px;padding:5px 8px;border:1px solid var(--line-strong);
  border-radius:6px;background:#fff;color:var(--ink);
}

/* select（登録・編集フォームの営業所・雇用区分プルダウン） */
.form select{
  font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--line-strong);
  border-radius:6px;background:#fff;color:var(--ink);
}
.form select:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.form .fixed-value{font-size:14px;color:var(--sub);padding:8px 0}
.form .hint{font-size:11.5px;color:var(--sub);margin-top:2px}
.form textarea{
  font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--line-strong);
  border-radius:6px;background:#fff;color:var(--ink);resize:vertical;
}
.form textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.form input[type=date],.form input[type=datetime-local]{
  font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--line-strong);
  border-radius:6px;background:#fff;color:var(--ink);
}
.form input[type=date]:focus,.form input[type=datetime-local]:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}

/* 取消フォームの対象打刻表示（confirm.htmlは使わないため、フォーム内に直接置く） */
.detail-list{margin:0 0 18px;font-size:13px}
.detail-list dt{color:var(--sub);font-size:11.5px;margin-top:8px}
.detail-list dd{margin:0}

/* 退職者・無効な行を薄く表示 */
tr.dim{opacity:.62}
tr.dim .time{text-decoration:none}

/* ===== ページャ ===== */
.pager{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--sub)}
.pager .pages{display:flex;gap:4px}
.pager .pages a{padding:3px 9px;border:1px solid var(--line-strong);border-radius:5px;color:var(--ink);text-decoration:none}
.pager .pages a.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.address-source{text-align:center;margin-top:8px}