/* --------------------------------------------------------------------------
   入退社書類管理システム - 画面の見た目

   ServerModule.CustomFiles に 'files/app.css' を登録してあるので、
   uniGUI(Ext JS) 側の CSS より後に読み込まれ、ここでの指定が勝つ。
   ★ 見た目はモダンに（元請けの要望）: 明るい地・白いカード・角丸・余白多め。基調色 #2f6fed（☆ 仮）
   ★ スマホは同じ画面を段組みし直す（max-width: 767px のところ）
   -------------------------------------------------------------------------- */

:root {
  --c-primary: #2f6fed;
  --c-primary-dark: #1f56c9;
  --c-primary-soft: #e8f0fe;
  --c-bg: #f4f6fb;
  --c-card: #ffffff;
  --c-line: #e3e8f0;
  --c-text: #1f2a37;
  --c-sub: #6b7787;
  --c-ok: #16a34a;
  --c-warn: #d97706;
  --c-ng: #dc2626;
  --radius: 12px;
}

body, .x-body, .x-panel, .x-form-field, .x-btn-inner, .x-window, .x-grid-cell, .x-boundlist-item, .x-toast {
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif !important;
}
body { background: var(--c-bg) !important; color: var(--c-text); }

/* ==== 地の色（Neptune の濃い青を消す） ===================================== */
.x-border-layout-ct { background-color: var(--c-bg) !important; }
.x-splitter { background-color: var(--c-line) !important; }
.x-panel-body-default, .x-autocontainer-outerCt { background-color: transparent; }

