/* ==============================================================
   modal.css（モーダル専用デザイン）
   Bootstrap5.3 + Chart.js 競合対策
   ============================================================== */

/* --------------------------------------------------------------
   1. モーダル本体（角丸・影・赤ヘッダー）
   -------------------------------------------------------------- */
.modal-content {
  border: none;
  border-radius: 0.5rem;
  overflow: hidden;
  background-clip: border-box;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.modal-header {
  background-color: #dc3545;
  color: #fff;
  padding: 0.75rem 1rem;
  border: none;
}

.modal-header .btn-close {
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

.modal-header .btn-close:hover {
  opacity: 1;
}

.modal-body {
  padding: 1.25rem 1.5rem;
}

.modal-footer {
  border-top: none;
  justify-content: center !important;
  gap: 0.5rem;
}

/* --------------------------------------------------------------
   2. モーダルのz-index競合対策（Chart.js / footer衝突対策）
   -------------------------------------------------------------- */
.modal-backdrop {
  z-index: 2000 !important;
}

.modal {
  z-index: 2100 !important;
}

/* Chart.js がモーダルより上に来る現象の抑止 */
canvas,
.chartjs-size-monitor {
  z-index: 1 !important;
  position: relative !important;
}

/* --------------------------------------------------------------
   3. フィルタモーダル独自調整（幅・余白）
   -------------------------------------------------------------- */
#filterModal form {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
}

#filterModal .modal-body {
  padding-left: 2rem;
  padding-right: 2rem;
}

#filterModal .form-select {
  width: 100% !important;
  min-width: 100% !important;
}

/* 年だけ切れやすいので幅固定 */
#filterModal select[name="year"] {
  min-width: 110px;
}