/* =========================================================
 * tool.css — 業務ツール共通スタイル(style.css を継承する追加分のみ)
 *   ツールハブのカード / 汎用グリッド(TBGrid) / 結果カード /
 *   使い方・FAQ / 締め報告書(印刷)。
 *   カラー・ボタン・広告枠・ヘッダー等の基本は style.css を流用する。
 * ========================================================= */

/* ========== ツール一覧ハブ ========== */
.tools-intro { max-width: 1060px; margin: 14px auto 0; color: #445; font-size: 13.5px; line-height: 1.7; }
.tool-cat { max-width: 1060px; margin: 20px auto 0; }
.tool-cat > h2 {
  border-left: 4px solid #1a63b0; padding-left: 8px;
  font-size: 17px; margin: 0 0 10px;
}
.tool-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.tool-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #d5dbe2; border-radius: 10px;
  padding: 16px 18px; text-decoration: none; color: inherit;
  transition: box-shadow .15s, border-color .15s;
}
.tool-card:hover { box-shadow: 0 4px 16px rgba(31, 78, 121, .16); border-color: #9cc3e8; }
.tool-card h3 { margin: 0 0 6px; font-size: 15.5px; color: #1f4e79; }
.tool-card p { margin: 0 0 10px; font-size: 13px; line-height: 1.7; color: #556; flex: 1; }
.tool-card .tool-open { color: #1a63b0; font-size: 13px; font-weight: 600; }

/* ========== ツール本体レイアウト ========== */
.tool-section { background: #fff; border: 1px solid #d5dbe2; border-radius: 8px; padding: 14px 16px; margin-top: 12px; }
.tool-section > h2 { font-size: 16px; margin: 0 0 10px; }
.tool-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 760px) { .tool-grid-2 { grid-template-columns: 1fr; } }
.field-row { margin: 8px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.field-row > label { font-weight: 600; min-width: 130px; }
.field-row input[type="number"], .field-row input[type="text"], .field-row input[type="date"] {
  border: 1px solid #b8c2cc; border-radius: 5px; padding: 5px 7px; font-size: 14px;
}
.field-row input[type="number"] { width: 130px; text-align: right; }

/* ========== 汎用グリッド TBGrid ========== */
.tb-grid { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.tb-grid th, .tb-grid td { border: 1px solid #d5dbe2; padding: 5px 8px; text-align: left; }
.tb-grid thead th { background: #eef2f7; font-weight: 600; text-align: center; white-space: nowrap; }
.tb-grid td.tb-num, .tb-grid th.tb-num { text-align: right; }
.tb-grid td.tb-readonly { background: #f8fafc; color: #333; }
.tb-grid input, .tb-grid select {
  width: 100%; box-sizing: border-box;
  border: 1px solid transparent; background: transparent;
  font-size: 13.5px; padding: 3px 4px;
}
.tb-grid td.tb-num input { text-align: right; }
.tb-grid input:hover, .tb-grid select:hover { border-color: #c3cdd8; background: #fff; }
.tb-grid input:focus, .tb-grid select:focus { border-color: #1a63b0; background: #fff; outline: none; }
.tb-grid .tb-ops-col { width: 40px; }
.tb-grid td.tb-ops { text-align: center; }
.tb-grid .tb-del { border: none; background: none; color: #c0392b; cursor: pointer; font-size: 15px; }
.tb-grid .tb-add-cell { text-align: left; background: #f6f9fc; }
.tb-grid .tb-add { padding: 4px 12px; font-size: 13px; }

/* ========== 結果カード(過不足など) ========== */
.result-cards { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.result-card {
  flex: 1 1 150px; min-width: 150px;
  background: #f7f9fc; border: 1px solid #dbe2ea; border-radius: 8px; padding: 12px 14px;
}
.result-card .rc-label { font-size: 12px; color: #667; margin-bottom: 4px; }
.result-card .rc-value { font-size: 22px; font-weight: 700; color: #223; }
.result-card .rc-sub { font-size: 11.5px; color: #889; margin-top: 3px; }

/* 過不足の状態色: 一致=緑 / 不足=赤 / 過剰=橙(欠落・ズレを隠さない) */
.diff-card.diff-ok    { background: #eafaf1; border-color: #27ae60; }
.diff-card.diff-ok    .rc-value { color: #1e8449; }
.diff-card.diff-short { background: #fdecea; border-color: #e74c3c; }
.diff-card.diff-short .rc-value { color: #c0392b; }
.diff-card.diff-over  { background: #fef4e7; border-color: #e67e22; }
.diff-card.diff-over  .rc-value { color: #b9770e; }
.diff-badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.diff-badge.diff-ok    { background: #27ae60; color: #fff; }
.diff-badge.diff-short { background: #e74c3c; color: #fff; }
.diff-badge.diff-over  { background: #e67e22; color: #fff; }

/* ========== 履歴テーブル ========== */
.history-table { border-collapse: collapse; width: 100%; font-size: 13px; margin-top: 6px; }
.history-table th, .history-table td { border: 1px solid #d5dbe2; padding: 5px 8px; text-align: center; }
.history-table th { background: #eef2f7; }
.history-table td.h-num { text-align: right; }
.history-table .h-del { border: none; background: none; color: #c0392b; cursor: pointer; font-size: 14px; }
.history-empty { color: #889; font-size: 12.5px; padding: 8px 2px; }

/* ========== 使い方・FAQ(SEO本文を兼ねる) ========== */
.tool-doc { max-width: 1060px; margin: 20px auto 0; }
.usage-steps { list-style: none; counter-reset: step; padding: 0; margin: 8px 0 0; }
.usage-steps li {
  position: relative; padding: 8px 8px 8px 42px; margin: 8px 0;
  background: #fff; border: 1px solid #e3e8ee; border-radius: 8px; font-size: 13.5px; line-height: 1.7;
}
.usage-steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 10px; top: 8px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #1a63b0; color: #fff; font-weight: 700; font-size: 13px;
  text-align: center; line-height: 22px;
}
.faq dt { font-weight: 700; margin-top: 12px; }
.faq dd { margin: 4px 0 0 1em; color: #445; font-size: 13.5px; line-height: 1.7; }
.tool-related { max-width: 1060px; margin: 20px auto 0; padding-top: 12px; border-top: 1px solid #d5dbe2; }
.tool-related h2 { font-size: 15px; margin: 0 0 6px; }
.tool-note { max-width: 1060px; margin: 14px auto 0; color: #889; font-size: 12px; line-height: 1.7; }

/* ========== 締め報告書(印刷専用ブロック) ========== */
.print-report { display: none; }
.print-report h2 { font-size: 16px; margin: 0 0 4px; }
.print-report .pr-meta { font-size: 12px; color: #445; margin: 0 0 10px; }
.print-report table { border-collapse: collapse; width: 100%; font-size: 12px; }
.print-report th, .print-report td { border: 1px solid #333; padding: 3px 6px; }
.print-report td.pr-num, .print-report th.pr-num { text-align: right; }
.print-report .pr-total td { font-weight: 700; background: #eee; }
.print-report .pr-summary { margin-top: 10px; font-size: 13px; }
.print-report .pr-summary div { margin: 3px 0; }

/* ========== モバイル(狭幅): ツール内の表を表内で横スクロール ==========
   ツールの操作表(.tb-grid / .timetable / .kt-day など)は列幅の合計が
   ビューポートを超えることがある。.table-scroll / .ct-scroll ラッパーで
   囲まれていないツール(#membersGrid・#rosterGrid・#usersGrid・#timetable 等)
   では、そのはみ出しがページ全体の横スクロールになってしまう。
   狭幅では .tool-section 内の table を一律スクロールコンテナ化し、はみ出しを
   表の内側に閉じ込める(表が収まる幅ならスクロールは出ない)。
   既に .table-scroll 等で囲まれている表にも二重の害はない。
   デスクトップ表示は不変(メディアクエリ内のみ)。 */
@media (max-width: 768px) {
  .tool-section table { display: block; overflow-x: auto; }
  /* セクション自体が固定幅を持つ例外(ringiの帳票フォーム等)や、
     セクションのパディング×表幅の相互作用による数px〜数十pxの滲みを
     ページ全体の横スクロールにせず、セクション内スクロールで吸収する */
  .tool-section { max-width: 100%; overflow-x: auto; }
  main.container { overflow-x: hidden; }
}

@media print {
  .site-header, .site-footer, .toolbar, .tabs, .ad-slot, .hint,
  .tool-doc, .tool-related, .tool-note, .tool-actions, .tool-live {
    display: none !important;
  }
  .print-report { display: block !important; }
  body { background: #fff; }
  @page { size: A4 portrait; margin: 12mm; }
}