/* ENTRY HUB 管理画面。落ち着いた業務システム然としたスレート基調＋ティールのアクセント。 */
:root{
  --slate-950:#0f172a; --slate-900:#111827; --slate-800:#1f2937; --slate-700:#374151;
  --slate-600:#4b5563; --slate-500:#6b7280; --slate-400:#9ca3af; --slate-300:#d1d5db;
  --slate-200:#e5e7eb; --slate-100:#f1f5f9; --slate-50:#f8fafc;
  --teal-600:#0d9488; --teal-700:#0f766e; --teal-100:#ccfbf1;
  --danger-600:#dc2626; --danger-100:#fee2e2;
  --ok-600:#059669; --ok-100:#d1fae5;
  --bg:#f5f7fa; --panel:#ffffff; --text:var(--slate-800); --border:var(--slate-200);
  --radius:10px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220; --panel:#111a2b; --text:var(--slate-100); --border:#233047;
    --slate-50:#0b1220; --slate-100:#111a2b;
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"BIZ UDPGothic","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",-apple-system,
    BlinkMacSystemFont,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.6; font-size:14px;
}
a{color:var(--teal-700); text-decoration:none}
a:hover{text-decoration:underline}
.shell{min-height:100vh; display:flex; flex-direction:column}
.topbar{
  display:flex; align-items:center; gap:16px; padding:10px 20px; background:var(--slate-900); color:#fff;
  position:sticky; top:0; z-index:20;
}
.topbar .brand{font-weight:700; letter-spacing:.02em}
.tenant-switch select{padding:4px 8px; border-radius:6px; border:1px solid var(--slate-600)}
.account-bar{margin-left:auto; display:flex; align-items:center; gap:10px; font-size:13px}
.account-bar a, .account-bar .link-btn{color:#e2e8f0}
.account-bar .link-btn{background:none;border:none;cursor:pointer;padding:0;font:inherit;text-decoration:underline}
.role-chip{background:var(--teal-600); padding:2px 8px; border-radius:999px; font-size:12px}
.main{display:flex; flex:1; min-height:0}
.sidenav{
  width:190px; flex:none; background:var(--panel); border-right:1px solid var(--border);
  padding:14px 8px; display:flex; flex-direction:column; gap:2px;
}
.navlink{padding:8px 12px; border-radius:8px; color:var(--slate-700)}
.navlink:hover{background:var(--slate-100); text-decoration:none}
.navlink.active{background:var(--teal-100); color:var(--teal-700); font-weight:600}
@media (prefers-color-scheme: dark){.navlink{color:var(--slate-300)} .navlink.active{background:#0f2e2b}}
.content{flex:1; min-width:0; padding:20px 24px 60px}
.breadcrumb{font-size:12px; color:var(--slate-500); margin-bottom:12px}
.breadcrumb a{color:var(--slate-500)}
.breadcrumb .sep{margin:0 6px}
.flash{padding:10px 14px; border-radius:8px; margin-bottom:14px; font-size:13px}
.flash-ok{background:var(--ok-100); color:#065f46}
.flash-error{background:var(--danger-100); color:#7f1d1d}
.msg{padding:8px 0}
.msg.error{color:var(--danger-600)}
.panel{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; margin-bottom:16px}
.panel h2{margin:0 0 12px; font-size:15px}
.panel h3{margin:14px 0 6px; font-size:13px; color:var(--slate-600)}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:860px){.grid-2,.grid-3{grid-template-columns:1fr}}
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-bottom:16px}
.stat-tile{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px}
.stat-label{font-size:12px; color:var(--slate-500)}
.stat-value{font-size:22px; font-weight:700; margin-top:4px}
.data-table{width:100%; border-collapse:collapse; background:var(--panel); font-size:13px}
.data-table thead th{
  position:sticky; top:0; background:var(--slate-100); text-align:left; padding:8px 10px;
  border-bottom:1px solid var(--border); font-weight:600; color:var(--slate-600); white-space:nowrap;
}
@media (prefers-color-scheme: dark){.data-table thead th{background:#16223a}}
.data-table td{padding:8px 10px; border-bottom:1px solid var(--border); vertical-align:top}
.data-table tr:hover td{background:rgba(13,148,136,.05)}
.muted{color:var(--slate-500)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; word-break:break-all}
.mono.small{font-size:11px}
.chip{display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:600}
.chip-neutral{background:var(--slate-200); color:var(--slate-700)}
.chip-ok{background:var(--ok-100); color:#065f46}
.chip-error{background:var(--danger-100); color:#7f1d1d}
@media (prefers-color-scheme: dark){
  .chip-neutral{background:#233047; color:var(--slate-200)}
}
.toolbar{display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap}
.filter-form{display:flex; gap:8px; flex-wrap:wrap}
.filter-form input, .filter-form select{padding:6px 10px; border:1px solid var(--border); border-radius:6px; background:var(--panel); color:var(--text)}
.btn, button, input[type=submit]{
  display:inline-block; padding:7px 16px; border-radius:8px; border:1px solid var(--teal-600);
  background:var(--teal-600); color:#fff; font-size:13px; cursor:pointer;
}
.btn:hover, button:hover{background:var(--teal-700); text-decoration:none}
.btn-secondary{background:var(--panel); color:var(--teal-700)}
.btn-danger{background:var(--panel); color:var(--danger-600); border-color:var(--danger-600)}
.btn-danger:hover{background:var(--danger-100)}
form.inline-form, form.auth-form, form.job-form{display:flex; flex-direction:column; gap:10px; max-width:520px}
form.inline-form{flex-direction:row; align-items:end; flex-wrap:wrap; max-width:none}
label{display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--slate-600)}
input, select, textarea{
  padding:7px 10px; border:1px solid var(--border); border-radius:6px; font-size:13px;
  background:var(--panel); color:var(--text); font-family:inherit;
}
fieldset{border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; margin:0 0 14px}
legend{padding:0 6px; font-size:13px; font-weight:600; color:var(--slate-600)}
.job-form fieldset > label, .job-form fieldset > fieldset{margin-bottom:10px}
.timeline{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.timeline li{padding-left:10px; border-left:2px solid var(--teal-600); font-size:13px}
.app-detail .col{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:14px}
.health-card{display:flex; align-items:center; gap:10px; padding:6px 0}
.pagination{display:flex; gap:6px; margin-top:14px}
.pagination a{padding:4px 10px; border:1px solid var(--border); border-radius:6px}
.pagination a.active{background:var(--teal-600); color:#fff; border-color:var(--teal-600)}
.ellipsis{padding:4px 4px; color:var(--slate-400)}
dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:13px}
dt{color:var(--slate-500)}
dd{margin:0}
.actions{margin-top:14px; display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.media-panel{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:14px}
.media-panel h3{margin-top:0}
bar-label,.bar-label{font-size:11px; fill:var(--slate-600)}
.bar-rect{fill:var(--teal-600)}
.bar-value{font-size:11px; fill:var(--slate-600)}
/* 狭い画面（スマホ・小さいタブレット）：左メニューは本文に重ねず、上部の折りたたみメニューにする。
   admin.js が動くとき（html.js）は「☰ メニュー」で開閉、動かないときはメニューを上に並べて出す */
.nav-toggle{display:none}
@media (max-width:760px){
  .main{flex-direction:column}
  .sidenav{position:static; width:auto; flex-direction:row; flex-wrap:wrap; gap:4px; padding:8px 10px;
    border-right:none; border-bottom:1px solid var(--border)}
  .navlink{padding:6px 10px; background:var(--slate-100)}
  html.js .sidenav{display:none}
  html.js body.nav-open .sidenav{display:flex; flex-direction:column; flex-wrap:nowrap; gap:2px;
    max-height:calc(100vh - 56px); overflow:auto}
  html.js body.nav-open .navlink{padding:10px 12px}
  html.js body.nav-open .navlink:not(.active){background:none}
  html.js .nav-toggle{display:inline-flex; align-items:center; gap:4px; background:transparent;
    border:1px solid var(--slate-600); color:#fff; padding:4px 10px; font-size:13px}
  .topbar{flex-wrap:wrap; gap:8px 12px; padding:8px 12px}
  .account-bar{margin-left:0; flex-wrap:wrap}
  .account-bar .user-email{max-width:10em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .content{padding:12px 12px 70px}
  .page-head{gap:6px}
  form.inline-form{flex-direction:column; align-items:stretch}
}

/* 状態の札は折り返さない */
.chip, .role-chip { white-space: nowrap; }
.topbar .tenant-switch select { max-width: 16rem; }

/* 開発依頼：ナビのバッジ・浮動ボタン・一覧のタブ */
.nav-badge{background:var(--danger-600); color:#fff; border-radius:999px; font-size:11px; padding:1px 7px; margin-left:4px}
.dev-fab{
  position:fixed; right:20px; bottom:20px; z-index:40; background:var(--teal-600); color:#fff;
  padding:10px 18px; border-radius:999px; box-shadow:0 2px 10px rgba(0,0,0,.28); font-weight:600; font-size:14px;
}
.dev-fab:hover{background:var(--teal-700); text-decoration:none}
.dev-tabs{gap:6px}
.dev-tabs a{padding:4px 10px; border:1px solid var(--border); border-radius:999px; font-size:12px; color:var(--slate-600)}
.dev-tabs a.chip-on{background:var(--teal-600); color:#fff; border-color:var(--teal-600)}

/* ---- 使いやすさ点検（U1〜U21）の共通部品 ---- */
/* U5：表は横スクロールの枠に入れ、列に最小幅。長い文字は省略（…）して title で全文 */
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border); border-radius:8px; background:var(--panel); margin-bottom:8px}
.table-scroll > .data-table{border:none}
.data-table th, .data-table td{min-width:4.5em}
.data-table td{word-break:keep-all; overflow-wrap:anywhere}
.data-table td.nowrap, .data-table th.nowrap{white-space:nowrap}
.ellip{display:inline-block; max-width:14em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom}
.kana{display:block; font-size:11px; color:var(--slate-500)}
.small, td.small{font-size:12px}
.hint{font-size:12px; color:var(--slate-500); margin:2px 0 0; font-weight:normal}
.btn-small, button.btn-small{padding:3px 10px; font-size:12px}
.tenant-switch{display:flex; gap:6px; align-items:center}

/* U6：チェック欄と項目名を横並びに */
label.check, label:has(> input[type=checkbox]), label:has(> input[type=radio]){
  flex-direction:row; align-items:center; gap:6px; color:var(--text)}
label.check input, label:has(> input[type=checkbox]) input{margin:0; width:auto}
.checks{display:flex; flex-wrap:wrap; gap:6px 18px}

/* 状態の札：未対応は目立つ色、期限切れは赤、今日は強調 */
.chip-warn{background:#fef3c7; color:#92400e}
.chip-new{background:var(--danger-600); color:#fff}
tr.overdue td{background:var(--danger-100)}
tr.overdue td.due{color:var(--danger-600); font-weight:700}
tr.today td.due{font-weight:700; color:var(--teal-700)}
@media (prefers-color-scheme: dark){ tr.overdue td{background:#3b1414} .chip-warn{background:#422006; color:#fde68a} }
.req{display:inline-block; margin-left:6px; padding:0 6px; border-radius:4px; background:var(--danger-600); color:#fff; font-size:11px; font-weight:600; vertical-align:middle}
a.tel{white-space:nowrap; font-weight:600}

.section-title{font-size:14px; color:var(--slate-600); margin:18px 0 8px}
.task-form{display:flex; flex-direction:column; gap:4px; min-width:18em}
.task-form input{padding:4px 8px}
.result-buttons button{padding:5px 10px}

/* ダッシュボード：数字の札はリンク（U8） */
a.stat-tile{display:block; color:inherit}
a.stat-tile:hover{border-color:var(--teal-600); text-decoration:none}
.stat-tile.alert .stat-value{color:var(--danger-600)}

/* 応募一覧のタブ（U10） */
.tabs{display:flex; gap:4px; margin-bottom:10px; border-bottom:1px solid var(--border)}
.tabs a{padding:6px 14px; border:1px solid transparent; border-bottom:none; border-radius:8px 8px 0 0; color:var(--slate-600)}
.tabs a.on{background:var(--panel); border-color:var(--border); color:var(--teal-700); font-weight:600; margin-bottom:-1px}

/* 応募詳細：見出し1行（U15）と連絡欄（U14） */
.app-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:12px 16px; margin-bottom:16px}
.app-head .name{font-size:18px; font-weight:700}
.app-head .score{font-size:16px; font-weight:700; color:var(--teal-700)}
.app-head .item{color:var(--slate-600); font-size:13px}
.result-buttons{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0}
form.stack{display:flex; flex-direction:column; gap:10px}
.save-form{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; align-items:end}

/* 求人フォーム：区分ごとの折りたたみ（U18）と上部の媒体検査（U20） */
form.job-form{max-width:760px}
details.sec{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px}
details.sec > summary{cursor:pointer; padding:10px 14px; font-weight:600; list-style:revert}
details.sec > .sec-body{padding:4px 14px 14px; display:flex; flex-direction:column; gap:10px}
.media-check{display:flex; flex-direction:column; gap:6px}
.media-check .row{display:flex; gap:8px; align-items:baseline; flex-wrap:wrap}
.media-check ul{margin:2px 0 0 1.2em; padding:0}
fieldset[disabled]{opacity:.85}
.readonly-note{background:var(--slate-100); border:1px solid var(--border); border-radius:8px; padding:8px 12px; margin-bottom:12px; font-size:13px}

/* CSV の書き出し・取り込み */
.csv-links{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-left:auto}
.upload-form{display:flex; gap:10px; align-items:end; flex-wrap:wrap; margin-top:10px}
.upload-form label{min-width:260px}
.upload-form .hint{flex-basis:100%}
.steps{margin:6px 0 4px 1.2em; padding:0; display:flex; flex-direction:column; gap:4px; font-size:13px}
.rules{margin:0 0 10px 1.2em; padding:0; display:flex; flex-direction:column; gap:4px; font-size:13px}
.next-action{border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; margin:4px 0 10px; background:var(--slate-50)}
.next-action.ok{border-color:var(--teal-600)}
.next-action.ng{border-color:var(--danger-600); background:var(--danger-100)}
.next-action p{margin:0 0 6px}
.btn-primary-lg{font-size:15px; padding:10px 22px; font-weight:700}
.error-box{border-color:var(--danger-600)}
.error-box h2{color:var(--danger-600)}
ul.diff{margin:0; padding-left:1.1em; font-size:12px}
ul.diff.errors{color:var(--danger-600)}
tr.row-error td{background:var(--danger-100)}
.preview-table td{vertical-align:top}
@media (prefers-color-scheme: dark){ .next-action{background:#111b2e} .next-action.ng{background:#3b1414} tr.row-error td{background:#3b1414} }

/* ---- 画面上部：パンくず＋「? この画面の使い方」 ---- */
.page-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.page-head .breadcrumb{margin-bottom:0; flex:1; min-width:0}
.help-link{font-size:12px; color:var(--slate-500); border:1px solid var(--border); border-radius:999px;
  padding:1px 10px; white-space:nowrap; background:var(--panel)}
.help-link:hover{color:var(--teal-700); border-color:var(--teal-600); text-decoration:none}

/* ---- 操作マニュアル（/admin/manual） ---- */
.manual{display:grid; grid-template-columns:230px minmax(0,1fr); gap:24px; align-items:start}
.manual-toc{position:sticky; top:64px; background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); padding:12px 10px; font-size:13px; max-height:calc(100vh - 90px); overflow:auto}
.manual-toc-title{margin:0 6px 8px; font-weight:700}
.manual-toc-title a{color:var(--text)}
.manual-toc ol{list-style:none; margin:0; padding:0}
.manual-toc li a{display:block; padding:5px 6px; border-radius:6px; color:var(--slate-700)}
.manual-toc li a:hover{background:var(--slate-100); text-decoration:none}
.manual-toc li.current > a{background:var(--teal-100); color:var(--teal-700); font-weight:600}
.manual-toc ul{list-style:none; margin:2px 0 6px 22px; padding:0; font-size:12px}
.manual-toc ul a{padding:3px 6px; color:var(--slate-600)}
.manual .no{display:inline-block; min-width:1.6em; color:var(--teal-700); font-weight:700}
.manual-body{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px 28px 28px; max-width:980px; font-size:15px; line-height:1.85}
.manual-h1{font-size:22px; margin:0 0 8px}
.manual-lead{margin:0 0 18px; color:var(--slate-600)}
.role-tag{display:inline-block; font-size:12px; background:var(--teal-100); color:var(--teal-700);
  border-radius:999px; padding:1px 10px; margin-right:6px}
.manual-sec{padding-top:8px; margin-top:22px; border-top:1px solid var(--border); scroll-margin-top:70px}
.manual-sec h2{font-size:18px; margin:8px 0 10px}
.manual-body p{margin:8px 0}
.manual-steps, .manual-list{margin:8px 0 12px; padding-left:1.6em}
.manual-steps li, .manual-list li{margin:4px 0}
.manual-steps li::marker{font-weight:700; color:var(--teal-700)}
.manual-fig{margin:14px 0 18px}
.manual-fig img{display:block; max-width:100%; height:auto; border:1px solid var(--border); border-radius:8px;
  box-shadow:0 1px 4px rgba(15,23,42,.08); background:#fff}
.manual-fig figcaption{font-size:12px; color:var(--slate-500); margin-top:6px}
.manual-note, .manual-tip{border-radius:8px; padding:10px 14px; margin:12px 0; font-size:14px}
.manual-note{background:#fffbeb; border:1px solid #fcd34d; color:#78350f}
.manual-tip{background:var(--ok-100); border:1px solid #6ee7b7; color:#065f46}
.manual-note strong, .manual-tip strong{margin-right:8px}
.manual-table{margin:10px 0 14px}
.manual-body code{font-size:12px; background:var(--slate-100); padding:1px 5px; border-radius:4px; word-break:break-all}
.manual-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin-top:16px}
.manual-card{border:1px solid var(--border); border-radius:var(--radius); padding:12px 16px; background:var(--panel)}
.manual-card h2{font-size:16px; margin:0 0 4px}
.manual-card p{margin:4px 0}
.manual-card ul{margin:6px 0 0; padding-left:1.2em; font-size:13px}
.manual-pager{display:flex; justify-content:space-between; gap:12px; margin-top:28px; padding-top:14px;
  border-top:1px solid var(--border)}
@media (prefers-color-scheme: dark){
  .manual-note{background:#3a2a06; border-color:#a16207; color:#fde68a}
  .manual-tip{background:#063b2c; border-color:#047857; color:#a7f3d0}
  .manual-fig img{border-color:#233047}
}
@media (max-width:860px){
  .manual{grid-template-columns:1fr}
  .manual-toc{position:static; max-height:none}
  .manual-body{padding:14px 16px 20px; font-size:14px}
}
.manual .mk{color:#e02424; font-weight:700}
.manual-marks{list-style:none; padding-left:.4em}
.manual-body{max-width:1120px}
@media (max-width:640px){
  .manual-body{padding:12px 12px 18px}
}

/* ---- 内部コード・詳細の読みやすい表示 ---- */
.code-unknown{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11px; color:var(--slate-500)}
ul.kv-list{list-style:none; margin:0; padding:0; font-size:12px}
ul.kv-list li{margin:0 0 2px}
.kv-key{color:var(--slate-500)}
details.raw{margin-top:4px; font-size:11px}
details.raw summary{cursor:pointer; color:var(--slate-500)}
details.raw pre{white-space:pre-wrap; margin:4px 0 0; max-width:40em}
ul.reasons{margin:4px 0 0 1.1em; padding:0; font-size:12px; color:var(--slate-600)}
.stat-label .info{font-size:11px; color:var(--slate-400)}
.login-help{margin-top:6px}

/* ---- コピーしやすい URL 欄（readonly。押すと全体を選ぶ：admin.js） ---- */
.copy-label{margin:6px 0}
input.copy-field{width:100%; background:var(--slate-100); cursor:text; font-size:12px}
input.copy-field:focus{outline:2px solid var(--teal-600); outline-offset:1px}
.panel h3.sub{border-top:1px solid var(--border); padding-top:10px}
.panel h2 + h3.sub{border-top:none; padding-top:0}
.media-panels{margin-bottom:16px}

/* ---- 通知・面接・未対応の警告・一括変更（013） ---- */
.inline-row{display:flex; gap:12px; flex-wrap:wrap; align-items:end}
form.inline{display:inline}
tr.row-unattended td{background:#fff7ed}
tr.row-unattended td:first-child{box-shadow:inset 3px 0 0 var(--danger-600)}
td.elapsed{color:var(--danger-600); font-weight:700}
tr.row-cancelled td{color:var(--slate-400)}
tr.row-cancelled td a{color:var(--slate-500)}
.tabs a.tab-alert{margin-left:auto}
.bulk-cell{width:34px; text-align:center}
.bulk-cell input{width:18px; height:18px}
.bulk-bar{position:sticky; bottom:0; z-index:15; display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center;
  background:var(--panel); border:2px solid var(--teal-600); border-radius:var(--radius); padding:10px 14px;
  margin-top:12px; box-shadow:0 -2px 12px rgba(0,0,0,.10)}
html.js .bulk-bar:not(.on){display:none}
.bulk-op{display:inline-flex; gap:6px; align-items:center}
.bulk-count strong{font-size:16px}
body.bulk-open .dev-fab{bottom:110px}
.warn-text{color:var(--danger-600)}
ul.bulk-names{columns:2; font-size:13px; margin:10px 0}
ul.bulk-result{font-size:14px; line-height:1.9}
.tiles-alert{grid-template-columns:repeat(auto-fit,minmax(200px,260px))}
@media (prefers-color-scheme: dark){
  tr.row-unattended td{background:#3a2208}
}
@media (max-width:760px){
  .tabs{flex-wrap:wrap}
  .tabs a.tab-alert{margin-left:0}
  .bulk-bar{flex-direction:column; align-items:stretch}
  .bulk-op{flex-wrap:wrap}
  ul.bulk-names{columns:1}
}
.name-cell{min-width:6.5em}
/* 狭い画面で長い選択肢・URL がはみ出さないように */
.grid-2 > *, .grid-3 > *{min-width:0}
select, input.copy-field{max-width:100%}
/* 入力欄の見出しは縦並び（label が flex 列）なので、「必須」札が横いっぱいに伸びないように */
label > .req{align-self:flex-start; margin-left:0}
/* 日時・ファイルの入力欄は既定の最小幅が広いので、狭い画面では枠に収める */
input[type=datetime-local], input[type=file], input[type=month]{max-width:100%; min-width:0}
/* 行の操作ボタンが縦に並んだとき、くっつかないように */
td.row-actions button, td.row-actions .btn{margin:2px 0}
/* 請求明細：金額は右寄せ、合計行を太字 */
.data-table .num{text-align:right; white-space:nowrap}
.data-table tfoot th{font-weight:500; padding:6px 10px; border-bottom:1px solid var(--border); background:none}
.data-table tfoot td{padding:6px 10px}
.data-table tfoot tr.total th, .data-table tfoot tr.total td{font-weight:700; font-size:14px}
/* 狭い画面では行をカード状に積む（運用状況の「状態の一覧」など） */
@media (max-width:640px){
  table.stack-sm thead{display:none}
  table.stack-sm, table.stack-sm tbody, table.stack-sm tr, table.stack-sm td{display:block; width:100%; min-width:0}
  table.stack-sm tr{border-bottom:1px solid var(--border); padding:6px 0}
  table.stack-sm td{border:none; padding:3px 10px}
  table.stack-sm td[data-label]::before{content:attr(data-label); display:block; font-size:11px; color:#64748b}
  table.stack-sm td:first-child{font-weight:600}
  table.stack-sm td:first-child::before{display:none}
}
.data-table td.wide{min-width:11em}
.houjin-date{display:block; margin-top:4px}
dd.pre{white-space:pre-wrap}
/* 応募フォームの設定（EFO）：1項目＝1枚のカード。表示・必須・↑↓を1行に並べ、スマホ幅でも横にずらさない */
ol.efo-fields{list-style:none; margin:10px 0; padding:0; border:1px solid var(--border); border-radius:8px; background:var(--panel)}
.efo-field{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 14px;
  padding:8px 10px; border-bottom:1px solid var(--border)}
.efo-field:last-child{border-bottom:none}
.efo-field-name{display:flex; gap:8px; align-items:baseline; min-width:0; flex:1 1 12em; font-size:14px}
.efo-field-name .hint{display:block}
.efo-no{flex:none; min-width:1.6em; text-align:right; color:var(--slate-500); font-size:12px}
.efo-field-ops{display:flex; align-items:center; gap:14px; flex:none; margin-left:auto}
.efo-field-ops label.check{font-size:13px}
.efo-field-ops input[type=checkbox]{width:18px; height:18px}
.efo-move{display:inline-flex; gap:4px}
.efo-move .btn-small{min-width:36px; min-height:32px; padding:3px 0; margin:0}
.efo-move-blank{display:inline-block; flex:none; width:36px; min-width:36px}
.efo-field-fixed{color:var(--slate-600)}
@media (max-width:640px){
  .efo-field-ops{width:100%; justify-content:flex-end}
}
/* 変更履歴の「項目名：旧 → 新」 */
ul.diff-list li{overflow-wrap:anywhere}

/* ==== UI 統合（2026-09-26 要件定義_UI統合）：共通の骨組み。クラス名は固定（担当B〜Eが使う） ==== */
/* ---- 状態チップ：色は意味で固定（§7）。緑＝完了/正常 黄＝待ち/注意 赤＝要対応/異常 灰＝停止/対象外 青＝進行中 ---- */
:root{ --info-600:#2563eb; --info-100:#dbeafe; --warn-100:#fef3c7; --warn-800:#92400e }
.chip-ok{background:var(--ok-100); color:#065f46}
.chip-warn{background:var(--warn-100); color:var(--warn-800)}
.chip-danger{background:var(--danger-100); color:#7f1d1d}
.chip-muted{background:var(--slate-200); color:var(--slate-700)}
.chip-info{background:var(--info-100); color:#1e40af}
/* 旧クラス名は別名として残す（既存画面を壊さない）：chip-error→danger, chip-neutral→muted */
.chip-error{background:var(--danger-100); color:#7f1d1d}
.chip-neutral{background:var(--slate-200); color:var(--slate-700)}
@media (prefers-color-scheme: dark){
  .chip-ok{background:#063b2c; color:#a7f3d0}
  .chip-warn{background:#422006; color:#fde68a}
  .chip-danger, .chip-error{background:#3b1414; color:#fecaca}
  .chip-muted, .chip-neutral{background:#233047; color:var(--slate-200)}
  .chip-info{background:#172554; color:#bfdbfe}
}

/* ---- メニューの群（§1）：<details class="nav-group"> ＋ <summary class="nav-group-head">。
   開いている＝[open]（.open も同じ扱い）。閉じた群は見出しに群内のバッジ合計を出す。JS が無くても開閉できる ---- */
.nav-group{display:block; margin-bottom:2px}
.nav-group-head{display:flex; align-items:center; gap:6px; width:100%; padding:7px 10px; border:none; border-radius:8px;
  background:none; color:var(--slate-600); font-size:12px; font-weight:700; letter-spacing:.02em; text-align:left; cursor:pointer;
  list-style:none; user-select:none}
.nav-group-head::-webkit-details-marker{display:none}
.nav-group-head::marker{content:""}
.nav-group-head:hover{background:var(--slate-100)}
.nav-group-head:focus-visible{outline:2px solid var(--teal-600); outline-offset:1px}
.nav-group-head .nav-group-label{flex:1; min-width:0}
.nav-group-head .nav-badge{margin-left:0}
.nav-group-head .nav-caret{flex:none; font-size:9px; color:var(--slate-400); transition:transform .15s}
.nav-group[open] > .nav-group-head .nav-caret, .nav-group.open > .nav-group-head .nav-caret{transform:rotate(90deg)}
.nav-group.current > .nav-group-head{color:var(--teal-700)}
.nav-group-items{display:flex; flex-direction:column; gap:1px; padding:0 0 4px 6px}
.nav-group:not([open]):not(.open) > .nav-group-items{display:none}
.nav-group[open] > .nav-group-head .group-sum, .nav-group.open > .nav-group-head .group-sum, .group-sum[hidden]{display:none}
.nav-group-items .navlink{padding:6px 10px 6px 12px; font-size:13px}
@media (prefers-color-scheme: dark){ .nav-group-head{color:var(--slate-300)} .nav-group-head:hover{background:#16223a} }
/* ヘッダー：横断検索と「今日やること」の件数まとめ */
.header-search{display:flex; align-items:center; gap:4px; min-width:0; margin-left:auto}
.header-search ~ .account-bar{margin-left:0}
.header-search input[type=search]{width:15rem; max-width:100%; min-width:0; padding:4px 10px; border-radius:6px;
  border:1px solid var(--slate-600); background:#1f2937; color:#fff}
.header-search input[type=search]::placeholder{color:var(--slate-400)}
.header-search button{padding:4px 10px; font-size:12px; flex:none}
.header-todo{display:inline-flex; align-items:center; gap:4px; color:#e2e8f0; white-space:nowrap; font-size:13px}
.header-todo .nav-badge{margin-left:0}
.header-todo.zero .nav-badge{display:none}
@media (max-width:760px){
  .sidenav{flex-direction:column; flex-wrap:nowrap}
  .sidenav .nav-group{width:100%}
  .nav-group-head{padding:10px 12px; font-size:13px}
  .nav-group-items .navlink{padding:9px 12px; background:none}
  .nav-group-items .navlink.active{background:var(--teal-100)}
  .header-search{order:10; flex-basis:100%; margin-left:0}
  .header-search input[type=search]{flex:1; width:auto}
}

/* ---- 詳細画面のヘッダー（§2・§3）：タイトル行＋メタ情報チップ＋右に主要ボタン ---- */
.hub-head{display:flex; flex-wrap:wrap; align-items:flex-start; gap:10px 16px; background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); padding:14px 16px; margin-bottom:12px}
.hub-head .hub-title{flex:1 1 20em; min-width:0}
.hub-head .hub-title h1, .hub-head .hub-title .name{margin:0; font-size:19px; font-weight:700; overflow-wrap:anywhere}
.hub-head .hub-meta{display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; margin-top:6px; font-size:12px; color:var(--slate-600)}
.hub-head .hub-meta .item{white-space:nowrap}
.hub-head .hub-actions{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-left:auto}
.hub-head .hub-pager{flex-basis:100%; display:flex; justify-content:space-between; gap:8px; font-size:12px}
@media (max-width:640px){ .hub-head .hub-actions{margin-left:0; width:100%} }

/* ---- 次の一手（§2）：1〜3個の丸いリンク ---- */
.hub-next{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; background:var(--slate-50); border:1px solid var(--teal-600);
  border-radius:var(--radius); padding:8px 12px; margin-bottom:12px}
.hub-next .hub-next-label{font-size:12px; font-weight:700; color:var(--teal-700); margin-right:4px}
.hub-next ul{display:contents; list-style:none; margin:0; padding:0}
.hub-next li{display:inline-flex}
.hub-next a, .hub-next .pill{display:inline-block; padding:4px 14px; border-radius:999px; border:1px solid var(--teal-600);
  background:var(--panel); color:var(--teal-700); font-size:13px; font-weight:600; white-space:nowrap}
.hub-next a:hover{background:var(--teal-100); text-decoration:none}
.hub-next a.primary{background:var(--teal-600); color:#fff}
.hub-next .note{font-size:12px; color:var(--slate-600)}
@media (prefers-color-scheme: dark){ .hub-next{background:#111b2e} }
/* 次の一手の色は意味で（§7）：tone-danger＝要対応 / warn＝待ち / info＝進行中 / ok＝完了 / muted＝対象外。先頭（primary）は塗り */
.hub-next a.tone-danger{border-color:var(--danger-600); color:#991b1b}
.hub-next a.tone-warn{border-color:#d97706; color:var(--warn-800)}
.hub-next a.tone-info{border-color:var(--info-600); color:#1e40af}
.hub-next a.tone-ok{border-color:#059669; color:#065f46}
.hub-next a.tone-muted{border-color:var(--slate-400); color:var(--slate-600)}
.hub-next a.primary.tone-danger{background:var(--danger-600); color:#fff}
.hub-next a.primary.tone-warn{background:#b45309; border-color:#b45309; color:#fff}
.hub-next a.primary.tone-info{background:var(--info-600); color:#fff}
.hub-next a.primary.tone-ok{background:#047857; border-color:#047857; color:#fff}
.hub-next a.primary.tone-muted{background:var(--slate-600); border-color:var(--slate-600); color:#fff}
@media (prefers-color-scheme: dark){
  .hub-next a.tone-danger{color:#fecaca} .hub-next a.tone-warn{color:#fde68a} .hub-next a.tone-info{color:#bfdbfe}
  .hub-next a.tone-ok{color:#a7f3d0} .hub-next a.tone-muted{color:var(--slate-200)}
  .hub-next a.primary[class*="tone-"]{color:#fff}
}
/* 応募ハブの見出しの中の .app-head は枠なし（従来の .app-head の枠・余白を打ち消す） */
.hub-head .app-head{display:block; background:none; border:0; padding:0; margin:0}
.hub-head form.inline{display:inline}
/* 求人ハブの状態の帯（§3）：チップのリンクを1行に並べ、狭い画面では折り返す */
.hub-status{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 12px}
.hub-status > .small{margin-right:2px}
.hub-status a.chip{text-decoration:none; border:1px solid transparent}
.hub-status a.chip:hover{border-color:currentColor; text-decoration:none}

/* ---- 詳細画面のタブ（§2・§3）：サーバー側で active を描き分け（JS 不要）。中身は .tab-panel、非表示は [hidden] ---- */
.tabs-hub{display:flex; gap:2px; margin:0 0 12px; border-bottom:1px solid var(--border); overflow-x:auto; -webkit-overflow-scrolling:touch}
.tabs-hub a{flex:none; padding:7px 14px; border:1px solid transparent; border-bottom:none; border-radius:8px 8px 0 0;
  color:var(--slate-600); font-size:13px; white-space:nowrap}
.tabs-hub a:hover{background:var(--slate-100); text-decoration:none}
.tabs-hub a.active, .tabs-hub a[aria-current=page]{background:var(--panel); border-color:var(--border); color:var(--teal-700);
  font-weight:700; margin-bottom:-1px}
.tabs-hub a .nav-badge{margin-left:4px}
.tab-panel[hidden]{display:none}
.tab-panel{scroll-margin-top:70px}

/* ---- 今日やること（§4）：件数バッジ＋一言＋リンク ---- */
.todo-list{list-style:none; margin:0; padding:0; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius)}
.todo-list li, .todo-list .todo-row{display:flex; align-items:center; gap:10px; padding:9px 14px; border-bottom:1px solid var(--border)}
.todo-list li:last-child, .todo-list .todo-row:last-child{border-bottom:none}
.todo-list .todo-count{flex:none; min-width:2.6em; text-align:center; padding:2px 8px; border-radius:999px; font-weight:700; font-size:13px;
  background:var(--danger-100); color:#7f1d1d}
.todo-list .todo-count.chip-warn{background:var(--warn-100); color:var(--warn-800)}
.todo-list .todo-count.chip-info{background:var(--info-100); color:#1e40af}
.todo-list .todo-text{flex:1; min-width:0; overflow-wrap:anywhere}
.todo-list .todo-link{flex:none; white-space:nowrap; font-size:13px}
.todo-list .todo-empty{color:var(--slate-500); justify-content:center}
@media (prefers-color-scheme: dark){ .todo-list .todo-count{background:#3b1414; color:#fecaca} }

/* ---- 設定ホーム（§5）：カードの格子＋状態チップ ---- */
.settings-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; margin-bottom:16px}
.settings-cards > .card, .settings-cards > a.card{display:flex; flex-direction:column; gap:6px; background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); padding:12px 14px; color:inherit; min-width:0}
.settings-cards > a.card:hover{border-color:var(--teal-600); text-decoration:none}
.settings-cards .card-head{display:flex; align-items:center; justify-content:space-between; gap:8px}
.settings-cards .card-title{font-weight:700; font-size:14px}
.settings-cards .card-note{font-size:12px; color:var(--slate-600)}
.setup-progress{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; margin-bottom:16px}
.setup-progress .bar{height:8px; border-radius:999px; background:var(--slate-200); overflow:hidden; margin:6px 0 10px}
.setup-progress .bar > span{display:block; height:100%; background:var(--teal-600)}

/* ---- 横断検索の結果（§6） ---- */
ul.search-hits{list-style:none; margin:0; padding:0}
ul.search-hits li{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; padding:7px 0; border-bottom:1px solid var(--border)}
ul.search-hits li:last-child{border-bottom:none}
ul.search-hits li .kana{display:inline; margin-left:2px}
.search-more{margin:8px 0 0; font-size:13px}
.search-section h2 .small{font-weight:normal}

/* 狭い画面（640px 以下）：詳細画面のタブは横スクロールにせず、丸い札で折り返す（6個までなので2行に収まる） */
@media (max-width:640px){
  .tabs-hub{flex-wrap:wrap; gap:4px; overflow-x:visible; border-bottom:none; padding-bottom:2px}
  .tabs-hub a{border:1px solid var(--border); border-radius:999px; padding:5px 12px; background:var(--panel)}
  .tabs-hub a.active, .tabs-hub a[aria-current=page]{background:var(--teal-100); border-color:var(--teal-600); margin-bottom:0}
}
/* はじめの設定：見出しは本文の大きさに合わせ、手順の行間を詰める */
.setup-progress h2{font-size:16px; margin:0}
.setup-progress .setup-steps{margin:0 0 6px; padding-left:1.6em}
.setup-progress .setup-steps li{margin:2px 0}