/* /css/confirm.css または /css/confirm-aggregation.css */

.confirm-aggregation-content .side-modal-body {
  font-size: 0.9rem; /* モーダル内の基本フォントサイズ */
}

.confirm-aggregation-content .data-display-fieldset {
  border: 1px solid #e9ecef;
  padding: 0.8rem 1rem 1rem 1rem;
  border-radius: 0.25rem;
}

.confirm-aggregation-content .data-display-legend {
  font-size: 1rem;
  font-weight: 600;
  padding: 0 0.5rem;
  width: auto; /* legendの幅を自動に */
  float: none; /* float解除 */
  margin-bottom: 0.5rem;
}

.confirm-aggregation-content .data-display-sub-fieldset {
  border: 1px solid #f1f3f5;
  padding: 0.6rem;
  border-radius: 0.2rem;
  background-color: #fdfdff;
}

.confirm-aggregation-content .data-display-sub-legend {
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0 0.4rem;
  width: auto;
  float: none;
  margin-bottom: 0.4rem;
  color: #555;
}

.confirm-aggregation-content .data-label {
  color: #555;
  font-size: 0.85rem;
  display: inline-block; /* ラベルと値を横並びにするため */
}

.confirm-aggregation-content .data-value {
  color: #222;
  font-weight: 500;
  font-size: 0.9rem;
  word-break: break-all; /* 値が長い場合に折り返す */
}
.confirm-aggregation-content .float-end { /* Bootstrapのクラスを流用、またはここで定義 */
  float: right !important;
}

.confirm-aggregation-content .g-1 { /* Bootstrapのgapクラスを模倣 */
  gap: 0.25rem !important;
}
.confirm-aggregation-content .row {
  --bs-gutter-x: 0.5rem; /* Bootstrapのrowのgutterを模倣 */
}


.confirm-aggregation-content hr.my-3 { /* Bootstrapのクラスを模倣 */
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

/* 勤務状況リストのスタイル例 */
.confirm-aggregation-content #confirm_staffList ul {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 0;
  column-count: 2; /* 2列表示など */
}
.confirm-aggregation-content #confirm_staffList li {
  padding: 2px 0;
  font-size: 0.85rem;
}