/* 給与計算システム。使うのは社長1名。文字は大きめ、色は役割があるものだけ。
   操作色=紺 / 注意=橙 / 誤り=赤 / 自動で出した値=灰 */
:root {
  --ink: #1d232b;
  --muted: #5b6673;
  --line: #d5dbe1;
  --bg: #f6f7f9;
  --paper: #fff;
  --action: #1f4e8c;
  --warn: #9a5b00;
  --warn-bg: #fff4e0;
  --error: #b3261e;
  --error-bg: #fdecea;
  --ok: #1e6b3a;
  font-size: 18px;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif; color: var(--ink); background: var(--bg); line-height: 1.6; }
button, input, select { font: inherit; }

.app-header { position: sticky; top: 0; z-index: 10; background: var(--paper); border-bottom: 1px solid var(--line); padding: 8px 16px; display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
.brand { font-weight: 700; font-size: 1.2rem; }
.pickers { display: flex; gap: 16px; }
.pickers label { display: flex; gap: 8px; align-items: center; }
.pickers input, .pickers select { min-height: 44px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.tabs { display: flex; gap: 4px; margin-left: auto; }
.tabs a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 6px; color: var(--ink); text-decoration: none; }
.tabs a[aria-current="page"] { background: var(--action); color: #fff; }

main { padding: 16px; max-width: 1400px; margin: 0 auto; }
h1 { font-size: 1.4rem; margin: 8px 0 16px; }
h2 { font-size: 1.15rem; margin: 24px 0 8px; }
.note { color: var(--muted); font-size: 0.9rem; }

.flash { position: fixed; right: 16px; bottom: 16px; z-index: 20; max-width: 480px; }
.flash .msg { padding: 12px 16px; border-radius: 8px; margin-top: 8px; background: var(--ink); color: #fff; }
.flash .msg.error { background: var(--error); }

.btn { min-height: 48px; padding: 0 20px; border-radius: 6px; border: 1px solid var(--action); background: var(--action); color: #fff; cursor: pointer; }
.btn.secondary { background: #fff; color: var(--action); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-small { min-height: 36px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.toolbar .dirty { color: var(--warn); font-weight: 700; }

.panel { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.alert { border-radius: 8px; padding: 12px 16px; margin-bottom: 12px; }
.alert.error { background: var(--error-bg); color: var(--error); }
.alert.warn { background: var(--warn-bg); color: var(--warn); }

table { border-collapse: collapse; background: var(--paper); }
th, td { border-bottom: 1px solid var(--line); padding: 4px 6px; text-align: left; vertical-align: middle; }
th { font-weight: 600; font-size: 0.85rem; color: var(--muted); background: #fafbfc; }
/* 勤怠表は枠の中で縦にスクロールし、見出しは枠の上端に固定する（画面上部のヘッダーと重ならない） */
.att-wrap { max-height: calc(100vh - 230px); overflow: auto; padding: 0; }
.att-wrap th { position: sticky; top: 0; z-index: 2; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.auto { color: var(--muted); }

/* 勤怠表 */
.att { width: 100%; }
.att tr.sun td:first-child, .att tr.sun td:nth-child(2) { color: var(--error); font-weight: 700; }
.att tr.sat td:first-child, .att tr.sat td:nth-child(2) { color: var(--action); }
.att input.t { width: 4.6em; min-height: 40px; text-align: center; border: 1px solid var(--line); border-radius: 4px; letter-spacing: 0.05em; }
.att input.t.bad { border-color: var(--error); background: var(--error-bg); }
.att select { min-height: 40px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.att .sales-btn { min-width: 7em; min-height: 40px; text-align: right; border: 1px solid var(--line); border-radius: 4px; background: #fff; cursor: pointer; font-variant-numeric: tabular-nums; }
.att .sales-btn.empty { color: var(--muted); }
.att tr.sales-editor td { background: #f2f6fb; }
.slot { display: inline-flex; gap: 4px; margin: 4px 12px 4px 0; align-items: center; }
.slot input { min-height: 40px; border: 1px solid var(--line); border-radius: 4px; }
.slot input.amt { width: 7em; text-align: right; }
.slot input.memo { width: 8em; }
.badge { display: inline-block; padding: 0 6px; border-radius: 4px; font-size: 0.8rem; }
.badge.included { background: #e7f3ea; color: var(--ok); }
.badge.excluded { background: #eceff2; color: var(--muted); }
.badge.manual { outline: 1px dashed var(--warn); }
.totals td { font-weight: 700; border-top: 2px solid var(--ink); }

/* 明細 */
.slip-grid { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr); gap: 16px; }
.lines { width: 100%; }
.lines td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.lines tr.sum td { font-weight: 700; border-top: 2px solid var(--ink); }
.form-grid { display: grid; grid-template-columns: max-content 1fr; gap: 8px 12px; align-items: center; }
.form-grid input, .form-grid select { min-height: 44px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; max-width: 16em; }
.form-grid .hint { grid-column: 2; color: var(--muted); font-size: 0.85rem; margin-top: -6px; }
.adj input, .adj select { min-height: 40px; border: 1px solid var(--line); border-radius: 4px; }

/* 印刷: 画面の飾りを外し、明細は切り取り枠だけを出す */
@media print {
  body { background: #fff; font-size: 10pt; }
  .no-print { display: none !important; }
  main { padding: 0; max-width: none; }
  .panel { border: none; padding: 0; }
  th { position: static; }
}
.print-only { display: none; }
@media print { .print-only { display: block; } }

/* 給与明細（切り取り用）。給与袋に折らずに入る大きさ。枠の外側に切り取り線 */
.cut-slip { width: 110mm; min-height: 170mm; border: 0.3mm dashed #888; padding: 5mm; margin: 0 auto; font-size: 9pt; line-height: 1.35; page-break-inside: avoid; }
.cut-slip h3 { font-size: 11pt; text-align: center; margin: 0 0 2mm; }
.cut-slip .who { display: flex; justify-content: space-between; margin-bottom: 2mm; }
.cut-slip table { width: 100%; }
.cut-slip td { padding: 0.4mm 1mm; border-bottom: 0.1mm solid #ccc; }
.cut-slip td:last-child { text-align: right; }
.cut-slip .net { font-size: 11pt; font-weight: 700; margin-top: 2mm; display: flex; justify-content: space-between; }

/* 帳票。画面では全部並べ、印刷ボタンで選んだものだけを出す */
.report-wrap { overflow-x: auto; }
.report-table { width: 100%; font-size: 0.9rem; }
.report-table th { position: static; }
.worksheet, .timesheet { margin-bottom: 24px; }
.report-table tr.print-title { display: none; }
@media print { .report-table tr.print-title { display: table-row; } .report-table tr.print-title th { font-size: 11pt; color: var(--ink); background: none; } }
/* 用紙の指定が無い帳票（金種計算・明細）も A4 で余白を取る */
@page { size: A4; margin: 10mm; }
/* 賃金台帳は現行Excelに合わせて B4横（JIS B4 = 257×364mm）。CSS の size: B4 は ISO B4（250×353mm）で
   日本の B4 用紙と違うので、寸法をそのまま書く */
@page b4land { size: 364mm 257mm; margin: 10mm; }
/* 作業明細は現行Excelに合わせて B5縦（JIS B5 = 182×257mm。CSS の size: B5 は ISO B5 で 176×250mm） */
@page b5 { size: 182mm 257mm; margin: 10mm; }
@page a4 { size: A4; margin: 10mm; }
@media print {
  body[class*="print-"] .report-wrap { display: none; }
  body.print-ledger .report-wrap:has(.ledger),
  body.print-kinshu .report-wrap:has(.kinshu),
  body.print-worksheet-all .report-wrap:has(.worksheet-all),
  body.print-timesheet-all .report-wrap:has(.timesheet-all) { display: block; }
  body[class*="print-"] .print-only { display: none; }
  /* B4横は A4横より紙が 1.23 倍広いので、A4横で 8pt だった見え方に合わせて 10pt
     （9名・長い氏名でも幅・高さとも1枚に収まることを印刷PDFで実測） */
  .ledger { page: b4land; font-size: 10pt; }
  .worksheet { page: b5; break-after: page; }
  /* 勤怠は31日分でもA4縦1枚に10ptで収まる（8ptだと紙の半分しか使わず読みにくい） */
  .timesheet { page: a4; break-after: page; font-size: 10pt; }
  /* 画面用の 0.9rem は画面の文字の大きさ（18px）が基準になり、帳票ごとの 8pt が効かなくなるので、印刷では外側に合わせる */
  .report-table, .report-table th { font-size: inherit; line-height: 1.3; }
  .report-table td, .report-table th { padding: 1px 3px; }
  /* 作業明細が2枚目にまたがっても、見出しの行（氏名入り）を各ページの先頭に出す */
  .worksheet > h2 { display: none; }
}