/* ==========================================================
   安川タクシー 共通スタイル（Mockup 準拠・手書き／前処理器なし）
   Mockup（taxi_payroll_system_55_42.html）のデザイントークン・
   サイドバー＋トップバー構成・コンポーネント様式を踏襲。
   既存クラス名（page_hdr / t_list / btn_primary / badge bg_ok 等）は
   そのまま活かし、見た目だけ Mockup に合わせて再定義する。
   ========================================================== */

:root{
	--bg:#f5f5f3; --surface:#fff; --panel:#fff;
	--border:#e0ddd8; --border-dk:#c8c5be;
	--text:#1a1a18; --muted:#6b6963; --hint:#9e9b95;
	--accent:#1a5fb4; --accent-bg:#e8f0fb;
	--primary:#1a5fb4; --primary-dk:#1550a0;     /* 旧名互換 */
	--success:#2d7d46; --success-bg:#e8f5ee;
	--warning:#8a5c00; --warning-bg:#fef3da;
	--danger:#c0392b;  --danger-bg:#fde8e6;
	--sw:220px; --hh:52px; --r:6px;   /* Mockup 準拠：サイドバー220px・ヘッダ52px・角丸6px */
	--font:'Hiragino Kaku Gothic ProN','Meiryo','Yu Gothic',sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{ font-family:var(--font); background:var(--bg); color:var(--text); font-size:13px; line-height:1.5; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:none; }

/* ===== レイアウト（サイドバー＋トップバー） ===== */
.layout{ display:flex; height:100vh; overflow:hidden; }   /* 画面高にロック（本文側でスクロール） */
/* サイドバー：ロゴ＋現在の事業所を上固定、フッターを下固定、中央ナビのみスクロール */
.sidebar{ width:var(--sw); background:var(--surface); border-right:1px solid var(--border);
	display:flex; flex-direction:column; position:fixed; top:0; bottom:0; left:0; z-index:100; overflow:hidden; }
.sidebar .logo,
.sidebar .osw{ flex-shrink:0; }                  /* 上ブロックは固定（縮まない） */
.sidebar .nav-scroll{ flex:1; min-height:0; overflow-y:auto; }   /* 中央のみスクロール */
.sidebar .sidebar-foot{ flex-shrink:0; }         /* 下ブロックは固定 */
.main{ margin-left:var(--sw); flex:1; min-width:0; height:100vh; display:flex; flex-direction:column; }
.topbar{ height:var(--hh); flex:0 0 auto; background:var(--surface); border-bottom:1px solid var(--border);
	display:flex; align-items:center; padding:0 20px; gap:16px; position:sticky; top:0; z-index:50; }
/* 本文：画面の残り高さに収め、必要時のみ本文側でスクロール（ページが画面高を超えない） */
.content{ flex:1 1 auto; min-height:0; padding:24px; min-width:0; display:flex; flex-direction:column; overflow:auto; }
.content > *{ flex:0 0 auto; }                              /* ヘッダ・ツールバー等は自然高さで固定 */
.content > .t_wrap{ flex:0 1 auto; min-height:0; }          /* 一覧本体だけが残り高さに収まり内部スクロール */

.logo{ padding:16px 20px; border-bottom:1px solid var(--border); }
.logo h1{ font-size:14px; font-weight:600; }
.logo span{ font-size:11px; color:var(--muted); }

/* 現在の事業所セレクタ（Mockup .osw 準拠） */
.osw{ padding:12px 16px; border-bottom:1px solid var(--border); background:var(--accent-bg); }
.osw-label{ font-size:10px; font-weight:600; color:var(--accent); letter-spacing:.06em; margin-bottom:5px; display:flex; align-items:center; gap:5px; }
.osw-sel{ width:100%; border:1px solid var(--accent); border-radius:var(--r); padding:7px 28px 7px 10px;
	font-size:13px; font-weight:600; font-family:var(--font); color:var(--text); height:auto; min-width:0;
	background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231a73c7' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat right 9px center;
	outline:none; cursor:pointer; appearance:none; }

.nav-sec{ padding:14px 20px 4px; font-size:10px; font-weight:600; color:var(--hint); letter-spacing:.08em; }
.nav-item{ display:flex; align-items:center; gap:10px; padding:8px 20px; color:var(--muted);
	cursor:pointer; font-size:13px; transition:all .15s; }
.nav-item:hover{ background:var(--bg); color:var(--text); text-decoration:none; }
.nav-item.active{ background:var(--accent-bg); color:var(--accent); }
.nav-item i{ width:16px; font-size:14px; text-align:center; }
.nav-item.disabled{ color:var(--hint); cursor:default; }
.nav-item.disabled:hover{ background:none; color:var(--hint); }
.nav-item.disabled em{ margin-left:auto; font-style:normal; font-size:9px; background:var(--bg); color:var(--hint); padding:1px 6px; border-radius:10px; }
.sidebar-foot{ padding:12px 20px; border-top:1px solid var(--border); font-size:11px; color:var(--hint); }

/* トップバー右側 */
.breadcrumb{ font-size:13px; color:var(--muted); display:flex; align-items:center; gap:6px; }
.breadcrumb .sep{ color:var(--hint); }
.breadcrumb .cur{ color:var(--text); }
.hdr-right{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.hdr-div{ width:1px; height:20px; background:var(--border); margin:0 4px; }
.topbar-user{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); }
.topbar-user .uname{ color:var(--text); }
.av{ width:28px; height:28px; border-radius:50%; background:var(--accent-bg); color:var(--accent);
	display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; flex-shrink:0; }
.btn-icon{ padding:6px; border:1px solid var(--border); border-radius:var(--r); color:var(--muted);
	cursor:pointer; display:inline-flex; align-items:center; background:var(--surface); }
.btn-icon:hover{ background:var(--bg); }
.btn-icon.notif{ position:relative; }
.notif-dot{ position:absolute; top:2px; right:2px; width:8px; height:8px; background:var(--danger); border-radius:50%; display:block; }
.topbar-user{ cursor:pointer; }
.topbar-user:hover .uname{ color:var(--accent); }

/* ログイン等の素枠 */
.bare_wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center;
	background:linear-gradient(160deg,#eef2f7,#f5f5f3); padding:24px; }

/* ===== ページ見出し（page_hdr → Mockup .ph） ===== */
.page_hdr{ display:flex; align-items:center; gap:14px; margin-bottom:20px; flex-wrap:wrap; }
.page_hdr h1{ font-size:17px; font-weight:600; margin:0; }
.page_hdr .sub{ font-size:12px; color:var(--muted); }
.page_hdr .sp{ flex:1; }
.page_hdr .ic{ font-weight:700; }

/* ===== カード ===== */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:20px; margin-bottom:16px; }
.card_title,.card-title{ font-size:14px; font-weight:600; margin-bottom:16px; padding-bottom:12px;
	border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; }

/* ===== 検索フォーム／ツールバー ===== */
.search_form{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;
	background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:12px 14px; margin-bottom:16px; }
.search_form .fg{ display:flex; flex-direction:column; gap:4px; }
.search_form label{ font-size:11px; font-weight:600; color:var(--muted); }
.form_sel,.search_form input,.search_form select,
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=time],select{
	height:34px; padding:0 10px; border:1px solid var(--border); border-radius:var(--r);
	font-family:var(--font); font-size:13px; color:var(--text); background:var(--surface); outline:none; min-width:150px; }