/* ==== 入力欄・ボタン ======================================================== */
.x-form-text-wrap-default { border-radius: 8px; border-color: #cfd8e3 !important; }
.x-form-trigger-wrap-default { border-radius: 8px; border-color: #cfd8e3 !important; }
.x-form-trigger-wrap-default.x-form-trigger-wrap-focus { border-color: var(--c-primary) !important; box-shadow: 0 0 0 3px rgba(47,111,237,.15); }
.x-form-text-default { font-size: 14px !important; }
/* ボタンは高さで x-btn-default-small / -medium / -large が付く（32px は medium）。どれにも効くように */
.x-btn[class*="x-btn-default-"] { border-radius: 8px !important; background: #fff !important; border: 1px solid #cfd8e3 !important; }
.x-btn[class*="x-btn-default-"] .x-btn-inner { color: var(--c-text) !important; font-size: 13px !important; font-weight: normal; }
.x-btn[class*="x-btn-default-"] .x-btn-icon-el { color: var(--c-primary) !important; font-size: 15px !important; }
.x-btn[class*="x-btn-default-"].x-btn-over { background: #f3f6fc !important; }
.x-btn[class*="x-btn-default-"].x-btn-pressed, .x-btn[class*="x-btn-default-"].x-btn-menu-active { background: #e6edf9 !important; }
.x-btn.btn-primary[class*="x-btn-default-"] { background: var(--c-primary) !important; border-color: var(--c-primary) !important; }
.x-btn.btn-primary[class*="x-btn-default-"] .x-btn-inner, .x-btn.btn-primary[class*="x-btn-default-"] .x-btn-icon-el { color: #fff !important; font-weight: bold; }
.x-btn.btn-primary[class*="x-btn-default-"].x-btn-over { background: var(--c-primary-dark) !important; }
.x-btn.x-btn-disabled { opacity: .5; }
/* メッセージボックス（はい / いいえ）のボタンも同じ形に */
.x-message-box .x-btn { min-width: 84px; }

.x-window-default { border-radius: var(--radius) !important; box-shadow: 0 12px 40px rgba(15,30,60,.18) !important; border-color: var(--c-line) !important; }
.x-window-header-default { background: #fff !important; border-bottom: 1px solid var(--c-line) !important; }
.x-window-header-title-default .x-title-text { color: var(--c-text) !important; font-weight: bold; }
.x-window-header-default .x-tool-img { background-color: transparent; }
.x-window-header-default .x-tool-tool-el { color: #94a0b0 !important; }
/* 閉じるボタン: Neptune の × は白い画像（青い見出し向け）で、白い見出しでは見えず画像の別の部分が覗く。画像をやめてアイコンのフォントで描く（2026-10-25 #9） */
.x-window-header-default .x-tool-img.x-tool-close { background-image: none !important; }
.x-window-header-default .x-tool-img.x-tool-close:before { content: '\f00d'; font-family: 'Font Awesome 7 Free'; font-weight: 900; font-size: 16px; line-height: 16px; width: 16px; display: block; text-align: center; color: #64748b; }
.x-window-header-default .x-tool-over .x-tool-img.x-tool-close:before { color: #0f172a; }
.x-window-body-default { background: #fff !important; }
.x-message-box { max-width: calc(100vw - 24px); }

/* ==== ログイン ============================================================= */
.login-title { font-size: 20px !important; font-weight: bold; color: var(--c-primary) !important; }
.login-sub   { font-size: 14px !important; color: var(--c-sub) !important; }
.login-error { color: var(--c-ng) !important; font-weight: bold; white-space: normal !important; line-height: 1.5; }
.f-label { color: var(--c-sub) !important; font-size: 13px !important; }
.f-head  { font-size: 15px !important; font-weight: bold; color: var(--c-text) !important; border-left: 4px solid var(--c-primary); padding-left: 8px; }
.f-note  { white-space: normal !important; line-height: 1.5; font-size: 12px !important; }

/* ==== ヘッダ =============================================================== */
.app-header { background: #fff !important; border-bottom: 1px solid var(--c-line); box-shadow: 0 1px 3px rgba(15,30,60,.05); }
.app-header .x-autocontainer-innerCt { background: #fff; }
.app-title { font-size: 17px !important; font-weight: bold; color: var(--c-primary) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr-text  { color: var(--c-sub) !important; font-size: 13px !important; white-space: nowrap; }

/* ==== 左メニュー（スマホはメニューのページ） ================================= */
.nav-side { background: #fff; border-right: 1px solid var(--c-line); }
.nav { padding: 10px 8px; font-size: 14px; }
.nav-head { margin: 18px 10px 6px; color: #94a0b0; font-size: 11px; font-weight: bold; letter-spacing: .12em; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin: 2px 0; cursor: pointer; border-radius: 8px; color: #334155; }
.nav-item:hover { background: #f1f5fb; }
.nav-item.active { background: var(--c-primary-soft); color: var(--c-primary); font-weight: bold; }
.nav-item i { width: 18px; text-align: center; color: #7c8aa0; }
.nav-item.active i { color: var(--c-primary); }
.nav-item em { margin-left: auto; font-style: normal; font-size: 11px; color: #94a0b0; }
.nav-note { padding: 4px 12px; color: #94a0b0; font-size: 12px; line-height: 1.5; }
.nav-who { padding: 12px; margin-bottom: 6px; background: var(--c-primary-soft); border-radius: var(--radius); line-height: 1.6; color: #334155; }
.nav-page { background: #fff; }
.nav-page .nav { padding: 12px; font-size: 15px; }
.nav-page .nav-item { padding: 13px 12px; border-bottom: 1px solid #f0f3f8; border-radius: 0; }

/* ==== ページ共通 =========================================================== */
.toolbar { background: #fff; border-bottom: 1px solid var(--c-line); }
.page { padding: 20px 28px 40px; font-size: 14px; }
.page-title { font-size: 20px !important; font-weight: bold; margin-bottom: 14px; color: var(--c-text) !important; }
.page-title .sub { font-size: 13px; color: var(--c-sub); font-weight: normal; margin-left: 10px; }
.form-page { background: var(--c-bg); }
.muted { color: var(--c-sub) !important; }
.empty { color: var(--c-sub); padding: 24px; text-align: center; }
.box { border: 1px solid var(--c-line); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 18px; background: #fff; }
.box-head { font-weight: bold; margin-bottom: 8px; }
.url code { background: #f1f5f9; padding: 3px 8px; border-radius: 6px; font-size: 12px; word-break: break-all; }
.url a, .acts a { color: var(--c-primary); text-decoration: none; }
.pw-show input { font-family: Consolas, monospace !important; font-size: 16px !important; letter-spacing: .08em; }

.hello { font-size: 22px; font-weight: bold; margin-bottom: 4px; }
.lead { color: var(--c-sub); margin-bottom: 18px; }
.sec { font-size: 13px; font-weight: bold; color: #94a0b0; letter-spacing: .1em; margin: 18px 0 10px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 8px; }
.tile { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 16px 18px; cursor: pointer; transition: box-shadow .15s, transform .15s; }
.tile:hover { box-shadow: 0 6px 18px rgba(15,30,60,.08); transform: translateY(-1px); border-color: #c9d6ee; }
.tile i { font-size: 22px; color: var(--c-primary); background: var(--c-primary-soft); width: 42px; height: 42px; line-height: 42px; text-align: center; border-radius: 10px; }
.tile-title { font-weight: bold; margin-top: 10px; font-size: 15px; }
.tile-text { color: var(--c-sub); font-size: 12px; margin-top: 4px; line-height: 1.5; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 18px; }
.cards .empty, .tiles .empty { grid-column: 1 / -1; text-align: left; padding: 8px 0; }
.card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 14px 16px; cursor: pointer; }
.card:hover { border-color: var(--c-primary); box-shadow: 0 4px 14px rgba(47,111,237,.10); }
.card-title { font-weight: bold; font-size: 15px; }
.card-title i { color: var(--c-primary); margin-right: 4px; }
.card-foot { color: var(--c-sub); font-size: 12px; margin-top: 6px; }

.soon { background: #fff; border: 1px dashed #c9d6ee; border-radius: var(--radius); padding: 18px 22px; max-width: 720px; }
.soon-badge { display: inline-block; background: #fff7e6; color: var(--c-warn); border-radius: 20px; padding: 3px 12px; font-weight: bold; font-size: 12px; }
.soon-lead { margin: 12px 0 6px; color: var(--c-sub); }
.soon li { line-height: 1.9; }

/* 表（PC は表、スマホは行ごとのカード） */
table.grid { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; }
table.grid th { background: #f8fafc; text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--c-line); white-space: nowrap; color: #64748b; font-weight: bold; font-size: 12px; }
table.grid td { padding: 10px 12px; border-bottom: 1px solid #f0f3f8; vertical-align: middle; }
table.grid tr:last-child td { border-bottom: none; }
table.grid td.num { text-align: right; white-space: nowrap; }
table.grid td.acts { white-space: nowrap; text-align: right; }
table.grid td.acts a { margin-left: 12px; }
.pill { display: inline-block; padding: 1px 10px; border-radius: 20px; font-size: 11px; font-weight: bold; }
.pill.ok { background: #e8f7ee; color: var(--c-ok); }
.pill.off { background: #f1f5f9; color: #94a0b0; }
.role { font-weight: bold; font-size: 12px; }
.role-9 { color: #7c3aed; } .role-2 { color: var(--c-primary); } .role-1 { color: #475569; }

/* ==== 選択ダイアログ ======================================================= */
.pick-row { padding: 10px 12px; border-bottom: 1px solid #f0f3f8; cursor: pointer; font-size: 14px; }
.pick-row:hover { background: var(--c-primary-soft); }

/* ==== QR から開いた画面（ログインなし） ===================================== */
.pub, .pub .x-panel-body, .pub .x-autocontainer-innerCt { background: var(--c-bg) !important; }
.pub-wrap { min-height: 100%; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; box-sizing: border-box; }
.pub-card { background: #fff; border: 1px solid var(--c-line); border-radius: 16px; padding: 28px 24px; width: 100%; max-width: 440px; text-align: center; box-shadow: 0 8px 30px rgba(15,30,60,.06); }
.pub-brand { color: var(--c-primary); font-weight: bold; font-size: 13px; letter-spacing: .08em; }
.pub-icon { font-size: 44px; color: #c3cfe2; margin: 18px 0 8px; }
.pub-title { font-size: 18px; font-weight: bold; margin-bottom: 10px; }
.pub-text { color: var(--c-sub); line-height: 1.8; font-size: 14px; }

/* ==== 書類作成（一覧） ===================================================== */
.note-box { background: #fff7e6; border: 1px solid #f5d9a8; color: #8a5a00; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; }
.doc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.doc-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; }
.doc-card.off { opacity: .6; }
.doc-name { font-weight: bold; font-size: 15px; }
.doc-name i { color: var(--c-primary); margin-right: 4px; }
.doc-st { margin-top: 6px; }
.doc-desc { color: var(--c-sub); font-size: 12px; margin-top: 8px; line-height: 1.6; }
.doc-meta { color: #94a0b0; font-size: 12px; margin-top: 8px; }
.doc-acts { margin-top: 12px; padding-top: 10px; border-top: 1px solid #f0f3f8; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.doc-acts a, .dc-thumb-acts a, .acts a { color: var(--c-primary); text-decoration: none; cursor: pointer; font-size: 13px; }
.doc-acts a.danger, .acts a.danger, .dc-thumb-acts a.danger { color: var(--c-ng); }
.pill.edit { background: #fff4e0; color: var(--c-warn); }
/* 社内書類（本人に見せない書類。2026-10-27 #5） */
.pill.internal { background: #ede9fe; color: #5b21b6; white-space: nowrap; }

/* ==== 書類の配置エディタ =================================================== */
.dc-title { font-size: 15px !important; font-weight: bold; color: var(--c-text) !important; white-space: nowrap; }
.dc-hint { font-size: 12px !important; white-space: nowrap; }
.dc-side { background: #fff; }
.dc-east { border-left: 1px solid var(--c-line); }
.dc-pages { background: #f8fafc; border-right: 1px solid var(--c-line); }
.dc-pagelist { padding: 10px; }
.dc-thumb { background: #fff; border: 2px solid transparent; border-radius: 8px; padding: 6px; margin-bottom: 10px; cursor: pointer; box-shadow: 0 1px 3px rgba(15,30,60,.08); }
.dc-thumb.sel { border-color: var(--c-primary); }
.dc-thumb img { width: 100%; display: block; border: 1px solid #eef1f5; user-select: none; }
.dc-thumb-foot { font-size: 12px; margin-top: 4px; display: flex; align-items: center; gap: 6px; color: var(--c-sub); }
.dc-thumb-foot b { color: var(--c-text); }
.dc-thumb-acts { margin-left: auto; display: flex; gap: 6px; }
.dc-empty { color: var(--c-sub); font-size: 12px; padding: 10px; line-height: 1.6; }
.dc-canvas { background: #e9edf3; }
.dc-wrap { padding: 20px; }
.dc-none { margin: 60px auto; text-align: center; color: var(--c-sub); line-height: 1.9; max-width: 420px; }
.dc-none i { font-size: 40px; color: #b8c4d6; }
.dc-page { position: relative; max-width: 920px; margin: 0 auto; background: #fff; box-shadow: 0 4px 20px rgba(15,30,60,.15); cursor: crosshair; user-select: none; }
.dc-page[data-ro="1"] { cursor: default; }
.dc-page img { width: 100%; display: block; pointer-events: none; }
.dc-f { position: absolute; box-sizing: border-box; border: 1.5px solid rgba(47,111,237,.85); background: rgba(47,111,237,.10); cursor: move; overflow: hidden; }
.dc-page[data-ro="1"] .dc-f { cursor: pointer; }
.dc-f span { position: absolute; left: 2px; top: 0; font-size: 11px; line-height: 14px; color: #1f56c9; white-space: nowrap; pointer-events: none; text-shadow: 0 0 2px #fff, 0 0 2px #fff; }
.dc-f.t7 { border-style: dashed; border-color: rgba(124,58,237,.85); background: rgba(124,58,237,.08); }
.dc-f.t7 span { color: #6d28d9; }
.dc-f.t5 { border-color: rgba(22,163,74,.9); background: rgba(22,163,74,.10); }
.dc-f.nogroup { border-color: rgba(217,119,6,.95); background: rgba(217,119,6,.12); }
.dc-f.sel { border: 2px solid #e11d48; background: rgba(225,29,72,.10); z-index: 2; }
.dc-h { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; background: var(--c-primary); cursor: nwse-resize; }
.dc-f.sel .dc-h { background: #e11d48; }
.dc-new { position: absolute; border: 1.5px dashed #e11d48; background: rgba(225,29,72,.08); pointer-events: none; }
.dc-props { background: #fff; border-bottom: 1px solid var(--c-line); }
.dc-list { background: #fff; }
.dc-fields { padding: 8px 10px 16px; font-size: 13px; }
.dc-fields-head { font-weight: bold; color: #94a0b0; font-size: 11px; letter-spacing: .1em; margin: 4px 2px 6px; }
.dc-row { padding: 7px 8px; border-radius: 6px; cursor: pointer; }
.dc-row:hover { background: #f3f6fc; }
.dc-row.sel { background: #fde8ec; }
.dc-row-sub { color: #94a0b0; font-size: 11px; margin-top: 2px; }
.dc-row-sub .warn { color: var(--c-warn); font-weight: bold; }
.dc-type { display: inline-block; font-size: 10px; padding: 0 6px; border-radius: 8px; background: var(--c-primary-soft); color: var(--c-primary); }
.dc-type.t7 { background: #f1e9fe; color: #6d28d9; }
.dc-type.t5 { background: #e8f7ee; color: var(--c-ok); }
.req { color: var(--c-ng); }

/* ==== PDF の表示 ============================================================ */
.pdf-wrap { display: flex; flex-direction: column; height: 100%; }
.pdf-bar { padding: 8px 12px; border-bottom: 1px solid var(--c-line); background: #fafbfd; }
.pdf-open { color: var(--c-primary); text-decoration: none; font-size: 13px; }
.pdf-frame { flex: 1; width: 100%; border: none; min-height: 560px; }
.pdf-phone { padding: 24px 16px; text-align: center; }
.pdf-btn { display: inline-block; background: var(--c-primary); color: #fff !important; text-decoration: none; padding: 12px 22px; border-radius: 10px; font-weight: bold; }

/* ==== 書類グループ ========================================================== */
.set-docs { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.set-doc { background: #f1f5f9; border-radius: 14px; padding: 2px 10px; font-size: 12px; color: #334155; }
.set-doc.unpub { background: #fff4e0; color: var(--c-warn); }
.pick-docs { padding: 4px 0; }
.pick-doc { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #f0f3f8; font-size: 13px; }
.pick-doc .no { width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 11px; background: var(--c-primary); color: #fff; font-size: 11px; font-weight: bold; }
.pick-doc .no.off { background: #e2e8f0; color: #94a0b0; }
.pick-doc .nm { flex: 1; }
.pick-doc a { color: var(--c-primary); text-decoration: none; cursor: pointer; }

/* ==== 状態の色 ============================================================== */
.pill.ds0 { background: #f1f5f9; color: #64748b; }   /* 未入力 */
.pill.ds1 { background: #e8f0fe; color: var(--c-primary); }   /* 入力中 */
.pill.ds2 { background: #e8f7ee; color: var(--c-ok); }   /* 提出済 */
.pill.ds3 { background: #fff4e0; color: var(--c-warn); }   /* 承認中 */
.pill.ds4 { background: #fdecec; color: var(--c-ng); }   /* 差し戻し */
.pill.ds5 { background: #16a34a; color: #fff; }   /* 完了 */
.pill.ds9 { background: #f1f5f9; color: #94a0b0; text-decoration: line-through; }
.pill.ps1 { background: #f1e9fe; color: #6d28d9; } .pill.ps2 { background: #e8f0fe; color: var(--c-primary); }
.pill.ps3 { background: #e8f7ee; color: var(--c-ok); } .pill.ps4 { background: #f1f5f9; color: #64748b; }

/* ==== 入退社・面接管理 ====================================================== */
.iv-side { background: #fff; border-right: 1px solid var(--c-line); }
.iv-list { background: #fff; }
.iv-items { padding: 8px; }
.iv-item { padding: 10px 12px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; margin-bottom: 4px; }
.iv-item:hover { background: #f3f6fc; }
.iv-item.sel { background: var(--c-primary-soft); border-color: #c9d8f6; }
.iv-name { font-weight: bold; font-size: 14px; }
.iv-sub { color: var(--c-sub); font-size: 12px; margin-top: 2px; }
.iv-cnt { margin-top: 4px; }
.cnt { display: inline-block; font-size: 11px; border-radius: 10px; padding: 0 8px; margin-right: 6px; }
.cnt.open { background: #fff4e0; color: var(--c-warn); } .cnt.done { background: #e8f7ee; color: var(--c-ok); }
.iv-none { margin: 80px auto; text-align: center; color: var(--c-sub); line-height: 1.9; max-width: 460px; }
.iv-none i { font-size: 42px; color: #b8c4d6; }
.iv-detail { max-width: 1000px; }
.iv-person { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 18px; }
.iv-pname { font-size: 20px; font-weight: bold; }
.iv-pinfo { color: var(--c-sub); margin-top: 4px; }
.iv-note { margin-top: 8px; background: #f8fafc; border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.iv-acts { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.iv-dist { margin-bottom: 18px; }
.iv-dist-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 2px 8px; }
.iv-dist-head a { color: var(--c-primary); text-decoration: none; margin-left: auto; font-size: 13px; }
table.grid tr.off td { color: #94a0b0; }
.sc-row { border: 1px solid var(--c-line); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.sc-head { display: flex; align-items: center; }
.sc-acts { margin-left: auto; display: flex; gap: 12px; }
.sc-acts a { color: var(--c-primary); text-decoration: none; }
.sc-acts a.danger { color: var(--c-ng); }
.set-toggle { display: inline-block; border: 1px solid #cfd8e3; border-radius: 14px; padding: 2px 10px; font-size: 12px; color: #475569; text-decoration: none; }
.set-toggle.on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.qr-box { padding: 16px; text-align: center; }
.qr-box img { width: 220px; height: 220px; image-rendering: pixelated; border: 1px solid var(--c-line); border-radius: 8px; }
.qr-url { margin-top: 10px; font-size: 12px; word-break: break-all; }
.qr-url a, .qr-box a { color: var(--c-primary); text-decoration: none; }
.qr-box a.danger { color: var(--c-ng); }

/* ==== 入力画面（QR・入力ウィンドウ共通） ===================================== */
.di { max-width: 640px; margin: 0 auto; padding: 16px 14px 40px; font-size: 15px; }
.di-dlg .di { padding-top: 12px; }
.di-back { display: inline-block; color: var(--c-primary); text-decoration: none; margin-bottom: 8px; font-size: 14px; }
.di-head { margin-bottom: 12px; }
.di-doc { font-size: 20px; font-weight: bold; }
.di-who { color: var(--c-sub); margin: 2px 0 6px; }
.di-return { background: #fdecec; border: 1px solid #f5c2c2; color: #9b1c1c; border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; line-height: 1.6; }
.di-msg { border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; line-height: 1.6; }
.di-msg.err { background: #fdecec; color: #9b1c1c; }
.di-msg.ok { background: #e8f7ee; color: #166534; }
.di-steps { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px; }
.di-step { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 18px; background: #fff; border: 1px solid var(--c-line);
  color: var(--c-sub); text-decoration: none; font-size: 13px; }
.di-step .n { width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 10px; background: #e2e8f0; color: #475569; font-size: 11px; font-weight: bold; }
.di-step.done .n { background: #cfe0fb; color: var(--c-primary); }
.di-step.cur { border-color: var(--c-primary); color: var(--c-primary); font-weight: bold; }
.di-step.cur .n { background: var(--c-primary); color: #fff; }
.di-card { background: #fff; border: 1px solid var(--c-line); border-radius: 14px; padding: 16px; }
.di-title { font-size: 17px; font-weight: bold; margin-bottom: 6px; }
.di-desc { color: var(--c-sub); margin: 0 0 12px; line-height: 1.6; }
.di-field { margin: 14px 0; }
.di-label { display: block; font-size: 13px; color: #475569; margin-bottom: 6px; font-weight: bold; }
.di-label .req { color: #fff; background: var(--c-ng); border-radius: 4px; font-size: 10px; padding: 1px 5px; margin-left: 6px; }
.di-in { width: 100%; box-sizing: border-box; font-size: 16px; padding: 10px 12px; border: 1px solid #cfd8e3; border-radius: 10px; background: #fff; font-family: inherit; }
.di-in:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(47,111,237,.15); }
textarea.di-in { resize: vertical; line-height: 1.6; }
.di-check { display: flex; align-items: center; gap: 10px; font-size: 15px; padding: 6px 0; }
.di-check input { width: 22px; height: 22px; }
.di-help { color: #94a0b0; font-size: 12px; margin-top: 4px; }
.di-nav { display: flex; gap: 8px; margin-top: 14px; justify-content: flex-end; flex-wrap: wrap; }
.di-btn { display: inline-block; padding: 11px 18px; border-radius: 10px; border: 1px solid #cfd8e3; background: #fff; color: var(--c-text) !important;
  text-decoration: none; font-size: 15px; cursor: pointer; text-align: center; }
.di-btn.pri { background: var(--c-primary); border-color: var(--c-primary); color: #fff !important; font-weight: bold; }
.di-sum-group { margin: 12px 0; }
.di-sum-head { font-weight: bold; border-left: 4px solid var(--c-primary); padding-left: 8px; margin-bottom: 6px; }
.di-sum-head a { font-weight: normal; font-size: 13px; color: var(--c-primary); margin-left: 8px; text-decoration: none; }
table.di-sum { width: 100%; border-collapse: collapse; font-size: 14px; }
table.di-sum th { text-align: left; color: var(--c-sub); font-weight: normal; width: 38%; padding: 6px 8px; border-bottom: 1px solid #f0f3f8; vertical-align: top; }
table.di-sum td { padding: 6px 8px; border-bottom: 1px solid #f0f3f8; word-break: break-all; }
.di-done { text-align: center; }
.di-done-icon { font-size: 48px; color: var(--c-ok); }
.di-done-title { font-size: 19px; font-weight: bold; margin: 6px 0 8px; }

/* QR から開いた人の一覧 */
.pub-list { width: 100%; max-width: 560px; }
.pub-name { font-size: 20px; font-weight: bold; margin: 6px 0 14px; }
.pub-sec { font-size: 13px; font-weight: bold; color: #94a0b0; letter-spacing: .08em; margin: 18px 2px 8px; }
.pub-empty { color: var(--c-sub); padding: 4px 2px; }
.pub-doc { background: #fff; border: 1px solid var(--c-line); border-radius: 14px; padding: 14px; margin-bottom: 10px; }
.pub-doc-name { font-weight: bold; font-size: 16px; }
.pub-doc-st { margin: 6px 0 10px; }
.pub-doc-ret { background: #fdecec; color: #9b1c1c; border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; font-size: 13px; }
.pub-doc .di-btn { width: 100%; box-sizing: border-box; }

/* ==== ワークフロー ========================================================== */
.wf-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.wf-step { background: #f8fafc; border: 1px solid var(--c-line); border-radius: 10px; padding: 6px 10px; font-size: 12px; line-height: 1.5; color: #475569; }
.wf-step.t1 { border-left: 4px solid var(--c-primary); }
.wf-step.t2 { border-left: 4px solid #8b5cf6; }
.wf-arrow { color: #94a0b0; font-size: 18px; }
.set-doc.key { background: #e8f0fe; color: var(--c-primary); font-weight: bold; }
.seg { display: inline-flex; border: 1px solid #cfd8e3; border-radius: 16px; overflow: hidden; }
.seg a { padding: 3px 10px; font-size: 12px; color: #64748b !important; cursor: pointer; border-left: 1px solid #e2e8f0; }
.seg a:first-child { border-left: none; }
.seg a.on { background: #e2e8f0; color: var(--c-text) !important; font-weight: bold; }
.seg a.on.key { background: var(--c-primary); color: #fff !important; }
.pick-doc.editing { background: #fff7e6; }
.pill.wr1 { background: #fff4e0; color: var(--c-warn); } .pill.wr2 { background: #e8f7ee; color: var(--c-ok); }
.pill.wr3 { background: #fdecec; color: var(--c-ng); } .pill.wr9 { background: #f1f5f9; color: #94a0b0; }
.wf-run { background: #fff; border: 1px solid var(--c-line); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.wf-run-head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 6px; }
.wf-run-head .muted { margin-left: auto; font-size: 12px; }
ol.wf-steps { list-style: none; margin: 0; padding: 0 0 0 4px; }
ol.wf-steps li { position: relative; padding: 6px 0 8px 22px; border-left: 2px solid #e2e8f0; margin-left: 6px; }
ol.wf-steps li::before { content: ''; position: absolute; left: -7px; top: 9px; width: 12px; height: 12px; border-radius: 6px; background: #e2e8f0; }
ol.wf-steps li.done::before { background: var(--c-ok); }
ol.wf-steps li.cur::before { background: var(--c-warn); box-shadow: 0 0 0 3px #fde7c2; }
.wf-sn { font-size: 13px; }
.wf-act { font-size: 12px; margin-top: 4px; color: #475569; }
.wf-act .who { font-weight: bold; }
.wf-act.a2 { color: var(--c-ok); } .wf-act.a3 { color: var(--c-ng); }
.wf-cmt { background: #f8fafc; border-radius: 6px; padding: 4px 8px; margin-top: 3px; color: var(--c-text); }
.ap .sec { margin-top: 20px; }
.ap-links { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ap-box { margin-bottom: 8px; }
.di-btn.danger { color: var(--c-ng) !important; border-color: #f5c2c2; }
.di-msg:not(.ok):not(.err) { background: #f1f5f9; color: #475569; }
.ap-card .ap-who { color: var(--c-sub); font-size: 13px; margin-top: 2px; }
.pill.ds3 + .muted { font-size: 11px; }

/* ==== スマホ ================================================================ */
@media (max-width: 767px) {
  .page { padding: 14px 12px 32px; }
  .page-title { font-size: 18px !important; }
  .page-title .sub { display: block; margin: 4px 0 0; }
  .hello { font-size: 19px; }
  .tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tile { padding: 12px; }
  .tile-text { display: none; }
  .cards { grid-template-columns: 1fr; }
  .box { padding: 12px; }

  /* 表 → 行ごとのカード。見出しは td の data-label */
  table.rgrid, table.rgrid tbody, table.rgrid tr, table.rgrid td { display: block; width: 100%; box-sizing: border-box; }
  table.rgrid { border: none; background: transparent; }
  table.rgrid thead { display: none; }
  table.rgrid tr { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); margin-bottom: 10px; padding: 6px 0; }
  table.rgrid td { border: none; padding: 4px 14px; text-align: left !important; }
  table.rgrid td[data-label]::before { content: attr(data-label); display: inline-block; min-width: 96px; color: #94a0b0; font-size: 12px; }
  table.rgrid td.acts { padding-top: 8px; border-top: 1px solid #f0f3f8; margin-top: 4px; white-space: normal; }
  table.rgrid td.acts a { margin: 0 16px 0 0; display: inline-block; padding: 4px 0; }
}

/* ドキュメント参照・見られる人・回覧の既読（2026-10-25 #5） */
.dr-count { margin: 4px 0 8px; color: #475569; font-size: 13px; }
.dr-hit { margin-top: 2px; }
.vw-head { margin: 14px 0 4px; font-weight: bold; color: #334155; }
.set-toggle.on .muted { color: #e0e7ff; }
.wf-circ { font-size: 12px; margin-top: 4px; color: #475569; }
.wf-circ .wf-rd { display: inline-block; margin: 2px 0 0 10px; color: var(--c-ok); }
.wf-circ .wf-rd .muted { color: #64748b; }

/* 人員ツリー・スキル・シフト（2026-10-25 #6） */
.pt-list { padding: 8px 0; }
.pt-item { padding: 8px 12px; cursor: pointer; border-left: 3px solid transparent; font-size: 13px; color: #334155; }
.pt-item:hover { background: #f1f5f9; }
.pt-item.sel { background: #eef2ff; border-left-color: var(--c-primary); font-weight: bold; }
.pt-item i { color: #94a3b8; width: 16px; }
.pt-cnt { float: right; font-size: 11px; color: #64748b; background: #f1f5f9; border-radius: 10px; padding: 0 7px; }
.pt-hint { padding: 6px 12px; }
.pt-detail { padding: 4px 0; }
.sk-cat { background: #fff; border: 1px solid var(--c-line); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; }
.sk-cat-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; font-size: 15px; }
.sc-acts a { margin-left: 10px; font-size: 12px; }
.sk-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid #f1f5f9; }
.sk-name { min-width: 160px; font-weight: bold; }
.sk-lvs { flex: 1; }
.sk-lv { display: inline-block; font-size: 11px; background: #f1f5f9; color: #475569; border-radius: 10px; padding: 1px 8px; margin: 2px 4px 2px 0; }
.sk-none { padding: 6px 0; }
.sk-has { display: inline-block; font-size: 12px; background: #ecfdf5; color: #065f46; border-radius: 10px; padding: 1px 8px; margin: 2px 4px 2px 0; }
.sh-ginfo { margin: 6px 0 10px; }
.sh-legend { margin: 6px 0; font-size: 12px; }
.sh-lg { display: inline-block; margin: 2px 12px 2px 0; }
.sh-pat { display: inline-block; min-width: 22px; padding: 1px 4px; border-radius: 6px; color: #fff; font-size: 12px; font-weight: bold; text-align: center; box-sizing: border-box; }
.sh-off { display: inline-block; min-width: 22px; padding: 1px 4px; border-radius: 6px; color: #94a3b8; background: #f1f5f9; font-size: 12px; text-align: center; box-sizing: border-box; }
.sh-palette { margin: 10px 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; }
.sh-brush { display: inline-block; border: 1px solid #cfd8e3; border-radius: 10px; padding: 4px 10px; color: #334155; text-decoration: none; background: #fff; }
.sh-brush.on { border-color: var(--c-primary); box-shadow: 0 0 0 2px #c7d2fe; background: #eef2ff; }
.sh-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--c-line); border-radius: 10px; background: #fff; }
.sh-table { border-collapse: separate; border-spacing: 0; font-size: 12px; }
.sh-table th, .sh-table td { border-bottom: 1px solid #eef2f7; border-right: 1px solid #f1f5f9; padding: 4px 3px; text-align: center; white-space: nowrap; }
.sh-table .sh-name { position: sticky; left: 0; background: #fff; text-align: left; padding: 4px 10px; min-width: 90px; z-index: 1; border-right: 1px solid #e2e8f0; }
.sh-table thead th { background: #f8fafc; color: #475569; font-weight: normal; }
.sh-table thead th.sh-name { background: #f8fafc; }
.sh-day span { font-size: 10px; }
.sh-table .sat { color: #2563eb; } .sh-table .sun { color: #dc2626; }
.sh-table td.sat { background: #f8faff; } .sh-table td.sun { background: #fffafa; }
.sh-cell { min-width: 28px; height: 26px; }
.sh-table.edit .sh-cell { cursor: pointer; }
.sh-table.edit .sh-cell:hover { background: #eef2ff; }
.sh-table tr.sh-me td { background: #fffbeb; }
/* 希望休（2026-10-27 #6）。シフト作成の表と本人のカレンダー */
.sh-req { display: inline-block; min-width: 16px; padding: 0 3px; margin-left: 2px; border-radius: 4px; background: #db2777; color: #fff; font-size: 10px; font-weight: bold; line-height: 16px; text-align: center; vertical-align: middle; }
.sh-table td.req { background: #fdf2f8; }
.sh-table td.req-ng { box-shadow: inset 0 0 0 2px #db2777; }
.sh-reqng { display: inline-block; width: 18px; height: 14px; border-radius: 3px; box-shadow: inset 0 0 0 2px #db2777; vertical-align: middle; }
.dof-help { text-align: left; font-size: 13px; margin-bottom: 10px; }
.dof-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dof-month { font-weight: bold; font-size: 16px; }
.dof-mv { color: var(--c-primary); text-decoration: none; font-size: 14px; padding: 6px 4px; }
.dof-mv.off { color: #cbd5e1; }
.dof-cal { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.dof-cal th { font-size: 12px; font-weight: normal; color: #64748b; }
.dof-cal th.sun, .dof-day.sun .dof-d { color: #dc2626; } .dof-cal th.sat, .dof-day.sat .dof-d { color: #2563eb; }
.dof-day { height: 46px; text-align: center; vertical-align: top; border-radius: 8px; background: #f8fafc; cursor: pointer; padding-top: 4px; }
.dof-day .dof-d { display: block; font-size: 14px; }
.dof-day.req { background: #fce7f3; box-shadow: inset 0 0 0 2px #db2777; }
.dof-day.past { cursor: default; background: transparent; }
.dof-day.past .dof-d { color: #cbd5e1; }
/* 希望休のメモ（2026-10-27 #7） */
.sh-req.memo { box-shadow: 0 0 0 1px #fff, 0 0 0 2px #db2777; cursor: help; }
.dof-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #f1f5f9; }
.dof-date { flex: 0 0 auto; min-width: 70px; font-size: 14px; }
.dof-date.sun { color: #dc2626; } .dof-date.sat { color: #2563eb; }
.dof-note { flex: 1 1 auto; min-width: 0; font-size: 16px; padding: 8px 10px; border: 1px solid #cfd8e3; border-radius: 8px; box-sizing: border-box; }
.dof-hint { font-size: 12px; margin-top: 6px; }
.sh-table tfoot td { background: #f8fafc; color: #475569; }
.sh-cnt { font-size: 11px; }
.pub-wide { max-width: 1100px; }
/* flex の子は既定で中身の幅まで広がり、表がページごとはみ出す。表の箱だけを横にスクロールさせる */
.pub-list { min-width: 0; }
.sh-scroll { max-width: 100%; }
/* HTML は Ext の箱（display: table）に入り、シフト表の幅まで広がってページごとはみ出す。シフト表を含む箱だけ画面の幅に固定する */
.x-autocontainer-outerCt:has(.sh-scroll) { table-layout: fixed; width: 100%; }
/* 入力画面（ウィザード）も同じ: 横に長いステップの帯で Ext の箱（display: table）が広がり、スマホで画面より広くなる（Pixel 7 で 640px / 411px）。2026-10-27 #3 */
.x-autocontainer-outerCt:has(.di) { table-layout: fixed; width: 100%; }
.sh-mine { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px; }
.sh-mine td { padding: 5px 4px; border-top: 1px solid #f1f5f9; }
.sh-mine tr.sat td:first-child { color: #2563eb; } .sh-mine tr.sun td:first-child { color: #dc2626; }
.sh-mine tr.today td { background: #fffbeb; font-weight: bold; }

/* データ出力（2026-10-25 #7） */
.ex-warn { margin: 8px 0; padding: 8px 10px; border-radius: 10px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: 12px; }
.ex-warn-s { color: #b45309; font-size: 12px; }
.pick-doc.ex-miss { background: #fffbeb; }
.ex-prev { border-collapse: collapse; font-size: 12px; }
.ex-prev th, .ex-prev td { border-bottom: 1px solid #eef2f7; padding: 5px 8px; text-align: left; white-space: nowrap; }
.ex-prev thead th { background: #f8fafc; color: #475569; font-weight: normal; }

/* 候補つき文字（入力画面）: ▼ で候補を全部出す。2026-10-27 #2 */
.di-combo { position: relative; }
.di-combo .di-in { padding-right: 40px; }
.di-cbtn { position: absolute; right: 1px; top: 1px; bottom: 1px; width: 38px; display: flex; align-items: center; justify-content: center; color: #555; text-decoration: none; border-left: 1px solid #e3e8ef; border-radius: 0 10px 10px 0; }
.di-cbtn:hover { background: #f2f5fa; }
.di-clist { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 2px); max-height: 240px; overflow-y: auto; background: #fff; border: 1px solid #cfd8e3; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.12); z-index: 50; }
.di-clist.open { display: block; }
.di-copt { padding: 9px 12px; cursor: pointer; font-size: 15px; }
.di-copt:hover { background: #eef3fd; }
.di-copt.sel { background: #e1ebfd; font-weight: bold; }

/* 入力画面の段のメニュー（スマホ）と 前へ / 次へ。2026-10-27 #4 */
.di-menu { display: none; position: relative; margin: 2px 0 10px; }
.di-menu-btn { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; box-sizing: border-box; padding: 9px 14px; border-radius: 22px; background: #fff; border: 1px solid var(--c-primary); color: var(--c-primary); font-weight: bold; text-decoration: none; }
.di-menu-btn .n { flex: 0 0 auto; font-size: 12px; background: var(--c-primary); color: #fff; border-radius: 10px; padding: 1px 7px; }
.di-menu-btn .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.di-menu-btn .dd { font-size: 11px; transition: transform .15s; }
.di-menu.open .di-menu-btn .dd { transform: rotate(180deg); }
.di-menu-list { display: none; position: absolute; left: 0; top: calc(100% + 4px); width: min(320px, 86vw); max-height: 60vh; overflow-y: auto; background: #fff; border: 1px solid var(--c-line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.16); z-index: 60; padding: 4px 0; }
.di-menu.open .di-menu-list { display: block; }
.di-menu-item { display: flex; align-items: center; gap: 10px; padding: 11px 14px; color: #334155; text-decoration: none; }
.di-menu-item .n { width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 11px; background: #e2e8f0; color: #475569; font-size: 11px; font-weight: bold; flex: 0 0 auto; }
.di-menu-item.done .n { background: #cfe0fb; color: var(--c-primary); }
.di-menu-item.cur { background: #eef3fd; color: var(--c-primary); font-weight: bold; }
.di-menu-item.cur .n { background: var(--c-primary); color: #fff; }
.di-nav .di-prev { margin-right: auto; }
@media (max-width: 767px) {
  .di-steps { display: none; }
  .di-menu { display: block; }
  .di-nav { flex-wrap: nowrap; }
  .di-nav .di-btn { flex: 1 1 0; text-align: center; padding-left: 8px; padding-right: 8px; }
  .di-nav .di-prev { margin-right: 0; }
}

/* ==== 入力画面の表示の切り替えと「帳票に直接入力」（2026-10-27 #9） ==== */
.di-mode { display: inline-flex; border: 1px solid #cfd8e3; border-radius: 10px; overflow: hidden; margin: 4px 0 12px; background: #fff; }
.di-mode a { padding: 7px 14px; font-size: 13px; color: #475569; text-decoration: none; }
.di-mode a + a { border-left: 1px solid #cfd8e3; }
.di-mode a.on { background: var(--c-primary); color: #fff; font-weight: bold; }
.ds-hint { font-size: 12px; margin-bottom: 8px; }
.ds-req-lg { display: inline-block; width: 18px; height: 10px; border-bottom: 2px solid #f59e0b; background: rgba(255,251,235,.8); vertical-align: middle; }
/* 書類 1 ページ。中の欄は %（ページに対する割合）、文字は cqw（ページの幅の 1%）で置く */
.ds-sheet { position: relative; width: 100%; container-type: inline-size; border: 1px solid #d5dce6; box-shadow: 0 2px 10px rgba(15,30,60,.08); margin-bottom: 16px; background: #fff; }
.ds-sheet > img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; user-select: none; pointer-events: none; }
.ds-f { position: absolute; box-sizing: border-box; margin: 0; padding: 0 .3em; border: 1px solid rgba(37,99,235,.35); border-radius: 2px; background: rgba(239,246,255,.55); color: #0f172a; font-family: inherit; line-height: 1.15; }
.ds-f:focus { outline: none; border-color: #2563eb; background: rgba(255,255,255,.95); box-shadow: 0 0 0 2px rgba(37,99,235,.25); z-index: 5; }
.ds-f.req { border-bottom: 2px solid #f59e0b; background: rgba(255,251,235,.7); }
.ds-f.miss { border: 2px solid #dc2626; background: rgba(254,226,226,.8); }
textarea.ds-f { resize: none; padding-top: .15em; }
select.ds-f { padding: 0; }
.ds-date { padding: 0 .1em; }
.ds-check { display: flex; align-items: center; justify-content: center; padding: 0; }
.ds-check input { width: 80%; height: 80%; max-width: 22px; max-height: 22px; margin: 0; }
.ds-combo { position: absolute; }
.ds-combo .ds-f { position: static; width: 100%; height: 100%; padding-right: 1.6em; }
.ds-combo .di-cbtn { width: 1.5em; min-width: 16px; border-radius: 0 2px 2px 0; font-size: 12px; }
.ds-v { position: absolute; box-sizing: border-box; padding: 0 .3em; line-height: 1.15; display: flex; align-items: center; white-space: pre-wrap; overflow: hidden; color: #0f172a; }
.dr-input { font-weight: bold; }
.di.ds-wide { max-width: 1100px; }