/* 友和テック 勤怠管理。2026-07-28 の画面イメージの色と作法を引き継ぐ（白い紙面・作業着の紺・行36px・横罫1本） */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}

:root{
  --paper:#FFFFFF; --card:#FFFFFF; --card-2:#F4F5F3;
  --ink:#161A18; --ink-2:#565C57; --ink-3:#6F756F;
  --rule:#DFE2DC; --rule-2:#B7BCB4;
  --navy:#1F3D63; --navy-soft:#E7EDF5; --on-navy:#FFFFFF;
  --ok:#2F7A57; --ok-soft:#E6F2EB;
  --warn:#8A5E10; --warn-soft:#F7EFDD;
  --over:#AE3A2B; --over-soft:#FAE7E4;
  --shadow:0 1px 2px rgba(20,24,22,.06), 0 1px 8px rgba(20,24,22,.05);
  --sans:"Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","YuGothic","Meiryo",system-ui,sans-serif;
  --mincho:"Hiragino Mincho ProN","Yu Mincho","YuMincho","MS PMincho",serif;
  --mono:ui-monospace,"Consolas","Menlo","Courier New",monospace;
}

body{
  background:var(--paper); color:var(--ink); font-family:var(--sans);
  font-size:14.5px; line-height:1.7; -webkit-text-size-adjust:100%; font-feature-settings:"palt" 1;
}
a{color:var(--navy)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--navy); outline-offset:2px; border-radius:2px}
.num{font-variant-numeric:tabular-nums}

.band{
  position:sticky; top:0; z-index:50; background:var(--warn-soft); border-bottom:1px solid var(--rule-2);
  padding:6px 16px; font-size:12.5px; display:flex; gap:10px; align-items:center; justify-content:center; text-align:center;
}
.band strong{border:1px solid currentColor; border-radius:2px; padding:1px 7px; font-size:11px; color:var(--warn); letter-spacing:.06em}

.top{
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px 18px; border-bottom:2px solid var(--ink);
}
.brand{font-family:var(--mincho); font-size:19px; font-weight:600; letter-spacing:.02em}
.brand .k{font-size:12px; font-family:var(--sans); color:var(--ink-3); margin-right:8px; letter-spacing:.1em}
.who{display:flex; gap:10px; align-items:center; font-size:13px; color:var(--ink-2)}
.navbtns{display:flex; gap:8px; margin-right:auto; margin-left:12px}
@media print{.navbtns{display:none}}

