/* 単一責務: 月次勤務表テーブルの表示を定義する。 */
.sheet-meta {
  display: flex;
  gap: 16px;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
}

.sheet-wrap {
  position: relative;
  height: calc(100% - 36px);
  overflow: auto;
}

.frozen-header {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 80;
  display: grid;
  grid-template-columns:
    var(--id-col-width) var(--name-col-width)
    var(--group-col-width);
  width: calc(
    var(--id-col-width) + var(--name-col-width) + var(--group-col-width)
  );
  height: 0;
  pointer-events: none;
}

.frozen-header-cell {
  display: flex;
  align-items: center;
  overflow: hidden;
  height: 29px;
  padding: 6px 7px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--header);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sheet-table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: max-content;
  table-layout: fixed;
  font-size: 12px;
}

.table-col-id {
  width: var(--id-col-width);
}

.table-col-name {
  width: var(--name-col-width);
}

.table-col-group {
  width: var(--group-col-width);
}

.table-col-date {
  width: var(--date-col-width);
}

.table-col-summary {
  width: var(--summary-col-width);
}

.sheet-table th,
.sheet-table td {
  overflow: hidden;
  padding: 6px 7px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sheet-table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--header);
  font-weight: 700;
}

.sticky-col {
  position: sticky;
  z-index: 4;
  background: #fff;
}

thead .sticky-col {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--header);
}

thead .sticky-id {
  left: 0;
}

thead .sticky-name {
  left: var(--id-col-width);
}

thead .sticky-group {
  left: calc(var(--id-col-width) + var(--name-col-width));
}

.sticky-id {
  left: 0;
  width: var(--id-col-width);
  min-width: var(--id-col-width);
  max-width: var(--id-col-width);
}

.sticky-name {
  left: var(--id-col-width);
  width: var(--name-col-width);
  min-width: var(--name-col-width);
  max-width: var(--name-col-width);
}

.sticky-group {
  left: calc(var(--id-col-width) + var(--name-col-width));
  width: var(--group-col-width);
  min-width: var(--group-col-width);
  max-width: var(--group-col-width);
}

.cell-job {
  background: var(--job);
}

.cell-late {
  background: var(--late);
}

.cell-off {
  background: var(--off);
}

.cell-leave {
  background: var(--leave);
}

.cell-standby {
  background: var(--standby);
}

.cell-absence {
  background: var(--absence);
}

.cell-summary {
  background: var(--summary);
}

.selectable {
  cursor: pointer;
}

.selected-cell {
  outline: 2px solid var(--selected);
  outline-offset: -2px;
}

@media (max-width: 980px) {
  .sheet-wrap {
    height: 62vh;
  }
}