/* Navy Flow — 画面デザイン基準（白 55% / ブルー 30% / スレート 10% / オレンジ 5%、フォントはメイリオ）
   トークンの意味は docs/DESIGN.md「画面デザイン基準」を参照。押せるものは 44px 以上、文字は 15px（補足 13.5px）以上。 */
:root{
  --blue:#1450C4; --blue-strong:#0146C2; --blue-ocean:#0C5BC9; --blue-sky:#0D63C8; --blue-soft:#EAF1FC; --blue-line:#C5D6F3;
  --orange:#FF6B35; --orange-soft:#FFF3EC; --orange-line:#FFC9B0; --orange-ink:#7A2E0E; --orange-icon:#C2410C;
  --slate:#44546A; --ink:#1B2A4A; --muted:#5B6B82;
  --bg:#F5F8FD; --panel:#FFFFFF; --line:#D9E1EE; --line-strong:#B8C4D6; --row:#E6EBF3;
  --ok:#0E6B3F; --ok-soft:#E3F3EA; --warn:#9A3412; --warn-soft:#FFEDE5; --ng:#B42318; --ng-soft:#FDECEB; --gray-soft:#EEF1F5;
  --text:var(--slate); --navy:var(--ink); /* 旧名の互換（濃紺サイドバー時代の名残。色は新トークン） */
  --radius:14px; --radius-s:10px; --shadow:0 1px 2px rgba(20,50,120,.06); --shadow-pop:0 12px 40px rgba(20,50,120,.18);
  --focus:0 0 0 3px rgba(1,70,194,.22);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:Meiryo,"メイリオ","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Noto Sans JP",sans-serif;background:var(--bg);color:var(--slate);font-size:15px;line-height:1.7}