/* 左メニュー＋本体 */
.admin{display:grid; grid-template-columns:180px 1fr; min-height:calc(100vh - 110px)}
.side{background:var(--card-2); border-right:1px solid var(--rule); padding:12px 0}
.side a{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:9px 16px; font-size:14px; color:var(--ink-2); text-decoration:none; border-left:3px solid transparent;
}
.side a:hover{background:var(--card); color:var(--ink)}
.side a[data-on="1"]{border-left-color:var(--navy); color:var(--ink); font-weight:600; background:var(--card)}
.bdg{font-family:var(--mono); font-size:11px; background:var(--over); color:#fff; border-radius:9px; padding:0 7px; line-height:1.6}
@media (max-width:760px){
  .admin{grid-template-columns:1fr}
  .side{display:flex; gap:7px; overflow-x:auto; padding:9px 10px; border-right:0; border-bottom:1px solid var(--rule)}
  .side a{white-space:nowrap; border:1px solid var(--rule); border-radius:14px; padding:5px 13px; font-size:13px}
  .side a[data-on="1"]{border-color:var(--navy)}
}
.adm-main{min-width:0}

/* 見出し */
.viewhd{
  padding:16px 22px 13px; border-bottom:1px solid var(--rule);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:baseline;
}
.viewhd h1{font-family:var(--mincho); font-size:20px; margin:0; font-weight:600}
.viewhd .sub{font-size:13px; color:var(--ink-2)}
.viewhd .sub b{font-family:var(--mono); color:var(--ink)}
.viewpad{padding:16px 22px 26px}
@media (max-width:640px){.viewpad{padding:13px 13px 20px} .viewhd{padding:13px}}
.secthd{font-size:15px; font-weight:700; margin:22px 0 8px; display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
.secthd .sm{font-size:12.5px; font-weight:400; color:var(--ink-2)}
.panel-note{color:var(--ink-2); font-size:13px; margin:0 0 16px; max-width:70ch; padding-left:12px; border-left:2px solid var(--rule-2)}
.warnstrip{margin:18px 0 0; padding:12px 16px; background:var(--warn-soft); border:1px solid var(--rule); border-radius:3px; font-size:13px; line-height:1.75}
.warnstrip b{color:var(--warn)}
.okstrip{margin:0 0 14px; padding:10px 14px; background:var(--ok-soft); border:1px solid var(--ok); border-radius:3px; font-size:13.5px; color:var(--ok); font-weight:600}
.err{margin:0 0 14px; padding:10px 14px; background:var(--over-soft); border:1px solid var(--over); border-radius:3px; color:var(--over); font-weight:700; font-size:13.5px}
.err ul{margin:4px 0 0; padding-left:20px; font-weight:600}
.hint{font-size:12px; color:var(--ink-3); margin:8px 0 0}
.note{font-size:11.5px; color:var(--ink-3)}
.late{color:var(--warn); font-weight:600}

.datenav{display:flex; gap:6px; align-items:center; flex-wrap:wrap}

/* 知らせ（色＋アイコン＋文字） */
.alert{border:1px solid var(--over); border-left:5px solid var(--over); background:var(--over-soft); border-radius:3px; padding:12px 15px; margin-bottom:10px}
.alert.amb{border-color:var(--warn); background:var(--warn-soft)}
.alert.calm{border-color:var(--rule-2); border-left-color:var(--navy); background:var(--card-2)}
.alert-hd{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.alert .cnt{font-family:var(--mono); font-size:28px; font-weight:700; color:var(--over); line-height:1}
.alert.amb .cnt{color:var(--warn)}
.alert.calm .cnt{color:var(--navy)}
.alert .tx{flex:1; min-width:220px}
.alert .tx b{display:block; font-size:14.5px}
.alert .tx span{font-size:12.5px; color:var(--ink-2)}
.alert ul{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:6px}
.alert li{background:var(--card); border:1px solid var(--rule); border-radius:3px; padding:8px 12px; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.alert li .nm{font-weight:700; min-width:6em}
.alert li .grow{flex:1}
.alert li form{display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin:0}

/* 今日やること（1件1行）と、畳んだ全員の記録 */
.alert.todo{border-color:var(--navy); border-left-color:var(--navy); background:var(--navy-soft)}
.alert.todo .cnt{color:var(--navy)}
.alert ol{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; counter-reset:todo}
.alert ol li::before{counter-increment:todo; content:counter(todo); font-family:var(--mono); font-weight:700; color:var(--navy); min-width:1.3em}
.alert li .grow{min-width:11em; font-size:12.5px; color:var(--ink-2)}
.waitline{margin:10px 0 0; padding:9px 13px; background:var(--card-2); border:1px solid var(--rule); border-left:3px solid var(--rule-2); border-radius:3px; font-size:12.5px; color:var(--ink-2)}
.allrec{margin-top:18px; border:1px solid var(--rule); border-radius:3px; background:var(--card-2)}
.allrec > summary{cursor:pointer; padding:10px 14px; font-weight:700; font-size:14px}
.allrec > summary:hover{color:var(--navy)}
.allrec > *:not(summary){margin:0 14px 14px}

/* 届いた写真（小さく並べる。押すと元の大きさで開く） */
.thumbs{display:flex; gap:6px; flex-wrap:wrap; margin-top:6px}
.thumbs a{display:block; text-decoration:none; color:var(--ink-3, #6f756f)}
.thumbs img{width:76px; height:76px; object-fit:cover; border-radius:4px; border:1px solid var(--rule-2); display:block}
.thumbs .t{display:block; text-align:center; font-size:11px; line-height:1.4; font-family:var(--mono, monospace)}
.thumbs a:hover img{border-color:var(--navy); box-shadow:0 0 0 2px var(--navy)}

/* 表 */
.tblwrap{overflow-x:auto; border:1px solid var(--rule); border-radius:3px; background:var(--card)}
table{border-collapse:collapse; width:100%; min-width:760px; font-size:13.5px}
thead th{
  text-align:left; font-size:11.5px; letter-spacing:.08em; color:var(--ink-3); font-weight:600;
  padding:8px 12px; border-bottom:1px solid var(--rule-2); background:var(--card-2); white-space:nowrap;
  position:sticky; top:0; z-index:1;
}
.nowrap{white-space:nowrap}
.memocol{min-width:11em}
/* 現場の一覧：終わった現場は、ふだんはしまっておく */
.hideclosed tr.retired{display:none}
.tblwrap:not(.hideclosed) tr.onlyhidden{display:none}
/* 押すと並べ替わる見出し（現場の一覧） */
thead th a.sorth{color:var(--navy); text-decoration:underline dotted; text-underline-offset:3px}
thead th a.sorth:hover{text-decoration-style:solid}
thead th[aria-sort] a.sorth{color:var(--ink); text-decoration:none}
tbody td{padding:8px 12px; border-bottom:1px solid var(--rule); vertical-align:top; line-height:1.55}
tbody tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right; font-variant-numeric:tabular-nums; font-family:var(--mono); white-space:nowrap}
tr.dayoff td{color:var(--ink-3); background:var(--card-2)}
tr.fixrow td{background:var(--warn-soft)}
tr.zerorow td{background:var(--over-soft)}
tr.retired td{color:var(--ink-3)}
.seg{display:inline-block; white-space:nowrap}
td.nm{white-space:nowrap}
.seg .t{font-family:var(--mono); color:var(--ink-3); font-size:11.5px; margin-left:6px}
.seg-sub{color:var(--ink-2)}
em.un{font-style:normal; font-size:11px; color:var(--over); border:1px solid currentColor; border-radius:2px; padding:0 4px; margin-left:4px}
.chip{display:inline-block; font-size:11px; padding:1px 7px; border-radius:2px; border:1px solid currentColor; white-space:nowrap}
.chip.emp{color:var(--navy)}
.chip.par{color:var(--warn)}
.code{font-family:var(--mono); font-size:15px; font-weight:700; letter-spacing:.12em; background:var(--navy-soft); padding:1px 8px; border-radius:2px}

.stat{display:inline-flex; align-items:center; gap:5px; font-size:12px; white-space:nowrap}
.stat .g{width:15px; height:15px; border-radius:3px; flex:none; font-size:9px; display:inline-flex; align-items:center; justify-content:center; border:1px solid currentColor; font-family:var(--mono); line-height:1}
.stat.s-bad{color:var(--over)} .stat.s-bad .g{background:var(--over-soft)}
.stat.s-mid{color:var(--warn)} .stat.s-mid .g{background:var(--warn-soft)}
.stat.s-ok{color:var(--ok)} .stat.s-ok .g{background:var(--ok-soft)}
.stat.s-fin{color:var(--ink-3)}

/* 社員の月ページ上部＝一番の数字を大きく */
.summary{padding:18px 22px 16px; border-bottom:1px solid var(--rule); display:flex; gap:24px; flex-wrap:wrap; align-items:flex-start}
.summary .lead{flex:1; min-width:260px; display:flex; gap:18px; align-items:flex-start}
.summary .big{font-family:var(--mono); font-size:clamp(40px,6.5vw,56px); font-weight:700; line-height:.95; letter-spacing:-.04em}
.summary .say .h{font-size:16px; font-weight:700; line-height:1.45; margin-bottom:4px}
.summary .say .d{font-size:13px; color:var(--ink-2); max-width:52ch}
.summary .aside{display:flex; gap:22px; flex-wrap:wrap; border-left:1px solid var(--rule); padding-left:22px}
@media (max-width:700px){.summary .aside{border-left:0; padding-left:0; border-top:1px dotted var(--rule-2); padding-top:12px; width:100%}}
.summary .aside .s .v{font-family:var(--mono); font-size:20px; font-weight:700; display:block}
.summary .aside .s .k{font-size:11px; color:var(--ink-3); display:block}
.v-ok{color:var(--ok)} .v-warn{color:var(--warn)} .v-over{color:var(--over)}

/* 月末の手順 */
.steps{list-style:none; margin:0; padding:0; border:1px solid var(--rule); border-radius:3px}
.steps > li{padding:12px 16px; border-bottom:1px solid var(--rule)}
.steps > li:last-child{border-bottom:0}
.steps .row{display:flex; gap:13px; align-items:center; flex-wrap:wrap}
.steps .gl{width:24px; height:24px; border-radius:50%; flex:none; border:1.5px solid currentColor; display:flex; align-items:center; justify-content:center; font-size:11px; font-family:var(--mono)}
.steps > li[data-st="done"] .row{color:var(--ok)}
.steps > li[data-st="now"]{background:var(--over-soft)}
.steps > li[data-st="now"] .row{color:var(--over)}
.steps > li[data-st="info"] .row{color:var(--navy)}
.steps .tx{flex:1; min-width:180px; color:var(--ink)}
.steps .tx b{display:block; font-size:14.5px}
.steps .tx em{font-style:normal; font-size:12.5px; color:var(--ink-2)}
.steps .cnt{font-family:var(--mono); font-size:22px; font-weight:700}
.steps .detail{margin:8px 0 0 37px; font-size:13px}
.steps .detail li{margin:2px 0}

/* 型の違い */
.twocol{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px}
@media (max-width:700px){.twocol{grid-template-columns:1fr}}
.tcol{border:1px solid var(--rule); border-left:4px solid var(--navy); border-radius:3px; padding:10px 14px; background:var(--card-2)}
.tcol.par{border-left-color:var(--warn)}
.tcol b{display:block; font-size:14px}
.tcol span{font-size:12.5px; color:var(--ink-2)}

/* ボタン・入力 */
.btn{
  appearance:none; cursor:pointer; border-radius:3px; padding:9px 16px; font-size:14px; font-weight:600;
  border:1px solid var(--navy); background:var(--navy); color:#fff; text-decoration:none; display:inline-block;
}
.btn:hover{filter:brightness(1.12)}
.btn:disabled{opacity:.6; cursor:default}
.btn-sm{padding:5px 11px; font-size:12.5px}
.btn-line{
  appearance:none; cursor:pointer; font-size:12.5px; font-weight:600; padding:5px 12px; border-radius:3px;
  border:1px solid var(--rule-2); background:var(--card); color:var(--ink); text-decoration:none; display:inline-block; white-space:nowrap;
}
.btn-line:hover{border-color:var(--navy); color:var(--navy)}
.btn-warn{border-color:var(--warn); color:var(--warn)}
.actions{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:14px}
.field{display:block; margin-bottom:12px}
.label{font-size:11.5px; letter-spacing:.08em; color:var(--ink-3); display:block; margin-bottom:3px}
input[type="text"], input:not([type]), input[type="password"], input[type="date"], input[type="time"], input[type="number"], select, textarea{
  font-size:15px; background:var(--card); border:1px solid var(--rule-2); border-radius:3px; padding:6px 9px; font-variant-numeric:tabular-nums; max-width:100%;
}
textarea{width:100%; min-height:90px}
.inline{display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap}
.inline .field{margin-bottom:0}
fieldset{border:1px solid var(--rule); border-radius:3px; padding:12px 16px 4px; margin:0 0 14px}
legend{font-weight:700; padding:0 6px}
.prov{font-size:11px; color:var(--warn); border:1px solid currentColor; border-radius:2px; padding:0 6px; margin-left:6px; font-weight:600; white-space:nowrap}
.fixed{font-size:11px; color:var(--ok); border:1px solid currentColor; border-radius:2px; padding:0 6px; margin-left:6px; font-weight:600}
.wdays{display:flex; gap:10px; flex-wrap:wrap}
.wdays label{display:flex; gap:4px; align-items:center}

.card{background:var(--card); border:1px solid var(--rule); border-radius:3px; box-shadow:var(--shadow)}
.card-hd{padding:11px 16px; border-bottom:1px solid var(--rule); background:var(--card-2)}
.card-hd h1{font-family:var(--mincho); font-size:18px; margin:0; font-weight:600}

.loginbody{background:var(--card-2)}
.login{max-width:380px; margin:8vh auto 0}
.loginform{padding:18px}
.loginform input{width:100%}
.loginform .btn{width:100%; margin-top:4px; padding:11px}

.foot{border-top:1px solid var(--rule); padding:14px 22px 30px; font-size:12px; color:var(--ink-3)}

.printonly{display:none}
[hidden]{display:none !important}
.folded tr.rest{display:none}
.pickable:not(.folded) tr[data-day]{cursor:pointer}
.pickable:not(.folded) tr[data-day]:hover td{background:rgba(30,58,95,.06)}
@media print{
  .band,.top,.side,.foot,.noprint,.actions{display:none !important}
  .admin{display:block}
  .printonly{display:block; font-family:var(--mincho); font-size:18px; margin:0 0 8px}
  body{font-size:11px}
  table{min-width:0; font-size:10.5px}
  .tblwrap{overflow:visible; border:0}
  thead th{position:static}
  .summary{padding:6px 0}
  .folded tr.rest{display:table-row}
  .thumbs{display:none !important}
  /* 一部分だけ印刷する（app.js の data-print-only）。写しだけを残して、ほかは出さない。A4 の幅に収める */
  body.print-only > *:not(.print-copy){display:none !important}
  body.print-only .print-copy{display:block; width:100%; margin:0; padding:0}
  body.print-only .print-copy .printonly{display:block}
  body.print-only .print-copy .tblwrap{overflow:visible; border:0; margin:0; padding:0}
  body.print-only .print-copy a{color:inherit; text-decoration:none}
  /* 給料用の一覧：罫線つき・列の幅を決めて1人1行（長い注意は折り返す） */
  body.print-only .paylist{width:100%; table-layout:fixed; border-collapse:collapse; font-size:12px}
  body.print-only .paylist th, body.print-only .paylist td{border:1px solid #888; padding:6px 8px; white-space:normal; overflow-wrap:anywhere}
  body.print-only .paylist th{background:#eee}
  body.print-only .paylist .r{text-align:right}
  body.print-only .paylist th:nth-child(1){width:26%}
  body.print-only .paylist th:nth-child(2){width:12%}
  body.print-only .paylist th:nth-child(3){width:15%}
  body.print-only .paylist th:nth-child(4){width:13%}
  body.print-only .paylist th:nth-child(5){width:34%}
}
@page{size:A4; margin:12mm}
/* 現場のページの日ごと：1日1行。押すと1人ずつの内訳が開く（2026-09-29） */
.crew summary{cursor:pointer; list-style-position:inside}
.crew[open] summary{margin-bottom:6px}
.crewtbl{min-width:0; width:100%; font-size:13px; background:var(--card, #f7f7f5)}
.crewtbl td{padding:6px 8px; border-top:1px solid var(--rule, #ddd)}
/* 写真の列：2枚が横に並ぶ幅を取る（2026-09-29） */
th.photocol{min-width:172px}

/* 現場名の報告：名前を直して現場を作る欄（2026-09-30） */
.alert li input.newsite{width:14em; padding:6px 8px; font-size:13px}

/* 元請・工種の一覧（2026-09-30） */
.masters{margin-top:18px}
.masters > .note{padding:0 14px}
.mcols{display:flex; gap:24px; flex-wrap:wrap; padding:6px 14px 14px}
.mcol{flex:1 1 280px}
.mcol h3{font-size:14px; margin:6px 0}
.mlist{list-style:none; margin:0 0 8px; padding:0; border-top:1px solid var(--rule)}
.mlist li{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid var(--rule); font-size:13.5px}
.mlist li.retired span{color:var(--ink-3); text-decoration:line-through}
.mlist form{margin:0}
.alert li select{max-width:11em}

/* テスト用の人の1日を消す（2026-09-30） */
.card.wipe{padding:10px 14px; margin:16px 0; display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-size:13px; border-color:var(--over)}
.rowbtns{display:flex; flex-direction:column; align-items:flex-end; gap:6px}
.rowbtns form{margin:0}
.rowbtns .btn-line{white-space:nowrap}