/* あつらえシフト LP 第2版: ヒーローの「実寸の勤務表」部品
   寸法・色は製品（css/app.css の .sgrid / .scell / .rowhead / .colhead / .agg-* /
   .unit-row / .cell-wish / .pl-chip / .btn-primary）から写した実測値。
   15px未満は製品再現の表の内側だけ（記号13 / 日付13 / 曜日10 / 氏名12.5 / ユニット10 / 集計11.5 / チップ13）。 */

/* width/max-width は指定しない。指定すると .bleed-r（負の margin-right）が
   CSSの過剰制約の規則で無視され、画面の右端まで伸びなくなる。 */
.rhg {
  font-family: "BIZ UDPGothic", sans-serif;
  color: #4c4c4c;
}

/* ---- タイトル ---- */
.rhg-head { margin-bottom: 12px; }
.rhg-title { font-size: 18px; font-weight: 700; color: #3a4a40; line-height: 1.5; }

/* ---- 記号パレット（製品 .palette の入れ物＋ .pl-chip。影だけ除く） ---- */
.rhg-pal {
  background: #fff;
  border: 1px solid #e2e8ee;
  border-radius: 12px;
  padding: 8px 12px;
  margin-bottom: 12px;
}
.rhg-pal .pl-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 7px 0; }
.rhg-pal .pl-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #e2e8ee;
  background: #fff;
  border-radius: 9px;
  padding: 6px 2px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}
