/* z-indexの調整: ナビバーのドロップダウンがテーブルヘッダーに隠れないようにする */
/* Bootstrap 5のデフォルト値: .sticky-top は 1020、.dropdown-menu は 1000 */
/* ナビバーのドロップダウンメニューのz-indexを上げる */
.navbar .dropdown-menu {
  z-index: 1030; /* sticky-top (1020) より大きい値に設定 */
}

/* フォームのマージン */
.form-group > .row {
  margin-bottom: 0.5rem; /* mb-2 相当 */
  align-items: center;   /* 縦方向中央揃え を適用 */
}

/* .form-group 配下の label を Bootstrap の .form-text 相当の見た目にする（全画面一括適用） */
.form-group label {
  display: block;
  font-size: .875rem; /* .form-text と同等 */
  /*color: #6c757d; /* Bootstrap の text-muted 相当 */
  margin-top: 0.25rem;
  margin-bottom: 0;
}

/* 金額・合計時間などの強調表示に再利用 */
.metric-emphasis {
  font-size: 1.25rem; /* 少し大きめ */
  font-weight: 600;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

/* ローディング表示 */
#loading-overlay {
  position: fixed; /* 画面全体に固定 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2); /* 半透明の白で背景を覆う */
  z-index: 9999; /* 他の要素より手前に表示 */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: wait; /* カーソルを待機中に変更 */
}

#loading-overlay.hidden {
  display: none; /* 初期状態では非表示 */
}

/* （オプション）シンプルなローディングアニメーション */
.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border-left-color: #007bff;
  animation: spin 1s ease infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* number_fieldのスピナーを非表示 */
.no-spinner::-webkit-outer-spin-button, 
.no-spinner[type="number"]::-webkit-inner-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
} 
.no-spinner[type="number"] { 
  -moz-appearance: textfield;
  appearance: textfield;
} 

/* フィールドエラー時の強調表示 */
.field_with_errors {
  display: inline;
}

.field_with_errors input,
.field_with_errors select,
.field_with_errors textarea {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.field_with_errors input:focus,
.field_with_errors select:focus,
.field_with_errors textarea:focus {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

/* Bootstrapとの統合（オプション） */
.field_with_errors .form-control,
.field_with_errors .form-select {
  border-color: var(--bs-form-invalid-border-color, #dc3545);
}

/* アコーディオン */
/* 背景色をなくす */
.accordion-item,
.accordion-button,
.accordion-button.collapsed,
.accordion-button:not(.collapsed),
.accordion-body {
  background-color: transparent !important;
}
/* テキスト色をデフォルトに戻す */
.accordion-button,
.accordion-button:not(.collapsed),
.accordion-button:hover,
.accordion-button:not(.collapsed):hover {
  color: inherit !important;
}
/* フォーカス時の青いシャドウを消す */
.accordion-button:focus {
  box-shadow: none !important;
}

/* アコーディオンヘッダーの下線が消える問題: Bootstrapの標準ではitem境界線に依存するため
   開閉後に視覚的な下線が失われるケースがある。常時表示させるためheaderにボーダーを付与する */
.accordion-header {
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}
/* 余白調整（既存レイアウト崩れ防止） */
.accordion-header .accordion-button {
  margin-bottom: -1px; /* 二重線防止 */
}
/* 開閉状態でクラスが .collapsed に切り替わっても下線維持 */
.accordion-button.collapsed {
  box-shadow: none !important;
}
/* 休憩時間入力パネル（ライト/ダーク対応） */
.breaks-panel {
  background-color: #f8f9fa; /* light */
  color: #212529;
  min-width: 300px;
}
.breaks-panel input,
.breaks-panel textarea,
.breaks-panel select {
  background-color: #ffffff;
  color: #212529;
}

@media (prefers-color-scheme: dark) {
  .breaks-panel {
    background-color: #2b3035; /* bootstrap dark bg */
    color: #f8f9fa;
    border-color: #3a3f44 !important;
  }
  .breaks-panel input,
  .breaks-panel textarea,
  .breaks-panel select {
    background-color: #1e2225;
    color: #f8f9fa;
    border-color: #495057;
  }
  .breaks-panel input:focus,
  .breaks-panel textarea:focus,
  .breaks-panel select:focus {
    background-color: #1e2225;
    color: #f8f9fa;
  }
}

/* 環境ごとの枠線設定 */
/* 開発環境: 赤色の太枠 */
body.env-development {
  outline: 5px solid red;
}

/* ステージング環境: オレンジ色の太枠 */
body.env-staging {
  outline: 5px solid orange;
}