/* シフト表 — デファクトのブランドカラーで組む。
   ネイビーで締め、シアンを操作の色、オレンジを休みの色に使う。 */

:root{
  color-scheme:light;
  --navy:#0D1B26; --cyan:#00A0C2; --orange:#EA801F;
  --paper:#FFFFFF; --ground:#EEF1F4;
  --ink:#0D1B26; --ink-2:#4A5964; --ink-3:#8A96A0;
  --rule:#DCE1E6; --tint:#F4F7F9;
  --rest:#E9EDF0; --sat:#F1F6FA; --sun:#FBF1EC;
  --ok:#1E8E5A; --stop:#C0392B;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Zen Kaku Gothic New",system-ui,sans-serif;
  font-size:15px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

.app{max-width:460px;margin:0 auto;min-height:100%;position:relative;
  display:flex;flex-direction:column;background:var(--paper);
  border-left:1px solid var(--rule);border-right:1px solid var(--rule)}
.view{display:none;flex-direction:column;flex:1}
.view.on{display:flex}
.body{flex:1;padding:14px 12px 80px}
.empty{color:var(--ink-3);font-size:13px;text-align:center;padding:44px 8px}
[hidden]{display:none !important}

/* ---------- 名前を選ぶ ---------- */
.pick{flex:1;display:flex;flex-direction:column;justify-content:center;padding:34px 22px}
.brand{font-weight:900;font-size:23px;border-bottom:3px solid var(--navy);padding-bottom:9px}
.brand small{display:block;font-weight:700;font-size:10px;letter-spacing:.22em;
  color:var(--cyan);margin-bottom:4px}
.pick p{color:var(--ink-3);font-size:12.5px;margin:12px 0 14px}
.names{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.names button{appearance:none;cursor:pointer;text-align:left;display:flex;align-items:center;gap:11px;
  background:transparent;border:0;border-bottom:1px solid var(--rule);padding:15px 2px;
  font-weight:700;font-size:17px}
.names button:hover{background:var(--tint)}
.names .arw{margin-left:auto;color:var(--cyan);font-size:13px}

/* ---------- 見出し帯 ---------- */
.bar{background:var(--navy);color:#fff;padding:11px 12px;flex:none;
  display:flex;align-items:center;gap:8px;position:sticky;top:0;z-index:5}
.who{display:flex;align-items:baseline;gap:5px;min-width:0}
.who b{font-weight:700;font-size:16px;white-space:nowrap}
.who span{font-size:11px;color:#9FB0BC}
.ghost{appearance:none;background:transparent;border:1px solid rgba(255,255,255,.35);
  color:#fff;border-radius:4px;padding:5px 9px;font-size:12px;cursor:pointer;flex:none}
.ghost:hover{background:rgba(255,255,255,.12)}
#share{margin-left:auto}
.ghost.dark{border-color:var(--rule);color:var(--ink-2);margin-top:22px}
.ghost.dark:hover{background:var(--tint)}

.mode{display:none;margin:0;padding:8px 12px;background:#FDF3E8;color:#8A5111;
  font-size:11.5px;border-bottom:1px solid #F0DCC2}
body.editing .mode{display:block}

/* ---------- 月表 ---------- */
.sheet{border:1px solid var(--rule)}
.stamp{margin:0;padding:6px 8px;background:var(--tint);border-bottom:1px solid var(--rule);
  font-size:11px;color:var(--ink-3)}
.stamp.saved{background:#EAF7F0;color:var(--ok);font-weight:700}
.sheet-head{display:none}
.grid{width:100%;border-collapse:collapse;table-layout:fixed}
.grid th,.grid td{border:1px solid var(--rule);padding:0;text-align:center;
  font-weight:400;font-size:12px}
.grid thead th{background:var(--navy);color:#fff;font-weight:700;font-size:11px;
  height:52px;vertical-align:middle;position:sticky;top:41px;z-index:3}
.grid thead .p span{writing-mode:vertical-rl;letter-spacing:.02em;display:inline-block}
.grid thead .p.mine{background:var(--cyan)}
.grid .d{width:52px;background:var(--tint);color:var(--ink-2);
  padding:3px 2px;line-height:1.25;text-align:left}
.grid thead .d,.grid thead .n{background:var(--navy)}
.grid .d b{font-size:14px;font-weight:700;margin-right:2px}
.grid .d i{font-style:normal;font-size:11px}
.grid .d em{display:block;font-style:normal;font-size:9px;color:var(--orange);
  line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grid .n{width:34px;color:var(--ink-3);font-size:11px}
.grid tbody tr{height:32px}
.grid td.c{font-size:11px;font-weight:700;color:var(--ink-3)}
.grid td.c.mine{background-color:#F0FAFC}

/* 予定は「種類=色」「時間帯=塗る位置」で表す。半分だけ塗ると午前・午後が分かる。 */
.grid td.c.kyuka{--mk:#FBEFE2;color:var(--orange)}
.grid td.c.yukyu{--mk:#DFF2F7;color:#00809B}
.grid td.c.fuzai{--mk:#E3E9ED;color:#566774}
.grid td.c.kenshu{--mk:#E1F1E8;color:var(--ok)}
.grid td.c.all{background-image:linear-gradient(var(--mk),var(--mk))}
/* メモがあるマスは右上に小さな三角を付ける */
.grid td.c.has-note{position:relative}
.grid td.c.has-note::after{content:"";position:absolute;top:0;right:0;
  border-style:solid;border-width:0 7px 7px 0;border-color:transparent var(--navy) transparent transparent}
/* 「調整が必要」の印は赤い丸で囲む(紙のシフト表の赤丸に合わせる) */
.grid td.adj{position:relative}
.grid td.adj::before{content:"";position:absolute;inset:2px;border:2px solid var(--stop);border-radius:50%;pointer-events:none}
/* 半日は塗る位置に文字も寄せる。塗りだけだと午前と午後を見分けにくい。 */
.grid td.c.am{background-image:linear-gradient(to bottom,var(--mk) 50%,transparent 50%);
  vertical-align:top;line-height:14px}
.grid td.c.pm{background-image:linear-gradient(to top,var(--mk) 50%,transparent 50%);
  vertical-align:bottom;line-height:14px}
.grid tr.sat .d{background:var(--sat);color:#2A6FA8}
.grid tr.rest .d{background:var(--sun);color:var(--stop)}
.grid tr.rest td.c{background:var(--rest)}
.grid tr.today .d{box-shadow:inset 3px 0 0 var(--cyan)}
.grid tr.today .d b{color:var(--cyan)}
body.editing .grid td.c,body.editing .grid tbody .d{cursor:pointer}
body.editing .grid tr.rest td.c{cursor:default}
body.editing .grid tr:not(.rest) td.c:hover{outline:2px solid var(--cyan);outline-offset:-2px}

.legend{margin:10px 2px 0;color:var(--ink-3);font-size:11px;display:flex;
  align-items:center;gap:5px;flex-wrap:wrap}
.legend i{font-style:normal;display:inline-block;min-width:20px;text-align:center;
  border:1px solid var(--rule);font-size:10px;font-weight:700;margin-left:8px}
.legend i:first-child{margin-left:0}
.legend .k-kyuka{background:#FBEFE2;color:var(--orange)}
.legend .k-yukyu{background:#DFF2F7;color:#00809B}
.legend .k-fuzai{background:#E3E9ED;color:#566774}
.legend .k-kenshu{background:#E1F1E8;color:var(--ok)}
.legend .s-rest{background:var(--rest)}
.legend .s-adj{border:2px solid var(--stop);border-radius:50%;min-width:14px;height:14px}
.legend b{display:block;width:100%;font-weight:400;margin-top:3px}

/* ---------- 自分の予定 ---------- */
.next{border:1px solid var(--rule);border-top:3px solid var(--cyan);padding:16px;margin-bottom:18px}
.next small{display:block;color:var(--ink-3);font-size:11.5px;letter-spacing:.06em}
.next b{display:block;font-size:26px;font-weight:900;line-height:1.3;margin-top:4px}
.next span{color:var(--ink-2);font-size:13px}
h3{font-size:12px;font-weight:700;color:var(--ink-3);letter-spacing:.08em;
  border-bottom:1px solid var(--rule);padding-bottom:6px;margin:22px 0 10px}
.days{list-style:none;margin:0;padding:0}
.days li{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--rule);
  padding:9px 2px;font-size:14px}
.days li b{font-weight:700;min-width:76px}
.days li span{color:var(--ink-3);font-size:12px;margin-left:auto}
.days li.rest{color:var(--ink-3)}

/* ---------- フォーム ---------- */
.form label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-2);margin:0 0 14px}
.form label.check{display:flex;align-items:center;gap:7px}
.form label.check input{width:auto;margin:0}
.form .req{color:var(--stop);font-weight:700;font-size:10.5px;margin-left:4px}
.form input{display:block;width:100%;margin-top:5px;
  background:var(--paper);border:1px solid var(--rule);border-radius:5px;
  padding:10px 11px;font-weight:400;color:var(--ink)}
.form input:focus{border-color:var(--cyan);outline:none}
.err{min-height:22px;color:var(--stop);font-size:12.5px;margin:2px 0 8px}
.ok{background:var(--tint);border-left:3px solid var(--ok);padding:10px 12px;
  font-size:12.5px;color:var(--ink-2);margin:0}
.go{display:block;width:100%;appearance:none;cursor:pointer;border:0;border-radius:5px;
  background:var(--cyan);color:#fff;font-weight:700;font-size:15px;padding:12px 0}
.go:hover{filter:brightness(1.06)}
.go:disabled{opacity:.5;cursor:default}
.roster{list-style:none;margin:0;padding:0}
.roster li{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--rule);
  padding:8px 2px;font-size:13.5px;cursor:pointer}
.roster li:hover{background:var(--tint)}
.roster li code{color:var(--ink-3);font-size:11.5px;margin-left:auto}

/* ---------- 予定を選ぶパネル ---------- */
.picker{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center}
.picker-back{position:absolute;inset:0;background:rgba(13,27,38,.45)}
.picker-box{position:relative;width:100%;max-width:460px;background:var(--paper);
  border-top:3px solid var(--navy);padding:14px 14px 18px}
.picker-head{margin:0 0 12px;font-weight:700;font-size:15px}
.pk-note{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:13px;font-weight:700;color:var(--ink-2)}
.pk-note input{flex:1;border:1px solid var(--rule);border-radius:5px;padding:8px 10px;font-weight:400}
.pk-note input:focus{border-color:var(--cyan);outline:none}
.pk-row{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.pk-row b{flex:none;width:44px;font-size:13px;font-weight:700;color:var(--ink-2)}
.pk{flex:1;appearance:none;cursor:pointer;border:1px solid var(--rule);border-radius:5px;
  padding:11px 0;font-size:14px;font-weight:700;background:var(--paper)}
.pk:hover{filter:brightness(.97)}
.pk.kyuka{border-color:#EFD3B4;background:#FBEFE2;color:var(--orange)}
.pk.yukyu{border-color:#B5DFEA;background:#DFF2F7;color:#00809B}
.pk.fuzai{border-color:#CDD6DC;background:#E3E9ED;color:#566774}
.pk.kenshu{border-color:#BCDFCC;background:#E1F1E8;color:var(--ok)}
.pk.work{width:100%;margin-top:12px;border-color:var(--navy);color:var(--navy)}
.pk.adj{display:block;width:100%;margin-top:8px;border-color:var(--stop);color:var(--stop)}
.picker-close{display:block;width:100%;margin-top:8px;appearance:none;cursor:pointer;
  background:none;border:0;color:var(--ink-3);font-size:12.5px;padding:8px 0}

/* ---------- 下のタブ ---------- */
.tabs{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:460px;
  display:flex;background:var(--paper);border-top:1px solid var(--rule);z-index:6}
.tab{flex:1;appearance:none;background:none;border:0;border-top:3px solid transparent;
  padding:11px 0 13px;font-size:12.5px;font-weight:700;color:var(--ink-3);cursor:pointer}
.tab.on{color:var(--navy);border-top-color:var(--cyan)}

/* ---------- 横向きの表(PC・印刷) ---------- */
/* 縦=従業員 / 横=日。画面が広いときと印刷のときだけ出す。 */
.hscroll{display:none;overflow-x:auto}
.grid-h{min-width:900px}
.grid-h thead th{position:static;height:auto;padding:4px 0;line-height:1.25}
.grid-h .p{width:64px;text-align:left;padding:0 6px;white-space:nowrap;
  background:var(--tint);color:var(--ink-2);font-weight:700;position:sticky;left:0;z-index:2}
.grid-h thead .p{background:var(--navy);color:#fff}
.grid-h .dh b{display:block;font-size:13px}
.grid-h .dh i{display:block;font-style:normal;font-size:10px;font-weight:400}
.grid-h thead .dh.sat{background:#2A6FA8}
.grid-h thead .dh.rest{background:var(--stop)}
.grid-h thead .dh.today{box-shadow:inset 0 -3px 0 var(--cyan)}
.grid-h tbody tr{height:34px}
.grid-h td.c.rest{background:var(--rest)}
.grid-h tr.mine .p{background:var(--cyan);color:#fff}
.grid-h tr.mine td.c:not(.rest){background-color:#F0FAFC}
.grid-h tr.n td{color:var(--ink-3);font-size:11px}
.grid-h tr.n td.rest{background:var(--rest)}
/* 職種ごとの小計と合計(齊藤社長を除く) */
.grid-h tr.n th.p{font-size:11px}
.grid-h tr.n.first > *{border-top:2px solid var(--ink-3)}
.grid-h tr.n.total td,.grid-h tr.n.total th{font-weight:700;color:var(--ink);border-top:2px solid var(--ink-3)}
/* 人ごとの合計(出勤数・休暇数) */
.grid tr.sum th.d{font-size:11px;font-weight:700;vertical-align:middle}
.grid tr.sum td{font-weight:700;color:var(--ink-2);font-size:10px;letter-spacing:-.04em}
.grid tr.sum:not(.sum + .sum) > *{border-top:2px solid var(--ink-3)}
.grid-h .s{width:40px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.grid-h .s:not(.s + .s){border-left:2px solid var(--ink-3)}
body.editing .grid-h td.c,body.editing .grid-h thead .dh{cursor:pointer}
body.editing .grid-h td.c.rest{cursor:default}
body.editing .grid-h td.c:not(.rest):hover{outline:2px solid var(--cyan);outline-offset:-2px}

/* ---------- 有休・稟議・管理のページ ---------- */
/* 管理者でログインしているときだけタブを出す */
.tab.adm{display:none}
body.editing .tab.adm{display:block}
/* 承認者(齊藤社長)でログインしているときだけ「承認」タブを出す */
.tab.apv{display:none}
body.approving .tab.apv{display:block}
.tab i{display:inline-block;min-width:16px;margin-left:3px;padding:0 4px;border-radius:8px;
  background:var(--orange);color:#fff;font-style:normal;font-size:10px;line-height:16px}
body[data-view="v-shonin"] .app,body[data-view="v-shonin"] .tabs{max-width:1100px}

@media (min-width:900px){
  /* PC では入力欄と一覧を左右に並べる */
  body[data-view="v-admin"] .app,body[data-view="v-yukyu"] .app,body[data-view="v-ringi"] .app,
  body[data-view="v-me"] .app{max-width:1100px}
  /* 自分: 稟議書が無い人は予定の欄だけを広げる */
  .me-cols:has(> #meRingi[hidden]){grid-template-columns:minmax(0,1fr)}
  body[data-view="v-admin"] .tabs,body[data-view="v-yukyu"] .tabs,body[data-view="v-ringi"] .tabs{max-width:1100px}
  body[data-view="v-month"] .tabs{max-width:1400px}
  .cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
  .body{padding:18px 24px 90px}
  #loginForm,#setupForm{max-width:420px}
}

@media (min-width:900px){
  body[data-view="v-month"] .app{max-width:1400px}
  body[data-view="v-month"] .grid-v{display:none}
  body[data-view="v-month"] .hscroll{display:block}
}

/* ---------- 印刷(A4横) ---------- */
@media print{
  @page{size:A4 landscape;margin:10mm}
  body{background:#fff;font-size:11px;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .app{max-width:none;border:0}
  .bar,.tabs,.mode,.err{display:none !important}
  .view{display:none !important}
  .view#v-month{display:block !important}
  .body{padding:0}
  .sheet{border:0}
  .sheet-head{display:block;margin-bottom:3mm}
  .stamp{background:#fff;border:0;padding:0 0 2mm;font-size:9px}
  .stamp.saved{color:var(--ink-3);font-weight:400}
  .sheet-head h1{font-size:18px;font-weight:900;margin:0;
    border-bottom:2px solid var(--navy);padding-bottom:4px}
  .sheet-head p{margin:4px 0 0;font-size:10px;color:var(--ink-2)}
  .grid thead th{position:static;background:#fff;color:var(--ink);
    border:1px solid #999;height:auto;padding:4px 0}
  .grid thead .p span{writing-mode:horizontal-tb}
  .grid thead .p.mine{background:#fff}
  .grid th,.grid td{border:1px solid #999;font-size:10px}
  .grid .d{width:64px;background:#fff}
  .grid tbody tr{height:auto}
  .grid td.c{padding:2px 0}
  .grid td.c.mine{background:#fff}
  .grid tr.today .d{box-shadow:none}
  .grid tr.today .d b{color:var(--ink)}
  .grid tr.rest td.c{background:#EEE}
  .picker{display:none !important}
  .legend{margin-top:3mm;font-size:9px}
  .grid .n{color:var(--ink-2)}
  .grid-v{display:none}
  .hscroll{display:block !important;overflow:visible}
  .grid-h{min-width:0;width:100%}
  .grid-h th,.grid-h td{font-size:9px}
  .grid-h .s{width:10mm}
  .grid-h .p{width:15mm;position:static;background:#fff;color:var(--ink);padding:0 1mm}
  .grid-h thead .dh,.grid-h thead .dh.sat,.grid-h thead .dh.rest{background:#fff;color:var(--ink);box-shadow:none}
  .grid-h thead .dh.sat{color:#2A6FA8}
  .grid-h thead .dh.rest{color:var(--stop);background:#EEE}
  .grid-h .dh b{font-size:10px}
  .grid-h .dh i{font-size:8px}
  .grid-h tbody tr{height:7mm}
  .grid-h tr.mine .p{background:#fff;color:var(--ink)}
  .grid-h tr.mine td.c:not(.rest){background-color:#fff}
  .grid-h td.c.rest,.grid-h tr.n td.rest{background:#EEE}
  .sheet{break-inside:avoid}
}

/* 管理: 有休の一覧 */
.yk-bar{display:flex;align-items:center;gap:12px;margin:0 0 6px}
.yk-bar b{font-size:15px}
.yk-bar .ghost.dark{margin-top:0;padding:4px 12px}
.yk-list{list-style:none;margin:0 0 8px;padding:0}
.yk-list li{border-bottom:1px solid var(--rule);padding:8px 2px}
.yk-list li div{display:flex;align-items:center}
.yk-list li div span{margin-left:auto;font-weight:700;color:#00809B}
.yk-list li p{margin:2px 0 0;font-size:12.5px;color:var(--ink-2)}
.yk-list li.none{color:var(--ink-3)}
.yk-list li.none div span{color:var(--ink-3);font-weight:400}

/* 管理: 有給休暇申請書 */
.form select{display:block;width:100%;margin-top:5px;background:var(--paper);
  border:1px solid var(--rule);border-radius:5px;padding:10px 11px;font-weight:400;color:var(--ink)}
.form .two{display:flex;gap:8px}
.form .two label{flex:1}
.req-list li div{gap:8px}
.req-list li div span{font-weight:400;color:var(--ink-2);font-size:12.5px}
.req-list .ghost.dark{margin:0;padding:3px 10px}
.req-list li div{flex-wrap:wrap}
.req-list .acts{margin-left:auto;display:flex;gap:4px}
.req-list .acts .ghost.dark{margin:0}
.ghost.dark.wide{display:block;width:100%;margin-top:8px;padding:9px 0}
.req-sheet{display:none}
.req-done{margin:4px 0 10px}
.rg-items{margin:0 0 14px}
.rg-row{display:grid;grid-template-columns:1fr 84px 52px 78px;gap:5px;align-items:center;margin-bottom:5px}
.form .rg-row input{margin-top:0;padding:8px 8px}
.rg-head span{font-size:11.5px;font-weight:700;color:var(--ink-2)}
.rg-row output{font-size:12px;text-align:right;color:var(--ink-2)}
.form .rg-row .rg-url{grid-column:1 / -1;margin:-1px 0 6px;padding:6px 8px;font-size:12px}
.sn-items a{color:var(--cyan);text-decoration:underline}
.rg-total{text-align:right;margin:6px 0 0;font-size:13px;color:var(--ink-2)}
.rg-total b{font-size:16px;color:var(--ink);margin-left:6px}
.req-done .ok{margin-bottom:8px}

@media print{
  body.print-req .app > :not(#reqSheet){display:none !important}
  body.print-req #reqSheet{display:block !important;color:#000;font-size:14px}
  .req-sheet{position:relative}
  .req-sheet .rq-logo{position:absolute;top:0;left:0;height:20mm;width:auto}
  .req-sheet .rq-date{text-align:right;margin:0 0 14mm;font-size:13px}
  .req-sheet h1{text-align:center;font-size:22px;font-weight:700;letter-spacing:.2em;margin:0 0 12mm}
  .req-sheet table{border-collapse:collapse;width:100%}
  .req-sheet th,.req-sheet td{border:1px solid #000;padding:3mm 4mm;text-align:left;vertical-align:middle}
  .req-sheet th{width:28mm;text-align:center;font-weight:400}
  .rq-who{margin-left:auto;width:62% !important}
  .rq-who td{height:11mm}
  .rq-lead{margin:10mm 0 4mm}
  .rq-body td{height:24mm}
  .rq-body .rq-term td{height:34mm;line-height:2}
  .rq-ok{width:50mm !important;margin:14mm 0 0 auto}
  .rq-ok th{width:25mm;text-align:center;padding:1.5mm 0}
  .rq-ok td{height:22mm}
}

/* 稟議書(物品購入)の印刷 */
@media print{
  .req-sheet .rg-kind{text-align:center;margin:-8mm 0 10mm;font-size:15px}
  .req-sheet .rg-table{margin:10mm 0 6mm}
  .req-sheet .rg-table th{width:auto;padding:2mm}
  .req-sheet .rg-table td{height:10mm}
  .req-sheet .rg-table th:nth-child(2),.req-sheet .rg-table th:nth-child(4){width:32mm}
  .req-sheet .rg-table th:nth-child(3){width:16mm}
  .req-sheet .num{text-align:right}
  .req-sheet .rg-sum th{text-align:right;padding-right:4mm}
  .req-sheet .rq-ok.rg-ok{width:25mm !important}
}

/* 名簿の札。退職者は薄く出す */
.roster li .tag{font-size:11px;border:1px solid var(--rule);border-radius:99px;padding:0 6px;color:var(--ink-2)}
.roster li.off{opacity:.55}
.hint{font-size:12px;color:var(--ink-2);margin:-4px 0 8px}

/* 稟議書の状態と承認 */
.st{font-style:normal;font-size:11px;font-weight:700;padding:1px 7px;border-radius:9px;margin-left:6px;white-space:nowrap}
.st-pending{background:#FDF3E8;color:#8A5111}
.st-approved{background:#EAF7F0;color:var(--ok)}
.st-rejected{background:#FBECEA;color:var(--stop)}
.sn-why{color:var(--stop) !important}
.note{font-size:12px;color:var(--ink-3);margin:0 0 8px}
.apv-box{margin-top:26px}
.apv-box details{margin:4px 0 0}
.apv-box summary{cursor:pointer;font-size:12.5px;color:var(--ink-2);margin-bottom:10px}
.sn-list{list-style:none;margin:0;padding:0}
.sn-list .none{color:var(--ink-3);font-size:13px;padding:10px 2px}
.sn-card{border:1px solid var(--rule);border-top:3px solid var(--orange);padding:12px;margin-bottom:12px}
.sn-head{display:flex;align-items:baseline;margin:0 0 8px}
.sn-head span{margin-left:auto;font-weight:900;font-size:18px}
.sn-items{width:100%;border-collapse:collapse;font-size:12.5px}
.sn-items th,.sn-items td{border-bottom:1px solid var(--rule);padding:5px 4px;text-align:left}
.sn-items th{font-size:11px;color:var(--ink-3);font-weight:700}
.sn-items .num{text-align:right;white-space:nowrap}
.sn-purpose{font-size:13px;color:var(--ink-2);margin:8px 0 0}
.sn-acts{display:flex;gap:8px;margin-top:12px}
.sn-acts .go{flex:2}
.sn-acts .ghost.dark{flex:1;margin:0}
@media print{
  .req-sheet .rg-stamp{text-align:center;font-size:13px;line-height:1.6}
  .req-sheet .rg-link{display:block;font-size:9px;color:#333;word-break:break-all;margin-top:1mm}
}

/* 管理: 遅刻の記録 */
.ck-sum{font-size:12.5px;color:var(--ink-2);margin:0 0 6px}

/* ---------- 依頼(管理者・承認者だけ) ---------- */
.tab.mgr{display:none}
body.editing .tab.mgr,body.approving .tab.mgr{display:block}
.ir-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
.ir-sum div{border:1px solid var(--rule);border-radius:6px;padding:8px 10px;background:var(--tint)}
.ir-sum b{display:block;font-size:22px;line-height:1.2;font-variant-numeric:tabular-nums}
.ir-sum span{font-size:11.5px;color:var(--ink-2)}
.ir-sum .warn{border-color:#F2C4BE;background:#FDF1EF}
.ir-sum .warn b{color:var(--stop)}
.ir-mode{display:flex;border:1px solid var(--rule);border-radius:6px;overflow:hidden;margin-bottom:12px}
.ir-mode button{flex:1;appearance:none;border:0;background:var(--paper);padding:7px 0;font-weight:700;font-size:13px;color:var(--ink-2);cursor:pointer}
.ir-mode button.on{background:var(--navy);color:#fff}
.ir-filter{display:grid;grid-template-columns:1fr 1fr;gap:0 8px}
.ir-filter label{margin-bottom:8px}
.ir-filter label:last-child{grid-column:1 / -1}
.ir-scroll{overflow-x:auto}
.ir-table{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
.ir-table th{background:var(--navy);color:#fff;font-weight:700;font-size:11.5px;text-align:left;padding:5px 6px;white-space:nowrap}
.ir-table td{border-bottom:1px solid var(--rule);padding:7px 6px;vertical-align:top}
.ir-table td.d{white-space:nowrap;font-variant-numeric:tabular-nums}
.ir-table tr.late td.d{color:var(--stop);font-weight:700}
.ir-table small{color:var(--ink-3);margin-left:2px}
.ir-body{display:block;font-size:11.5px;color:var(--ink-2);max-width:28em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st.ir-open{background:#E6F5F9;color:#00718A}
.st.ir-late{background:#FDECEA;color:var(--stop)}
.st.ir-done{background:var(--rest);color:var(--ink-2)}
.st.ir-withdrawn{background:var(--rest);color:var(--ink-3)}
.st.ir-open,.st.ir-late,.st.ir-done,.st.ir-withdrawn{margin-left:0}
.ir-cal{width:100%;border-collapse:collapse;table-layout:fixed;margin-bottom:12px}
.ir-cal th{font-size:11px;color:var(--ink-3);font-weight:700;padding:4px 0}
.ir-cal td{border:1px solid var(--rule);height:58px;vertical-align:top;padding:3px;cursor:pointer;overflow:hidden}
.ir-cal td.pad{background:var(--tint);cursor:default}
.ir-cal td b{font-size:11.5px;font-weight:700}
.ir-cal td.today b{color:#fff;background:var(--cyan);border-radius:9px;padding:0 5px}
.ir-cal td.sel{outline:2px solid var(--navy);outline-offset:-2px}
.ir-cal .ns{display:flex;flex-wrap:wrap;gap:2px;margin-top:2px}
.ir-cal .n{font-style:normal;font-size:10px;font-weight:700;border-radius:8px;padding:0 5px;line-height:15px}
.ir-cal .n.ir-open{background:#E6F5F9;color:#00718A}
.ir-cal .n.ir-late{background:var(--stop);color:#fff}
.ir-cal .n.ir-done,.ir-cal .n.ir-withdrawn{background:var(--rest);color:var(--ink-3)}
.ir-cal .ts{display:none}
@media (min-width:900px){
  body[data-view="v-irai"] .app,body[data-view="v-irai"] .tabs{max-width:1100px}
  .ir-filter{grid-template-columns:1fr 1fr 2fr}
  .ir-filter label:last-child{grid-column:auto}
  .ir-cal td{height:96px}
  .ir-cal .ns{display:none}
  .ir-cal .ts{display:block}
  .ir-cal .t{display:block;font-size:11px;line-height:1.35;margin-top:2px;padding:1px 4px;border-radius:3px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ir-cal .t.ir-open{background:#E6F5F9;color:#00718A}
  .ir-cal .t.ir-late{background:#FDECEA;color:var(--stop);font-weight:700}
  .ir-cal .t.ir-done,.ir-cal .t.ir-withdrawn{background:var(--rest);color:var(--ink-3)}
  .ir-cal .more{display:block;font-size:10.5px;color:var(--ink-3);margin-top:1px}
}

/* ==========================================================================
   部品管理(defacto-kanri)の見た目に寄せる。いずれ1つのシステムにまとめるため、
   先に目を慣らしておく(2026-10-05)。ブロードリーフ風:上のタブ・灰色の帯・
   黄色の入力欄・緑のボタン・罫線の表。画面だけに効かせ、印刷の見た目は変えない。
   ========================================================================== */
@media screen{
  :root{
    --bl-ink:#333; --bl-ink2:#555; --bl-ink3:#999;
    --bl-line:#ccc; --bl-line2:#999;
    --bl-band:#d5d5d5; --bl-tabbar:#e0e0e0; --bl-input:#fef6c0;
    --bl-green-a:#00c546; --bl-green-b:#00b125;
    --bl-gray-a:#ececec; --bl-gray-b:#d5d5d5;
    --bl-tab-a:#858585; --bl-tab-b:#707070;
    --bl-link:#0000ff; --bl-row-alt:#f7f7f7; --bl-hover:#e8f2fd;
  }
  body{background:#fff;color:var(--bl-ink);font-size:14px;line-height:1.5;
    font-family:"Helvetica Neue",Helvetica,Arial,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}
  .app{border:0}

  /* 名前を選ぶ */
  .brand{font-size:22px;font-weight:700;border-bottom-color:var(--bl-green-b)}
  .brand small{color:var(--bl-ink3);font-weight:400;letter-spacing:.15em}
  .names{gap:8px;border-top:0}
  .names button{border:1px solid var(--bl-line2);border-radius:6px;background:linear-gradient(#fff,#f0f0f0);
    padding:12px 14px;font-size:16px;font-weight:400}
  .names button:hover{background:var(--bl-hover)}
  .names .arw{color:#0071d3}

  /* 業務タブを上に(部品管理と同じ並び方) */
  .tabs{top:0;bottom:auto;left:0;right:0;transform:none;width:auto;max-width:none !important;
    background:var(--bl-tabbar);padding:6px 12px 0;gap:6px;border-top:0;border-bottom:3px solid var(--bl-green-b);
    overflow-x:auto;scrollbar-width:none}
  .tab{flex:none;border:0;border-radius:6px 6px 0 0;background:linear-gradient(var(--bl-tab-a),var(--bl-tab-b));
    color:#fff;padding:6px 16px;font-size:14px;font-weight:400;min-width:72px}
  .tab.on{color:#fff;background:linear-gradient(var(--bl-green-a),var(--bl-green-b))}
  .tab i{background:#9b0f0f}
  body:not([data-view="v-pick"]) .app{padding-top:39px}
  .body{padding-bottom:24px}

  /* 画面の見出しは灰色の帯(部品管理の抽出条件の帯) */
  .bar{position:static;background:var(--bl-band);color:var(--bl-ink);margin:8px 12px 0;padding:8px 12px;border-radius:8px}
  .who b{font-size:20px;font-weight:400}
  .who span{color:var(--bl-ink2);font-size:12px}
  .ghost{border:1px solid var(--bl-line2);border-radius:6px;background:linear-gradient(var(--bl-gray-a),var(--bl-gray-b));
    color:var(--bl-ink);padding:3px 12px;font-size:13px}
  .ghost:hover{background:linear-gradient(#f4f4f4,#dcdcdc)}
  .ghost.dark{border-color:var(--bl-line2);color:var(--bl-ink)}
  .mode{background:#fff3cd;color:#7a5200;border-bottom:1px solid var(--bl-line);margin:6px 12px 0;border-radius:6px}

  /* ボタン・入力欄 */
  .go{border:1px solid var(--bl-green-b);border-radius:6px;background:linear-gradient(var(--bl-green-a),var(--bl-green-b));
    color:#fafafa;font-weight:400;font-size:15px;padding:9px 0}
  .form label{font-weight:400;color:var(--bl-ink2);font-size:13px}
  .form input,.form select,.pk-note input{background:var(--bl-input);border:1px solid var(--bl-line2);border-radius:6px;
    padding:6px 8px;font-size:14px;color:var(--bl-ink)}
  .form select{background:#fff}
  .form input:focus,.pk-note input:focus{border-color:#0687f7}
  .ok{background:#fff3cd;border-left:0;border:1px solid #f0dca0;border-radius:6px;color:#7a5200}
  h3{font-size:15px;font-weight:700;color:var(--bl-ink);letter-spacing:0;border-bottom:1px solid var(--bl-line)}

  /* 月表は罫線の表 */
  .sheet{border:1px solid var(--bl-line2)}
  .stamp{background:#fdfdfd;color:var(--bl-ink2);border-bottom:1px solid var(--bl-line)}
  .stamp.saved{background:#e6f4ea;color:#1b6b2c}
  .grid th,.grid td{border-color:var(--bl-line)}
  .grid thead th,.grid thead .d,.grid thead .n,.grid-h thead .p{background:#fdfdfd;color:var(--bl-ink);font-weight:400;
    border:1px solid var(--bl-line)}
  .grid thead th{top:39px}
  .grid thead .p.mine,.grid-h tr.mine .p{background:#e6f4ea;color:#1b6b2c;font-weight:700}
  .grid-h thead .dh.sat{background:#eef4fb;color:#2A6FA8}
  .grid-h thead .dh.rest{background:#fbecea;color:#c00000}
  .grid-h thead .dh.today{box-shadow:inset 0 -3px 0 var(--bl-green-b)}
  .grid tr.today .d{box-shadow:inset 3px 0 0 var(--bl-green-b)}
  .grid tr.today .d b{color:#1b6b2c}
  .grid td.c.mine,.grid-h tr.mine td.c:not(.rest){background-color:#f3faf5}
  body.editing .grid td.c:hover{outline-color:#0687f7}

  /* 一覧 */
  .yk-list li,.roster li,.days li{border-bottom-color:var(--bl-line)}
  .yk-list li:nth-child(even),.roster li:nth-child(even){background:var(--bl-row-alt)}
  .roster li:hover{background:var(--bl-hover)}
  .next{border-color:var(--bl-line);border-top-color:var(--bl-green-b);border-radius:6px}
  .sn-card{border-color:var(--bl-line2);border-top-color:var(--bl-green-b);border-radius:6px}
  .sn-items a{color:var(--bl-link)}

  /* 予定を選ぶパネル */
  /* スマホではタブを詰める(部品管理と同じ) */
  @media (max-width:640px){
    .tab{min-width:0;padding:6px 12px}
  }
  .picker-back{background:rgba(0,0,0,.35)}
  .picker-box{border:1px solid var(--bl-line2);border-top:0;border-radius:8px 8px 0 0}
  .picker-head{background:var(--bl-band);margin:-14px -14px 12px;padding:10px 14px;border-radius:8px 8px 0 0;font-weight:400}
  .pk.work{border-color:var(--bl-line2);background:linear-gradient(var(--bl-gray-a),var(--bl-gray-b));color:var(--bl-ink)}
}

/* 依頼のページも部品管理の見た目に寄せる(集計の枠・切り替え・罫線の表) */
@media screen{
  .ir-sum div{background:#fff;border:1px solid var(--bl-line);border-radius:5px}
  .ir-sum span{color:var(--bl-ink2);font-size:12px}
  .ir-sum b{font-size:17px}
  .ir-sum .warn{border-color:var(--bl-line);background:#fff6f5}
  .ir-sum .warn b{color:#c00000}
  .ir-mode{border:0;gap:6px;background:var(--bl-tabbar);padding:6px 6px 0;border-radius:6px 6px 0 0;
    border-bottom:3px solid var(--bl-green-b)}
  .ir-mode button{flex:none;min-width:96px;border-radius:6px 6px 0 0;background:linear-gradient(var(--bl-tab-a),var(--bl-tab-b));
    color:#fff;font-weight:400;font-size:14px;padding:5px 16px}
  .ir-mode button.on{background:linear-gradient(var(--bl-green-a),var(--bl-green-b));color:#fff}
  .ir-table{border:1px solid var(--bl-line2);font-size:14px}
  .ir-table th{background:#fdfdfd;color:var(--bl-ink);font-weight:400;font-size:13px;text-align:center;
    border:1px solid var(--bl-line);padding:5px 8px}
  .ir-table td{border:1px solid var(--bl-line);padding:4px 8px}
  .ir-table tbody tr:nth-child(even) td{background:var(--bl-row-alt)}
  .ir-table tr.late td.d{color:#c00000}
  .ir-cal{border:1px solid var(--bl-line2)}
  .ir-cal th{background:#fdfdfd;color:var(--bl-ink);font-weight:400;font-size:12px;border:1px solid var(--bl-line)}
  .ir-cal td{border-color:var(--bl-line)}
  .ir-cal td.pad{background:var(--bl-row-alt)}
  .ir-cal td.today b{background:var(--bl-green-b)}
  .ir-cal td.sel{outline-color:#0687f7}
}

/* 稟議・依頼の画面では、シフト表のタブを隠す(app.js の PAGES) */
.tab.off{display:none!important}
a.tab.home{text-decoration:none;text-align:center;color:var(--ink-2)}