/* 幅は製品と同じ2種だけ（js/ui-grid.js addChip: 3文字以上＝pl-w5／1〜2文字＝pl-w2） */
.rhg-pal .pl-chip.pl-w5 { width: 6em; }
.rhg-pal .pl-chip.pl-w2 { width: 3.2em; }
.rhg-pal .pl-chip:hover { border-color: #67b371; }
.rhg-pal .pl-chip.armed { border-color: #67b371; box-shadow: 0 0 0 3px #bfe0c5; }

/* ---- 横スクロール枠（高さ上限なし＝内側に縦スクロールを作らない） ---- */
.rhg-scroll {
  overflow-x: auto;
  border: 1px solid #e2e8ee;
  border-radius: 12px;
  background: #fff;
}

/* ---- 表本体（製品 .sgrid） ---- */
.rhg .sgrid { border-collapse: separate; border-spacing: 0; font-size: 12px; }
.rhg .sgrid th,
.rhg .sgrid td {
  border-right: 1px solid #edf1f5;
  border-bottom: 1px solid #edf1f5;
  padding: 0;
  background-color: #fff;
}
.rhg .sgrid thead th { position: sticky; top: 0; z-index: 5; background: #e8f4ea; box-shadow: inset 0 -1.5px 0 #e2e8ee; }
.rhg .sgrid thead .rowhead { background: #e8f4ea; z-index: 6; }
.rhg .sgrid .week-sep { border-right: 2.5px double #b9c4cd !important; }

/* 日付ヘッダ（曜日10px＋日付13px の2段） */
.rhg .sgrid .colhead { min-width: 40px; width: 40px; text-align: center; padding: 3px 0 2px; line-height: 1.2; }
.rhg .sgrid .colhead .dw { display: block; font-size: 10px; font-weight: 700; color: #9a9a9a; }
.rhg .sgrid .colhead .dd { display: block; font-size: 13px; font-weight: 800; color: #6b6b6b; }
.rhg .sgrid .colhead.sat .dd, .rhg .sgrid .colhead.sat .dw { color: #2563eb; }
.rhg .sgrid .colhead.sun .dd, .rhg .sgrid .colhead.sun .dw { color: #d83a3a; }

/* 土日の列色（行の縞・集計セルの地色より優先＝製品と同じ詳細度の上げ方） */
.rhg .sgrid .colhead.sat, .rhg .sgrid td.scell.sat, .rhg .sgrid td.agg-cell.sat { background-color: #e9f1fb; }
.rhg .sgrid .colhead.sun, .rhg .sgrid td.scell.sun, .rhg .sgrid td.agg-cell.sun { background-color: #fcebee; }
.rhg .sgrid tbody tr > td.scell.sat { background-color: #e9f1fb; }
.rhg .sgrid tbody tr > td.scell.sun { background-color: #fcebee; }

/* 職員名列（固定列） */
.rhg .sgrid .rowhead {
  position: sticky; left: 0; z-index: 4; background: #fff;
  min-width: 140px; max-width: 180px; padding: 2px 10px;
  font-size: 12.5px; font-weight: 600; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* マス */
.rhg .scell { min-width: 40px; height: 28px; text-align: center; vertical-align: middle; cursor: pointer; position: relative; user-select: none; }
.rhg .scell .mark { display: inline-flex; align-items: center; justify-content: center; padding: 0 2px; font-size: 13px; font-weight: 800; }
.rhg .sym-work { color: #1f2933; }
.rhg .sym-rest { color: #c0392b; }
.rhg .scell:hover { outline: 2px solid #67b371; outline-offset: 0; z-index: 3; }

/* 1行おきの縞 */
.rhg .sgrid tbody tr.zebra > td, .rhg .sgrid tbody tr.zebra > .rowhead { background: #eef3f0; }

/* 希望休のマス（製品 .cell-wish／.mark-wish／sub.rank） */
.rhg .sgrid tbody tr > td.scell.cell-wish { background-color: #e8f4ea; }
.rhg .scell.cell-wish .mark { color: #4f9a5b; outline: 1.8px dashed #67b371; outline-offset: 1px; }
.rhg .scell sub.rank { font-size: 10px; font-weight: 700; vertical-align: sub; margin-left: 1px; color: #4f9a5b; }

/* 守れなかったマス（製品 .scell.violation＝地色＋内側2pxの赤枠） */
.rhg .sgrid tbody tr > td.scell.violation { background-color: #fdecec; }
.rhg .scell.violation::after {
  content: ""; position: absolute; inset: 2px;
  border: 1.8px solid #d83a3a; border-radius: 8px; pointer-events: none;
}

/* ユニット区切り行（製品 .unit-row） */
.rhg .sgrid tr.unit-row > td { background: #e8f4ea; border-top: 2px solid #67b371; border-bottom: 1px solid #e2e8ee; padding: 0; }
.rhg .sgrid .unit-row-label { position: sticky; left: 0; display: inline-block; padding: 4px 12px; font-size: 12.5px; font-weight: 800; color: #4f9a5b; }

/* 集計（職員別の合計列・日別集計行） */
/* 職員別の合計列（製品 .stat-col。見出しだけ地色が濃い） */
.rhg .sgrid td.stat-col { min-width: 46px; font-size: 11px; text-align: center; background: #f7f9fa; padding: 3px 4px; white-space: nowrap; color: #6b6b6b; }
.rhg .sgrid thead th.stat-col { min-width: 46px; font-size: 11px; text-align: center; background: #f0f3f5; padding: 3px 4px; white-space: nowrap; color: #6b6b6b; font-weight: 700; }
.rhg .sgrid tbody tr.zebra > td.stat-col { background: #eef3f0; }
.rhg .sgrid .agg-label { position: sticky; left: 0; z-index: 4; background: #fbfcfd; color: #4f9a5b; padding: 2px 10px; font-size: 11.5px; font-weight: 800; text-align: left; white-space: nowrap; }
.rhg .sgrid .agg-cell { text-align: center; font-size: 11.5px; padding: 2px 0; min-width: 40px; background: #fbfcfd; font-weight: 700; color: #6b6b6b; }
.rhg .sgrid .agg-cell.agg-short { color: #d83a3a; }
.rhg .sgrid .agg-cell.agg-short::before { content: "▲"; font-size: 8px; margin-right: 1px; }
.rhg .sgrid .agg-cell.agg-over { color: #b45309; }
.rhg .sgrid .agg-cell.agg-over::before { content: "●"; font-size: 7px; margin-right: 1px; }

/* ---- 操作ボタン ---- */
.rhg-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 16px; }
.rhg-run {
  background: #67b371; color: #fff; border: 1px solid transparent; border-radius: 10px;
  padding: 9px 18px; font: inherit; font-size: 16px; font-weight: 700; line-height: 1.4; cursor: pointer;
}
.rhg-run:hover:not(:disabled) { background: #4f9a5b; }
.rhg-run:disabled { opacity: .45; cursor: not-allowed; }
.rhg-done { font-size: 16px; color: #3d7a47; }
.rhg-reset {
  background: none; border: none; padding: 0; font: inherit; font-size: 16px;
  color: #3d7a47; text-decoration: underline; cursor: pointer;
}
.rhg-reset:hover { color: #4f9a5b; }

@media (prefers-reduced-motion: reduce) {
  .rhg * { transition: none !important; animation: none !important; }
}