.search_form input:focus,.search_form select:focus,.form_sel:focus,
input:focus,select:focus,textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 2px rgba(26,95,180,.12); }
textarea{ padding:8px 10px; min-height:60px; resize:vertical; width:100%; border:1px solid var(--border); border-radius:var(--r); font-family:var(--font); font-size:13px; }

/* ===== ボタン ===== */
.btn{ display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px;
	border:1px solid var(--border-dk); border-radius:var(--r); background:var(--surface); color:var(--text);
	font-family:var(--font); font-size:13px; cursor:pointer; transition:all .15s; }
.btn:hover{ background:var(--bg); text-decoration:none; }
.btn_primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn_primary:hover{ background:var(--primary-dk); }
.btn_success{ background:var(--success); border-color:var(--success); color:#fff; }
.btn_danger{ background:var(--danger); border-color:var(--danger); color:#fff; }
.btn_sm{ height:28px; padding:0 10px; font-size:12px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

/* ===== テーブル（編程規範 §七：tbody→thead→tfoot 順／全 td／sticky） ===== */
.t_wrap{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r); overflow:auto;
	max-height:100%; }   /* 高さは .content のflexで律速。本体のみスクロール → 見出し/件数+ページャを画面内に保持 */
.t_list{ width:100%; border-collapse:collapse; font-size:13px; min-width:760px; }
.t_list td{ padding:10px 14px; border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; vertical-align:middle; }
.t_list thead td{ position:sticky; top:0; background:var(--bg); color:var(--muted); font-weight:600; font-size:12px; border-bottom:1px solid var(--border); }
.t_list tbody tr:hover td{ background:var(--bg); }
.t_list tbody tr:last-child td{ border-bottom:none; }
.t_list .num{ text-align:right; font-variant-numeric:tabular-nums; }
.t_list .center{ text-align:center; }
.t_list .sub2,.sub2{ font-size:11px; color:var(--muted); }
.t_list tr.clickable{ cursor:pointer; }
.t_list tr.clickable:hover td{ background:var(--bg); }
/* 乗務後登録済（「乗務後点呼登録」ボタンと同じ箱形・成功色） */
.btn.rc_done{ color:var(--success); border-color:var(--success-bg); background:var(--success-bg); white-space:nowrap; }
.btn.rc_done:hover{ background:var(--success-bg); }
/* 点呼種別ピル（乗務前=accent / 乗務後=success）。タイトル左の標示 */
.rc_pill{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500; padding:3px 10px; border-radius:var(--r); }
.rc_pill.pre{ color:var(--accent); background:var(--accent-bg); }
.rc_pill.post{ color:var(--success); background:var(--success-bg); }
.t_list td.exp_warn{ color:var(--danger); font-weight:600; }
.t_list tr.row_disabled,.t_list tr.row_retired{ opacity:.5; }
.t_list tr.row_pending_post{ opacity:.55; background:repeating-linear-gradient(45deg,#faf9f7,#faf9f7 8px,#f0eee9 8px,#f0eee9 16px); cursor:pointer; }
.t_list tr.row_pending_post:hover td{ background:transparent; }
.t_list tr.row_focus{ outline:2px solid var(--accent); outline-offset:-2px; }

/* ===== バッジ（Mockup .badge 準拠・既存 bg_* を再マップ） ===== */
.badge{ display:inline-block; padding:2px 8px; border-radius:20px; font-size:11px; font-weight:600; }
.bg_ok{ background:var(--success-bg); color:var(--success); }
.bg_warn{ background:var(--warning-bg); color:var(--warning); }
.bg_danger{ background:var(--danger-bg); color:var(--danger); }
.bg_remote{ background:var(--accent-bg); color:var(--accent); }
.bg_role{ background:var(--bg); color:var(--muted); border:1px solid var(--border); }
/* Mockup バッジ別名（b-*）。一覧の状態色を Mockup と一致させる */
.badge.b-success{ background:var(--success-bg); color:var(--success); }
.badge.b-warning{ background:var(--warning-bg); color:var(--warning); }
.badge.b-info{ background:var(--accent-bg); color:var(--accent); }
.badge.b-danger{ background:var(--danger-bg); color:var(--danger); }
.badge.b-default{ background:var(--bg); color:var(--muted); border:1px solid var(--border); }
/* 必須項目マーク（全登録画面共通：Mock の暗赤 #c0392b＝--danger） */
.req{ color:var(--danger); font-weight:normal; }

/* ===== Mockup 共通コンポーネント（全画面共用・com.css に集約） ===== */
/* ページ見出し（Mockup .ph）。サブタイトル無しの素の見出し */
.ph{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px; }
.ph .ptitle{ font-size:17px; font-weight:600; }
.ph .psub{ font-size:12px; color:var(--muted); margin-top:2px; }
.ph .ph_actions{ display:flex; gap:8px; align-items:center; }
.mock_flag{ display:inline-flex; align-items:center; gap:6px; background:var(--warning-bg); color:var(--warning);
	border:1px solid #e6d39a; border-radius:20px; padding:2px 10px; font-size:11px; font-weight:600; margin-left:8px; }
/* ツールバー＋検索ボックス（Mockup .toolbar / .search-box / select.fsel） */
.toolbar{ display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
/* 検索ボックス・セレクト：ボタン(.btn=34px)と等高、枠線は濃いめ(border-dk) */
.search-box{ display:flex; align-items:center; gap:8px; height:34px; background:var(--surface); border:1px solid var(--border-dk);
	border-radius:var(--r); padding:0 12px; flex:1; max-width:320px; box-sizing:border-box; }
.search-box input{ border:none; background:transparent; font-family:var(--font); font-size:13px; color:var(--text); outline:none; width:100%; height:100%; min-width:0; padding:0; }
.search-box i{ color:var(--hint); font-size:13px; }
select.fsel{ height:34px; box-sizing:border-box; background:var(--surface); border:1px solid var(--border-dk); border-radius:var(--r); padding:0 28px 0 10px;
	font-family:var(--font); font-size:13px; color:var(--text); outline:none; appearance:none; min-width:0;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6963' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat:no-repeat; background-position:right 8px center; cursor:pointer; }
/* タブ（Mockup .tabs / .tab） */
.tabs{ display:flex; border-bottom:1px solid var(--border); margin-bottom:16px; flex-wrap:wrap; }
.tab{ padding:10px 16px; font-size:13px; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; text-decoration:none; }
.tab.active{ color:var(--accent); border-bottom-color:var(--accent); font-weight:500; }
.tab:hover{ color:var(--text); text-decoration:none; }
/* コンパクト格子テーブル（勤怠カレンダー等）。border-collapse で外枠を1pxに統一 */
.ct{ width:100%; border-collapse:collapse; font-size:12px; border:1px solid var(--border); }
.ct td{ padding:5px 8px; border:1px solid var(--border); white-space:nowrap; text-align:center; }
.ct thead td{ background:var(--bg); font-weight:600; font-size:11px; color:var(--muted); }
.ct .rh{ background:var(--bg); font-weight:600; text-align:left; }
.ct .sun{ color:var(--danger); }
.ct .sat{ color:var(--accent); }

/* ===== 件数表示＋ページャ（全一覧共通：pager_bar / tfoot 内 pager_cell） ===== */
.pager_bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:14px 2px; flex-wrap:wrap; }
.pager_cnt{ font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.pager_left{ display:flex; align-items:center; gap:10px; }
.per_form{ display:flex; align-items:center; gap:6px; }
.per_lbl{ font-size:12px; color:var(--muted); white-space:nowrap; }
select.per_sel{ height:28px; box-sizing:border-box; background:var(--surface); border:1px solid var(--border-dk); border-radius:var(--r);
	padding:0 24px 0 8px; font-family:var(--font); font-size:12px; color:var(--text); outline:none; appearance:none; cursor:pointer;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6963' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat:no-repeat; background-position:right 7px center; }
/* tfoot 内に置く場合（カード内フッター）。ホバー背景や下線を打ち消す */
.t_list tfoot td.pager_cell{ background:var(--surface); border-top:1px solid var(--border); border-bottom:none; padding:10px 14px;
	position:sticky; bottom:0; z-index:3; }   /* スクロール時も件数+ページャを下端に固定 */
.t_list tfoot tr:hover td.pager_cell{ background:var(--surface); }
.pager_cell .pager_bar{ margin:0; }

/* ===== ページャ（Mockup .pb 準拠） ===== */
.pager{ display:flex; gap:4px; justify-content:flex-end; margin:0; flex-wrap:wrap; }
.pager a,.pager span{ display:inline-flex; align-items:center; justify-content:center;
	min-width:28px; padding:4px 10px; border:1px solid var(--border); border-radius:var(--r);
	background:var(--surface); font-size:12px; color:var(--muted); text-decoration:none; }
.pager a:hover{ background:var(--bg); text-decoration:none; }
.pager .cur{ background:var(--accent); color:#fff; border-color:var(--accent); }
.pager .gap{ border:none; background:none; min-width:auto; padding:4px 2px; }

/* ===== トースト ===== */
.toast{ position:fixed; right:24px; bottom:24px; background:var(--text); color:#fff; padding:10px 18px;
	border-radius:var(--r); font-size:13px; opacity:0; pointer-events:none; transition:opacity .25s; z-index:999; }
.toast.show{ opacity:.97; }

/* ===== Modal（temp1.inc / 各画面内モーダル） ===== */
.modal_overlay{ position:fixed; inset:0; background:rgba(0,0,0,.4); display:none; z-index:200; }
.modal_overlay.show{ display:block; }
.pop_frame{ position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
	width:min(560px,92vw); max-height:88vh; overflow:auto; background:var(--surface); border-radius:8px; z-index:201; display:none; }
.pop_frame.show{ display:block; }
.pop_header{ display:flex; align-items:flex-start; justify-content:space-between; padding:16px 18px 12px; border-bottom:1px solid var(--border); }
.pop_header h3{ margin:0; font-size:15px; font-weight:600; }
.pop_header .sub{ color:var(--muted); font-size:12px; }
.modal_close{ cursor:pointer; font-size:16px; color:var(--muted); line-height:1; padding:2px 6px; }
.pop_in{ padding:16px 18px; }
.popbottom{ padding:12px 18px; border-top:1px solid var(--border); display:flex; gap:8px; justify-content:flex-end; }

/* ===== 顔認証モーダル ===== */
.face_video_wrap{ position:relative; width:100%; max-width:360px; margin:0 auto 12px; aspect-ratio:4/3; background:#000; border-radius:8px; overflow:hidden; }
.face_video_wrap video,.face_video_wrap canvas{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.face_guide{ position:absolute; inset:14% 22%; border:2px dashed rgba(255,255,255,.7); border-radius:50%; pointer-events:none; }
.face_status{ text-align:center; font-size:13px; color:var(--muted); margin-bottom:10px; }
.face_result{ text-align:center; padding:18px 6px; }
.face_result .ic{ font-size:40px; }
.face_result .ti{ font-size:18px; font-weight:700; margin-top:6px; }
.face_result .sb{ font-size:13px; color:var(--muted); margin-top:4px; }

/* ===== レスポンシブ（狭幅はサイドバーを畳む） ===== */
@media (max-width:880px){
	.sidebar{ width:64px; }
	.sidebar .logo span,.nav-sec,.nav-item span,.nav-item em,.sidebar-foot,.nav-item:not(.disabled){ }
	.sidebar .logo h1{ font-size:12px; }
	.nav-item{ justify-content:center; padding:10px 0; gap:0; }
	.nav-item em,.nav-sec,.osw-label{ display:none; }
	.osw{ padding:8px 6px; }
	.osw-sel{ font-size:0; padding:7px 4px; }
	.main{ margin-left:64px; }
	.search_form .fg{ flex:1 1 46%; }
	.form_sel,.search_form input,.search_form select{ min-width:0; width:100%; }
}

/* 検索ツールバーの日付範囲（運行日報/未収/点呼で共有。ページ個別CSSで上書き可） */
.dl_range{ display:inline-flex; align-items:center; gap:6px; }
.dl_range input[type=date]{ height:34px; box-sizing:border-box; padding:6px 8px; border:1px solid var(--border-dk); border-radius:var(--r); font-size:13px; background:var(--surface); font-family:var(--font); color:var(--text); }
.dl_range .dl_sep{ color:var(--muted); }
.toolbar .dl_btn{ height:34px; box-sizing:border-box; display:inline-flex; align-items:center; gap:6px; }

/* 勤務区分の略号ピル（日/夜/隔）。日勤=青 / 夜勤=紫 / 隔日=シアン */
.spill{ display:inline-block; min-width:20px; text-align:center; padding:1px 8px; border-radius:20px; font-size:11px; font-weight:700; line-height:1.6; vertical-align:middle; }
.spill.sp_day{ background:#e7edfb; color:#3b5bd4; }
.spill.sp_night{ background:#f3e8fb; color:#8b3fd6; }
.spill.sp_alt{ background:#daf3f4; color:#0e9aa8; }
.spill.sp_17{ background:#fdf0db; color:#c47a1a; }

/* ===== アプリ配布QRポップアップ ===== */
.apk-qr-ov{ display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.45);
	align-items:center; justify-content:center; padding:16px; }
.apk-qr-box{ background:#fff; border-radius:14px; box-shadow:0 10px 40px rgba(0,0,0,.25);
	width:300px; max-width:100%; padding:18px 20px 20px; text-align:center; }
.apk-qr-head{ display:flex; align-items:center; justify-content:space-between; font-weight:700; font-size:15px; margin-bottom:14px; }
.apk-qr-x{ cursor:pointer; font-size:22px; line-height:1; color:var(--muted); }
.apk-qr-x:hover{ color:var(--text); }
.apk-qr-img{ display:flex; justify-content:center; padding:8px; background:#fff; }
.apk-qr-img img, .apk-qr-img canvas{ display:block; }
.apk-qr-note{ font-size:12px; color:var(--muted); margin:12px 0 14px; }
.apk-qr-dl{ display:inline-flex; align-items:center; gap:6px; }