a{color:var(--blue-strong);text-decoration:none}a:hover{color:var(--blue);text-decoration:underline}
/* 単独で置くテキストリンク（「一覧へ」「パスワードを忘れた方」など）は 44px の押しやすい高さにする */
.lnk{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 8px;font-weight:700;border-radius:8px}.lnk:hover{background:var(--blue-soft);text-decoration:none}
.card h2 .lnk{min-height:40px;margin-left:auto;font-size:14px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
svg.ic{flex:none;vertical-align:-0.2em}
h1,h2,h3{margin:0;letter-spacing:.01em;line-height:1.4}
h1{font-size:26px;font-weight:800;color:var(--blue)}h2{font-size:19px;font-weight:700;color:var(--blue)}h3{font-size:16px;font-weight:700;color:var(--ink)}
.muted{color:var(--muted)}.small{font-size:13.5px}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.right{text-align:right}.nowrap{white-space:nowrap}.flex{display:flex;gap:8px;align-items:center}.flex.wrap{flex-wrap:wrap}.grow{flex:1}.gap16{gap:16px}
.hidden{display:none!important}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.visually-hidden:focus-visible+label,.visually-hidden:focus-visible+.btn{outline:2px solid var(--blue-strong);outline-offset:2px}
:focus-visible{outline:2px solid var(--blue-strong);outline-offset:2px}

/* ---- layout ---- */
.shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.side{background:var(--panel);color:var(--slate);border-right:1px solid var(--line);padding:20px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:4px;overflow-y:auto}
.brand{display:flex;align-items:center;gap:12px;padding:4px 8px 18px;font-weight:800;font-size:19px;color:var(--blue);line-height:1.3}
.brand .logo{width:40px;height:40px;display:grid;place-items:center;flex:none}.brand .logo img{width:40px;height:40px;object-fit:contain;display:block}
.brand small{display:block;font-size:13.5px;font-weight:700;color:var(--slate);letter-spacing:0}
.nav{display:flex;flex-direction:column;gap:4px}
.nav a{display:flex;align-items:center;gap:12px;min-height:44px;color:var(--slate);padding:0 12px;border-radius:10px;font-weight:700}
.nav a:hover{background:var(--bg);color:var(--blue);text-decoration:none}
.nav a.active{background:var(--blue-soft);color:var(--blue);font-weight:800}
.nav .badge{margin-left:auto;min-width:26px;text-align:center;font-size:13.5px;font-weight:800;padding:1px 8px;background:var(--orange);color:var(--ink)}
.nav .sep{height:1px;background:var(--line);margin:10px 8px}
.related-app{margin-top:24px;padding:14px;border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;gap:4px}
.related-app .rt{font-size:13.5px;font-weight:700}
.related-app a{display:flex;align-items:center;gap:8px;min-height:44px;font-weight:800;color:var(--blue)}
.related-app .rd{font-size:13.5px;line-height:1.6}
.side .foot{margin-top:auto;font-size:13.5px;color:var(--muted);padding:12px 8px 0;line-height:1.6}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:12px;padding:12px 28px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
/* 検索欄（虫めがね付き 44px）。トップバーと「申請する」のキーワード検索で共用 */
.topbar .search,.searchbox{flex:1 1 320px;max-width:560px;display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border:1px solid var(--line-strong);border-radius:10px;background:var(--bg);color:var(--slate)}
.topbar .search:focus-within,.searchbox:focus-within{border-color:var(--blue-strong);box-shadow:var(--focus);background:#fff}
.topbar .search .sic,.searchbox .sic{display:grid;place-items:center;flex:none}
.topbar .search input,.searchbox input{flex:1;min-width:0;border:0;background:transparent;outline:none;color:var(--ink);font-size:15px;padding:0}
.searchbox{background:#fff;margin:0}.searchbox input::placeholder{color:#8794A8}
.iconbtn{position:relative;border:1px solid var(--line-strong);background:#fff;color:var(--slate);border-radius:10px;width:44px;height:44px;display:grid;place-items:center;cursor:pointer;flex:none;padding:0}
.iconbtn:hover{background:var(--blue-soft);color:var(--blue)}
a.iconbtn,a.iconbtn:hover{text-decoration:none}
.iconbtn .dot{position:absolute;top:-7px;right:-7px;min-width:22px;height:22px;border-radius:999px;background:var(--ng);color:#fff;font-size:13.5px;font-weight:800;display:grid;place-items:center;padding:0 5px;line-height:1}
.bellwrap{position:relative}
.userchip{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 14px 0 6px;border:1px solid var(--line);border-radius:999px;background:#fff;cursor:pointer;color:var(--slate);text-align:left}
.userchip:hover{background:var(--bg)}
.userchip .uc{font-size:14px;line-height:1.3;display:flex;flex-direction:column}.userchip .uc b{color:var(--ink)}.userchip .uc .muted{font-size:13.5px}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;font-weight:800;font-size:14px;flex:none}
.content{padding:28px;padding-bottom:72px;max-width:1280px;width:100%}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.page-head p{margin:4px 0 0;color:var(--slate)}
.menu-toggle,.menu-close{display:none}
@media (max-width:900px){
  .shell{grid-template-columns:1fr}.side{position:fixed;left:-290px;width:272px;z-index:50;transition:left .2s;box-shadow:none}.side.open{left:0;box-shadow:0 10px 40px rgba(27,42,74,.28)}
  .menu-toggle{display:grid}.menu-close{display:grid;position:absolute;top:16px;right:12px}.side .brand{padding-right:48px;gap:8px;font-size:17px}.side .brand .logo,.side .brand .logo img{width:34px;height:34px}.side .brand small{font-size:12px;white-space:nowrap}
  .content{padding:16px;padding-bottom:64px}.topbar{padding:10px 16px}
}
@media (max-width:640px){.topbar .search{display:none}.userchip .uc{display:none}.userchip{padding:0 6px}}

/* ---- components ---- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
.card.tight{padding:12px 14px}
.card h2{margin-bottom:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card h2 .cnt{font-size:13.5px;font-weight:800;background:var(--blue-soft);color:var(--blue);padding:1px 10px;border-radius:999px}
.card h3{margin-bottom:10px}
.grid{display:grid;gap:18px}
.grid>*,.designer>*,.card{min-width:0}
.grid.c2{grid-template-columns:1fr 1fr}.grid.c3{grid-template-columns:repeat(3,1fr)}.grid.c4{grid-template-columns:repeat(4,1fr)}
.grid.cards{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
@media (max-width:1100px){.grid.c4{grid-template-columns:1fr 1fr}.grid.c3{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr}}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:20px}
.tile{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;cursor:pointer;transition:.15s;display:block;color:inherit}
.tile:hover{border-color:var(--blue-line);box-shadow:0 4px 14px rgba(20,50,120,.10);transform:translateY(-1px);text-decoration:none}
.tile .l{display:block;font-size:14px;font-weight:700;color:var(--slate);line-height:1.4}
.tile .l.withdot{display:flex;align-items:center;gap:8px}
.tile .l .muted{display:block;font-weight:400;font-size:13.5px}
.tile .l .dot,.tile .dot{width:10px;height:10px;border-radius:50%;background:var(--orange);flex:none;display:inline-block}
.tile .n{font-size:34px;font-weight:800;color:var(--ink);line-height:1.2;margin-top:2px}
.tile .unit,.tile .n .unit{font-size:15px;font-weight:700;margin-left:4px;color:var(--slate)}
.tile .n .small{font-size:15px;font-weight:700}
.tile.warn .n{color:var(--warn)}.tile.ng .n{color:var(--ng)}.tile.ok .n{color:var(--ok)}.tile.gray .n{color:var(--ink)}
.tile.ng{border-color:#F3B8B2}.tile.warn{border-color:var(--orange-line)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:1px solid var(--blue);background:var(--blue);color:#fff;border-radius:10px;padding:0 18px;font-size:15px;font-weight:700;cursor:pointer;white-space:nowrap;line-height:1.3;text-decoration:none}
.btn:hover{background:var(--blue-strong);border-color:var(--blue-strong);color:#fff;text-decoration:none}button.btn:disabled,.btn.ok:disabled,.btn.cta:disabled,.btn.ghost:disabled,.btn.sub:disabled,.btn.warn:disabled,.btn.ng:disabled{opacity:1;background:var(--gray-soft);color:var(--muted);border-color:var(--line);cursor:not-allowed;box-shadow:none}
.btn.ghost{background:#fff;color:var(--blue)}.btn.ghost:hover{background:var(--blue-soft);color:var(--blue)}
.btn.sub{background:#fff;color:var(--slate);border-color:var(--line-strong)}.btn.sub:hover{background:var(--gray-soft);border-color:var(--line-strong);color:var(--ink)}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}.btn.ok:hover{background:#0B5A35;border-color:#0B5A35}
.btn.warn{background:#fff;border-color:var(--warn);color:var(--warn)}.btn.warn:hover{background:var(--warn-soft);color:var(--warn)}
.btn.ng{background:#fff;border-color:var(--ng);color:var(--ng)}.btn.ng:hover{background:var(--ng-soft);color:var(--ng)}
.btn.cta{background:var(--orange);border-color:var(--orange);color:var(--ink);font-weight:800}.btn.cta:hover{background:#FF8259;border-color:#FF8259;color:var(--ink)}.btn.cta svg{stroke-width:2.4}
.btn.sm{min-height:40px;padding:0 12px;font-size:14px;border-radius:8px;gap:6px}.btn.xs{min-height:32px;padding:0 10px;font-size:13.5px;border-radius:8px;gap:4px}
.badge{display:inline-block;font-size:13.5px;font-weight:700;padding:3px 12px;border-radius:999px;background:var(--gray-soft);color:var(--slate);white-space:nowrap;line-height:1.5}
.badge.pending{background:var(--blue-soft);color:var(--blue)}.badge.approved{background:var(--ok-soft);color:var(--ok)}.badge.rejected{background:var(--ng-soft);color:var(--ng)}
.badge.returned{background:var(--warn-soft);color:var(--warn)}.badge.draft{background:var(--gray-soft);color:var(--slate)}.badge.withdrawn{background:var(--gray-soft);color:var(--muted)}
.badge.red{background:var(--ng);color:#fff}.badge.tag{background:var(--gray-soft);color:var(--slate);font-weight:600}
.badge.due{background:var(--warn-soft);color:var(--warn)}.badge.due.over{background:var(--ng-soft);color:var(--ng)}
.badge.gray{background:var(--gray-soft);color:var(--muted)}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{font-size:14px;color:var(--slate);text-align:left;font-weight:700;padding:10px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--bg)}
.tbl td{padding:12px 10px;border-bottom:1px solid var(--row);vertical-align:middle}
.tbl tr.row:hover td{background:var(--bg);cursor:pointer}
.tbl .title{font-weight:700;color:var(--ink);min-width:180px;word-break:break-word;line-height:1.5}
.tbl a.title{display:block;min-width:0;padding:4px 0}.tbl a.title:hover{color:var(--blue);text-decoration:underline}
.tbl .mstat{display:none}
.tbl .chkcell{width:44px;padding:11px}.tbl input[type=checkbox]{width:22px;height:22px;accent-color:var(--blue);margin:0;display:block;cursor:pointer}.tbl input[type=checkbox]:disabled{cursor:not-allowed;opacity:.45}
.tbl .btn{white-space:nowrap}
.tbl.compact td{padding:10px 8px}.tbl.compact .title{min-width:0}.tbl.compact td>.small.muted{white-space:normal;max-width:360px}
.tbl .sub{margin-top:2px;display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center}
.tbl .att{display:inline-flex;align-items:center;gap:2px;color:var(--muted);font-size:13.5px;font-weight:700}
.tbl td.small{max-width:220px}
.tblwrap{overflow-x:auto}
/* 右にまだ列があるあいだは右端をぼかす（core.js の scrollCues が .more を付け外しする） */
.tblwrap.more{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 56px),rgba(0,0,0,.15));mask-image:linear-gradient(to right,#000 calc(100% - 56px),rgba(0,0,0,.15))}
/* スマホ: 表は横スクロールにして、セル内で 1 文字ずつ折り返さない（ホームの「誰が何を抱えているか」など） */
#utbl td,#utbl th{white-space:nowrap}
@media (max-width:700px){.tblwrap .tbl td{white-space:nowrap}.tblwrap .tbl td b{white-space:nowrap}.board td:first-child .small{display:block}.tbl .mstat{display:inline-block}.tbl .title{min-width:200px;white-space:normal}.tbl a.title{white-space:normal}}
.empty{padding:28px;text-align:center;color:var(--muted);border:1px dashed var(--line-strong);border-radius:10px}
.empty.small{padding:16px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:14px;font-weight:700;color:var(--ink)}
.field label .req{color:var(--ng);margin-left:4px}
.field label .hint,.field label .muted{font-weight:400}
.field .hint{font-size:13.5px;color:var(--muted);line-height:1.6}
.inp,input.inp,select.inp,textarea.inp{width:100%;min-height:44px;padding:0 12px;border:1px solid var(--line-strong);border-radius:8px;background:#fff;color:var(--ink);outline:none;font-size:15px}
.inp:focus{border-color:var(--blue-strong);box-shadow:var(--focus)}
.inp::placeholder{color:#8794A8}
textarea.inp{resize:vertical;min-height:88px;padding:10px 12px;line-height:1.6}
select.inp{padding:0 10px}select.inp[multiple]{min-height:0;padding:6px}
input[type=file]{font-size:14px}
.filepick{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}.filepick .btn{cursor:pointer}.filepick .fl{font-size:13.5px;color:var(--slate)}
.inp.readonly{background:var(--bg);color:var(--slate)}
.chk{display:flex;align-items:center;gap:12px;min-height:44px;font-weight:600;cursor:pointer;color:var(--slate)}.chk b{white-space:nowrap;color:var(--ink)}
.chk input[type=checkbox],.chk input[type=radio]{width:22px;height:22px;accent-color:var(--blue);margin:0;flex:none;cursor:pointer}
.chk.small{min-height:40px;gap:8px;font-size:13.5px}.chk.small input{width:18px;height:18px}
.chk .inp{width:auto;min-height:36px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}@media (max-width:700px){.row2{grid-template-columns:1fr}}
.tabs{display:flex;gap:4px;border-bottom:2px solid var(--line);margin-bottom:16px;overflow-x:auto}
.tabs a,.tabs button{display:inline-flex;align-items:center;min-height:48px;padding:0 16px;border:0;background:none;color:var(--slate);font-weight:700;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap;border-radius:0}
.tabs a:hover,.tabs button:hover{color:var(--blue);text-decoration:none}
.tabs .active{color:var(--blue);border-bottom-color:var(--blue-ocean);font-weight:800}
@media (max-width:700px){.tabs:not(.ntabs){flex-wrap:wrap;gap:6px;border-bottom:0;overflow:visible}.tabs:not(.ntabs) a,.tabs:not(.ntabs) button{min-height:44px;padding:0 14px;border:1px solid var(--line-strong);border-radius:999px;margin:0;background:#fff}.tabs:not(.ntabs) .active{background:var(--blue);border-color:var(--blue);color:#fff}}
td.ng{color:var(--ng);font-weight:700}
/* 承認画面の判断カード（開いて3秒で決めるための5項目） */
.judge{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:10px 0 14px}
@media (max-width:900px){.judge{grid-template-columns:repeat(2,1fr)}}
.judge .j{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-width:0}
.judge .j .k{font-size:13.5px;color:var(--muted);font-weight:700}.judge .j .v{font-size:17px;font-weight:800;color:var(--ink);margin-top:2px;word-break:break-word;line-height:1.4}
.judge .j .v.small{font-size:14px;font-weight:600}.judge .j.warn{background:var(--orange-soft);border-color:var(--orange-line)}.judge .j.ng{background:var(--ng-soft);border-color:#F3B8B2}
.inp.need{border-color:var(--ng);box-shadow:0 0 0 3px var(--ng-soft)}
/* 通知文面のイベントタブ（44px のピル。「誰に：いつ」で表示） */
.tabs.ntabs,.ntabs{flex-wrap:wrap;gap:8px;border-bottom:0;margin:8px 0 14px;overflow:visible}
.ntabs a,.ntabs button{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line-strong);background:#fff;color:var(--ink);font-size:14px;margin:0}
.ntabs .active,.ntabs a.active,.ntabs button.active{background:var(--blue);border-color:var(--blue);color:#fff}
.npane{border:1px solid var(--line);border-radius:12px;padding:18px;background:#F9FBFE}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.chip{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:700;padding:0 12px;border-radius:999px;border:1px solid #A9C2EE;background:var(--blue-soft);color:var(--blue);cursor:pointer}.chip:hover{background:#DCE8FA}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.filters .field{margin:0;min-width:150px}
.kv{display:grid;grid-template-columns:200px 1fr;gap:10px 16px;font-size:15px}
.kv dt{color:var(--muted);font-weight:700;font-size:14px;padding-top:2px}.kv dd{margin:0;white-space:pre-wrap;word-break:break-word;color:var(--ink)}
@media (max-width:600px){.kv{grid-template-columns:1fr}.kv dt{margin-top:6px}}
.pill{display:inline-flex;align-items:center;gap:6px;min-height:32px;background:var(--blue-soft);color:var(--blue);padding:2px 12px;border-radius:999px;font-size:13.5px;font-weight:700}
.pill.gray{background:var(--gray-soft);color:var(--slate)}.pill .x{cursor:pointer;opacity:.7;min-width:24px;min-height:24px;display:inline-grid;place-items:center;text-align:center;font-weight:800;border-radius:6px}.pill .x:hover{opacity:1;background:rgba(20,80,196,.1)}
/* 枠なしの fieldset（ラジオのまとまりに見出しを付ける） */
.fset{border:0;padding:0;margin:0 0 6px;min-width:0}.fset legend{padding:0;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:2px}
/* 申請カタログのカード（名前・説明・承認ルート・お気に入りの星） */
.formcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;cursor:pointer;position:relative;transition:.15s;display:flex;flex-direction:column;gap:6px;min-height:132px}
.formcard:hover{border-color:var(--blue-line);box-shadow:0 4px 14px rgba(20,50,120,.10);transform:translateY(-1px)}
.formcard .cat{font-size:13.5px;color:var(--blue);font-weight:700}
.formcard .nm{font-weight:800;font-size:16px;color:var(--ink);padding-right:44px;line-height:1.45}
.formcard .nm a{display:flex;align-items:center;min-height:40px;color:var(--ink)}.formcard .nm a:hover{color:var(--blue)}
.formcard .ds{font-size:14px;color:var(--slate);flex:1;line-height:1.6}
.formcard .route{font-size:13.5px;font-weight:700;color:var(--blue);line-height:1.5}
.formcard .star{position:absolute;top:8px;right:8px;width:44px;height:44px;display:grid;place-items:center;font-size:22px;color:#8794A8;cursor:pointer;border-radius:10px}.formcard .star.on{color:var(--orange-icon)}
.fav{position:absolute;top:8px;right:8px;width:44px;height:44px;border:0;background:transparent;color:#8794A8;cursor:pointer;display:grid;place-items:center;border-radius:10px;padding:0}
.fav:hover{background:var(--bg);color:var(--orange-icon)}.fav.on{color:var(--orange-icon)}
/* 申請する: カテゴリのチップナビとカテゴリ見出し */
.catnav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.catchip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:999px;background:#fff;border:1px solid var(--line-strong);color:var(--ink);font-weight:700;text-decoration:none;cursor:pointer}
.catchip:hover{background:var(--blue-soft);border-color:var(--blue-line);color:var(--blue);text-decoration:none}
.catchip.primary,.catchip.active{background:var(--blue);border-color:var(--blue);color:#fff}
.catchip .cnt{font-size:13.5px;font-weight:700;opacity:.85}
.catsec{display:flex;flex-direction:column;gap:12px;margin-top:22px;scroll-margin-top:84px}
.cathead{display:flex;align-items:center;gap:12px}
.cathead .ci{width:40px;height:40px;border-radius:10px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;flex:none}
.cathead .ci.fav,.cathead .ci.orange{background:var(--orange-soft);color:var(--orange-icon)}
.cathead h2{margin:0;font-size:20px}.cathead p,.cathead .cd{margin:0;font-size:14px;color:var(--slate)}
/* 設定ページのチップナビ（基本 / Teams 連携 / …）と下部の保存バー */
.subnav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.subnav a,.subnav button{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;background:#fff;border:1px solid var(--line-strong);color:var(--ink);font-weight:700;text-decoration:none;cursor:pointer}
.subnav a:hover,.subnav button:hover,.subnav .active{background:var(--blue-soft);border-color:var(--blue-line);color:var(--blue);text-decoration:none}
section[id],.card[id]{scroll-margin-top:84px}
.savebar{position:sticky;bottom:12px;z-index:15;display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px 18px;margin-top:18px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 -2px 14px rgba(20,50,120,.10)}
.savebar .msg{font-size:14px;color:var(--muted)}.savebar .msg.dirty,.savebar.dirty .msg{color:var(--orange-ink);font-weight:700}
/* お知らせ・注意（左にアイコンを出す。文字色と地色で区別し、意味は文字で書く） */
.alert{position:relative;padding:14px 16px 14px 48px;border-radius:10px;font-size:14px;line-height:1.65;border:1px solid var(--line);background:var(--gray-soft);color:var(--ink)}
.alert::before{content:"";position:absolute;left:16px;top:15px;width:22px;height:22px;background:var(--slate);-webkit-mask:var(--alert-icon) center/contain no-repeat;mask:var(--alert-icon) center/contain no-repeat;--alert-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E")}
.alert.info{background:var(--blue-soft);border-color:var(--blue-line);color:var(--ink)}.alert.info::before{background:var(--blue-sky)}
.alert.warn{background:var(--orange-soft);border-color:var(--orange-line);color:var(--orange-ink)}
.alert.warn::before{background:var(--orange-icon);--alert-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 20h20L12 3z'/%3E%3Cpath d='M12 10v4M12 17v.5'/%3E%3C/svg%3E")}
.alert.ng{background:var(--ng-soft);border-color:#F3B8B2;color:var(--ng)}
.alert.ng::before{background:var(--ng);--alert-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 9l6 6M15 9l-6 6'/%3E%3C/svg%3E")}
.alert.ok{background:var(--ok-soft);border-color:#A9D8BB;color:var(--ok)}
.alert.ok::before{background:var(--ok);--alert-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E")}
.alert.small{font-size:13.5px}.alert a{color:inherit;text-decoration:underline;font-weight:700}
.alert.plain{padding-left:16px}.alert.plain::before{display:none}

/* ---- flow diagram（承認ルート図）---- */
.flow{display:flex;align-items:stretch;gap:0;overflow-x:auto;padding:12px 4px}
.flow .node{min-width:170px;max-width:240px;border:2px solid var(--line-strong);border-radius:14px;padding:12px 14px;background:#fff;font-size:14px;color:var(--slate);line-height:1.5}
.flow .node .nm{font-weight:800;font-size:15px;color:var(--ink);margin-bottom:4px;line-height:1.4}
.flow .node .ap{color:var(--slate);line-height:1.5;font-size:13.5px}
.flow .node .ap b{color:var(--ink);font-weight:700}
.flow .node.active{border-color:var(--blue);background:var(--blue-soft);box-shadow:0 0 0 4px rgba(20,80,196,.14)}
.flow .node.done{border-color:var(--ok);background:var(--ok-soft)}
.flow .node.skipped{border-style:dashed;border-color:#8794A8;color:var(--muted);background:#F0F3F8}
.flow .node.rejected{border-color:var(--ng);background:var(--ng-soft)}
.flow .node.returned{border-color:var(--orange-icon);background:var(--warn-soft)}
.flow .node.start,.flow .node.end{align-self:center;min-height:48px;min-width:84px;max-width:110px;padding:8px 14px;border-radius:999px;text-align:center;display:grid;place-items:center;font-weight:800;font-size:15px;color:#fff;background:var(--blue);border-color:var(--blue)}
.flow .node.end.approved{background:var(--ok);border-color:var(--ok)}.flow .node.end.rejected{background:var(--ng);border-color:var(--ng)}.flow .node.end.pending{background:var(--muted);border-color:var(--muted)}
.flow .arrow{display:flex;align-items:center;align-self:center;flex:none;color:#8FA7D6;padding:0 2px;font-size:0;line-height:0}
.flow .arrow::before{content:"";display:block;width:26px;height:3px;background:#8FA7D6;border-radius:2px}
.flow .arrow svg{margin-left:-8px}
.flow .arrow:not(:has(svg))::after{content:"";display:block;width:9px;height:9px;border-top:3px solid #8FA7D6;border-right:3px solid #8FA7D6;transform:rotate(45deg);margin-left:-9px}
.flow .stage{display:flex;flex-direction:column;gap:10px;justify-content:center}
.flow .stage.par{border:1px dashed var(--blue-line);border-radius:14px;padding:12px 10px 10px;background:#FBFCFF;position:relative;margin-top:8px}
.flow .stage.par::before{content:"並列";position:absolute;top:-11px;left:12px;background:#fff;color:var(--blue);font-size:13.5px;font-weight:800;padding:0 8px;line-height:1.5;border-radius:6px}
.flow .lane{display:flex;align-items:center;gap:0}
.flow .lane .ln{font-size:13.5px;color:var(--blue);font-weight:800;background:var(--blue-soft);border-radius:6px;padding:2px 8px;margin-right:8px;white-space:nowrap}
.flow .mode{display:inline-block;font-size:13.5px;font-weight:700;padding:0 8px;border-radius:6px;background:var(--gray-soft);color:var(--slate);margin-left:6px;line-height:1.6;vertical-align:middle}
.flow .mode.AND{background:var(--orange-soft);color:var(--orange-ink)}
.flow .node .no{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--blue);color:#fff;font-size:13.5px;font-weight:800;margin-right:6px;vertical-align:middle;line-height:1}
.flow .node.skipped .no{background:#8794A8}
.flow .node .how{font-size:13.5px;color:var(--slate);margin:2px 0 4px}.flow .node .how b{color:var(--orange-ink)}
.flow .node .who{font-size:13.5px;color:var(--ink);font-weight:700}
.flow .node .always{margin-top:8px;font-size:13.5px;color:var(--muted)}
.flow.sim .node{max-width:280px}
.defpv{margin-bottom:8px}
.flow .node.def{cursor:pointer;text-align:left;font:inherit;appearance:none;-webkit-appearance:none;display:block;width:auto}
.flow .node.def:focus-visible{outline:2px solid var(--blue-strong);outline-offset:2px}
.flow .node.def:hover{border-color:var(--blue);box-shadow:0 0 0 3px rgba(20,80,196,.12)}
.flow .node.def.cond{border-style:dashed;border-color:var(--orange-icon)}
.flow .node.def.muted{color:var(--muted);border-style:dashed}
.flow .node .cnd,.flow .stage.par>.cnd{margin-top:8px;font-size:13.5px;font-weight:700;color:var(--orange-ink);background:var(--orange-soft);border-radius:8px;padding:3px 10px;display:inline-block;max-width:100%;line-height:1.5}
.flow .stage.par>.cnd{margin:0 0 6px;align-self:flex-start}
.steprow.flash{animation:nfflash 1.6s ease}
@keyframes nfflash{0%{box-shadow:0 0 0 4px rgba(20,80,196,.35)}100%{box-shadow:0 0 0 0 rgba(20,80,196,0)}}
.tstat{display:inline-block;font-size:13.5px;font-weight:700;padding:0 7px;border-radius:6px;background:var(--gray-soft);color:var(--slate);margin-left:6px;line-height:1.6}
.tstat.approved,.tstat.auto{background:var(--ok-soft);color:var(--ok)}.tstat.pending{background:var(--blue-soft);color:var(--blue)}.tstat.rejected{background:var(--ng-soft);color:var(--ng)}.tstat.returned{background:var(--warn-soft);color:var(--warn)}
/* 図の見方（全画面表示の凡例） */
.legend{display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--slate)}
.legend .lt{font-weight:800;color:var(--ink)}
.legend .li{display:flex;align-items:center;gap:10px}
.legend .sw{width:36px;height:22px;border:2px solid var(--blue);border-radius:6px;background:#fff;flex:none}
.legend .sw.cond{border-style:dashed;border-color:var(--orange-icon)}.legend .sw.skip{border-color:#8794A8;background:#F0F3F8}
/* 申請詳細の凡例（ルート図の node の色と同じ） */
.legend .sw.active{border-color:var(--blue);background:var(--blue-soft)}.legend .sw.done{border-color:var(--ok);background:var(--ok-soft)}
.legend .sw.returned{border-color:var(--orange-icon);background:var(--warn-soft)}.legend .sw.rejected{border-color:var(--ng);background:var(--ng-soft)}

/* ---- 全画面表示（ルート図などを広く見る）---- */
html.fs-open{overflow:hidden}
.fs{position:fixed;inset:0;z-index:300;background:rgba(27,42,74,.55);padding:16px;display:flex}
.fs .fswin{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg);border-radius:14px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.fshead{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 24px;background:#fff;border-bottom:1px solid var(--line)}
.fshead h2,.fshead .fstitle{margin:0;font-size:22px;color:var(--blue);flex:1 1 240px;min-width:0;line-height:1.4}
.fstools{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-left:auto}
.fshint{flex-basis:100%;padding-top:2px}
.fszoom{display:inline-flex;align-items:stretch;border:1px solid var(--line-strong);border-radius:10px;overflow:hidden;background:#fff}
.fszoom .fszb{width:44px;height:44px;border:0;background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0}
.fszoom .fszb:hover{background:var(--blue-soft);color:var(--blue)}
.fszoom .fszoomv{min-width:64px;height:44px;border:0;border-left:1px solid var(--line-strong);border-right:1px solid var(--line-strong);background:#fff;font-weight:700;color:var(--ink);cursor:pointer;padding:0 8px}
.fszoom .fszoomv:hover{background:var(--blue-soft)}
.fsbody{flex:1;overflow:auto;padding:24px;min-height:0}
.fsbody .flow{overflow:visible;width:max-content;max-width:none;margin:0 auto;padding:12px 12px 8px}
.fsbody .fsnote{max-width:1180px;margin:24px auto 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.fstoggle{display:inline-flex;border:1px solid var(--line-strong);border-radius:10px;overflow:hidden;background:#fff}
.fstoggle button{min-height:44px;padding:0 16px;border:0;background:#fff;color:var(--ink);font-weight:700;cursor:pointer}
.fstoggle button.active{background:var(--blue);color:#fff}
.fsbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;padding:10px 24px;background:#fff;border-bottom:1px solid var(--line);font-size:14px;margin:-24px -24px 24px}
.fsbar .field{margin:0;flex-direction:row;align-items:center;gap:8px}.fsbar .inp{min-height:40px;width:auto}
@media (max-width:700px){.fs{padding:0}.fs .fswin{border-radius:0}.fshead{padding:10px 16px}.fsbody{padding:16px}.fsbar{margin:-16px -16px 16px;padding:10px 16px}}

/* ---- timeline / comments ---- */
.tl{list-style:none;margin:0;padding:0 0 0 18px;border-left:2px solid var(--line)}
.tl li{position:relative;padding:0 0 14px 14px;font-size:14px}
.tl li::before{content:"";position:absolute;left:-24px;top:7px;width:10px;height:10px;border-radius:50%;background:var(--blue);border:2px solid #fff;box-shadow:0 0 0 2px var(--blue-line)}
.tl li b{color:var(--ink)}
.tl li .t{color:var(--muted);font-size:13.5px}
.comment{padding:10px 12px;border-radius:10px;background:var(--bg);margin-bottom:8px;font-size:14px}
.comment .who{font-weight:700;font-size:14px;color:var(--ink)}.comment .when{color:var(--muted);font-size:13.5px;margin-left:8px}

/* ---- notification panel / modal / toast ---- */
.dropdown{position:absolute;right:0;top:52px;width:400px;max-width:calc(100vw - 32px);max-height:520px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-pop);z-index:60}
@media (max-width:640px){.dropdown{position:fixed;left:16px;right:16px;top:72px;width:auto;max-width:none;max-height:calc(100vh - 88px)}}
.dropdown .hd{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);font-weight:700;color:var(--ink)}
.notif{padding:10px 14px;border-bottom:1px solid var(--row);cursor:pointer;font-size:14px}
.notif:hover{background:var(--bg)}.notif.unread{background:var(--blue-soft)}
.notif .t{font-weight:700;color:var(--ink)}.notif .b{color:var(--slate);font-size:13.5px}.notif .w{color:var(--muted);font-size:13.5px}
.modal-bg{position:fixed;inset:0;background:rgba(27,42,74,.5);display:grid;place-items:center;z-index:100;padding:16px}
.modal{background:#fff;border-radius:14px;width:100%;max-width:640px;max-height:92vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal.wide{max-width:960px}
.modal .mh{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);font-weight:800;font-size:17px;color:var(--ink)}
.modal .mb{padding:18px}.modal .mb p{margin:0 0 10px}.modal .mf{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;padding:12px 18px;border-top:1px solid var(--line);background:var(--bg);border-radius:0 0 14px 14px}
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:400;max-width:calc(100vw - 32px)}
.toastmsg{background:var(--ink);color:#fff;padding:12px 18px;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.25);font-weight:700;animation:up .2s}
.toastmsg.ng{background:var(--ng)}.toastmsg.ok{background:var(--ok)}
@keyframes up{from{opacity:0;transform:translateY(8px)}to{opacity:1}}

/* ---- login（白カード・ロゴ 44px・入力 44px・ボタン幅 100%）---- */
.login{min-height:100vh;display:grid;place-items:center;background:var(--bg);padding:16px}
.login .box{width:100%;max-width:420px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 30px rgba(20,50,120,.10);padding:32px 28px}
.login .brand{color:var(--blue);padding:0 0 10px;font-size:22px}.login .brand .logo{width:44px;height:44px}.login .brand .logo img{width:44px;height:44px}
.login .brand small{font-size:13.5px}
.login p.lead{color:var(--slate);margin:0 0 20px}
.login .btn{width:100%;justify-content:center}
.login p{line-height:1.7}

/* ---- designer（フォーム設計画面。密な行だけ 36px/32px を許容）---- */
.designer{display:grid;grid-template-columns:1fr 420px;gap:16px}
@media (max-width:1100px){.designer{grid-template-columns:1fr}}
.designer .card.sticky{position:sticky;top:76px}
.frow{display:grid;grid-template-columns:32px 1fr 1.3fr 1fr 110px;gap:6px;align-items:center;padding:6px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
.frow>:nth-child(5){grid-column:2/-1;grid-row:2}.frow>:nth-child(6){grid-column:5;grid-row:1}.frow>:first-child{grid-row:1/3;align-self:start;padding-top:8px}
.frow .chk{white-space:nowrap}.frow .chk.small{min-height:36px}.frow .h:empty{display:none}
@media (max-width:700px){.frow{grid-template-columns:1fr 1fr;padding:10px 0}.frow>:first-child{grid-column:1/-1;grid-row:auto;padding-top:0}.frow>:nth-child(5),.frow>:nth-child(6){grid-column:1/-1;grid-row:auto}}
.frow .inp{min-height:36px;padding:0 8px;font-size:13.5px}
.frow .h{font-weight:700;color:var(--muted)}
.steprow{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px;background:#fff}
.steprow.par{border-color:var(--blue-line);background:#FBFCFF}
.steprow .hd{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.steprow .hd .inp{max-width:220px;min-height:36px;padding:0 8px}
.steprow .body{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.steprow .chk{min-height:40px;gap:8px;font-size:14px;flex-wrap:wrap;white-space:nowrap}.steprow .chk .inp{flex:1 1 200px;max-width:100%}.steprow .chk input[type=checkbox],.steprow .chk input[type=radio]{width:20px;height:20px}
.branch{border-left:3px solid var(--blue-line);padding-left:10px;margin:6px 0}
.apchips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.cond{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:13.5px}
.cond .inp{max-width:160px;min-height:36px;padding:0 8px;font-size:13.5px}
.orgtree{padding-left:0;margin:0}
.orgtree li{list-style:none;padding:4px 0}
.orgtree ul{padding-left:18px;margin:0;border-left:1px dashed var(--line)}
.orgtree .d{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:3px 10px;border-radius:8px}
.orgtree .d:hover{background:var(--blue-soft)}
.orgtree .d b{font-weight:700;color:var(--ink)}
.chart-bar{display:flex;align-items:center;gap:8px;font-size:13.5px;margin-bottom:6px}
.chart-bar .lbl{width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chart-bar .bar{height:14px;background:var(--blue-ocean);border-radius:4px;min-width:2px}
.chart-bar .bar.warn{background:var(--warn)}

/* ---- print ---- */
@media print{
  .side,.topbar,.no-print,#toast,#modal-root,.savebar,.subnav,.catnav,.menu-toggle{display:none!important}
  .shell{display:block}.content{padding:0;max-width:none}
  .card{box-shadow:none;border-color:#999;break-inside:avoid}
  body{background:#fff;font-size:13px;color:#000}
  .flow{overflow:visible;flex-wrap:wrap}
  /* 全画面表示を開いているときは、その中身（ルート図）だけを印刷する */
  html.fs-open body>*:not(#fs-root){display:none!important}
  html.fs-open .fs{position:static;background:none;padding:0;display:block}
  html.fs-open .fs .fswin{box-shadow:none;border-radius:0;background:#fff;display:block}
  html.fs-open .fstools{display:none!important}
  html.fs-open .fshead{padding:0 0 8px;border-bottom:1px solid #999}
  html.fs-open .fsbody{overflow:visible;padding:8px 0;zoom:1!important}
  html.fs-open .fsbody .flow{width:auto;margin:0}
}

/* ---- 経費サマリー ---- */
.sum-tiles{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.sum-tiles{grid-template-columns:repeat(2,1fr)}}
.tile .n.sum-money{font-size:24px}
.tbl.sum th.right,.tbl.sum td.right{white-space:nowrap;font-variant-numeric:tabular-nums}
.tbl.sum tr.sum-dept th{background:var(--blue-soft);color:var(--blue);text-align:left;font-size:15px;padding:10px}
.tbl.sum tr.sum-dept td{background:var(--blue-soft);font-weight:700;color:var(--ink)}
.tbl.sum tfoot tr.sum-total th,.tbl.sum tfoot tr.sum-total td{border-top:2px solid var(--line-strong);font-weight:800;color:var(--ink);background:#fff}
.tbl.sum tbody td:first-child{padding-left:18px}

/* ---- designer simplified ---- */
.frow{grid-template-columns:32px minmax(0,1.6fr) minmax(0,1fr) 84px 110px}
.frow>:nth-child(5){grid-column:5;grid-row:1}.frow>:nth-child(6){grid-column:2/-1;grid-row:2}.frow .fx{grid-column:2/-1;grid-row:2;display:flex;flex-direction:column;gap:6px}
.frow .fx:empty{display:none}.frow.fh>:first-child{grid-row:1}
.frow .fl{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.frow .fl .inp{flex:1 1 160px}
details.adv{font-size:13.5px}details.adv>summary{cursor:pointer;color:var(--blue);font-weight:700;min-height:36px;display:flex;align-items:center;gap:6px;list-style:none}
details.adv>summary::before{content:"";width:0;height:0;border:5px solid transparent;border-left:7px solid var(--blue);display:inline-block}
details.adv[open]>summary::before{transform:rotate(90deg)}details.adv>summary::-webkit-details-marker{display:none}
details.adv .advbody{padding:8px 10px;border:1px dashed var(--line);border-radius:8px;background:#FAFBFE;gap:10px 16px}
.steprow .stag{padding:2px 8px;border-radius:999px;background:var(--gray-soft)}
@media (max-width:700px){.frow{grid-template-columns:1fr 1fr}.frow>:nth-child(5),.frow>:nth-child(6),.frow .fx{grid-column:1/-1;grid-row:auto}}