/* ====== ベース・レイアウト ====== */
body {
  font-family: "Meiryo", sans-serif;
  padding: 16px;
  margin: 0;
  background: #f0f0f5;
  font-size: 16px;
}
h2 {
  text-align: center;
  margin-bottom: 1rem;
}

/* ★修正箇所：タイトル周り */
#tableTitle {
  margin: 0;
  /* flex-shrink: 0; ←これを削除して、幅に合わせて縮むように変更 */
  flex: 1; /* 余ったスペースを埋める */
  font-size: 1.35rem;
  font-weight: bold;
  text-align: center;
  line-height: 1.3;
  /* 長い場合は改行を許可 */
  white-space: normal;
  overflow-wrap: anywhere;
}

/* 読み込み中オーバーレイ */
.loader {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.8);
  font-size: 1.2rem;
  color: #555;
  z-index: 10000;
  font-weight: bold;
}
.loader.show { display: flex; }

/* ====== カレンダー外枠・ナビ ====== */
.calendar-container {
  overflow-x: auto;
}
.calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between; /* ★修正：両端にボタン、中央にタイトル */
  gap: 0.5rem; /* 間隔を少し詰める */
  margin-bottom: 1rem;
  width: 100%;
}
.month-nav-btn {
  font-size: 1.5rem;
  padding: 0 0.8rem; /* ボタンの押しやすさを維持しつつ少しスリムに */
  border: none;
  background: #f4f4f4;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0; /* ボタンは縮ませない */
}
.month-nav-btn:disabled {
  background: #e0e0e0;
  color: #aaa;
  cursor: not-allowed;
}

/* ====== カレンダー本体テーブル ====== */
table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
th, td {
  border: 1px solid #ccc;
  padding: 6px;
  text-align: center;
  vertical-align: middle;
  min-width: 45px;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 14px;
}
th { background-color: #e6e6e6; }

@media (max-width: 600px) {
  /* ★修正：スマホ時はタイトル文字を小さく */
  #tableTitle {
    font-size: 1rem; 
  }
  th, td {
    font-size: 11px;
    min-width: 28px;
    padding: 4px 2px;
  }
  h2 { font-size: 1rem; }
  
  /* ボタンも少し小さめに調整 */
  .month-nav-btn {
    font-size: 1.2rem;
    padding: 0 0.6rem;
  }
}

/* ====== 曜日ヘッダ ====== */
.sunday { color: red; }
.saturday { color: blue; }

/* ====== 週・診療科・日付セル ====== */
.week-row td:first-child {
  background-color: #e1f5fe;
  font-weight: bold;
}
#calendar td:first-child {
  background-color: #fceabb;
  font-weight: bold;
}
#calendar tr.date-row td:first-child {
  background: #fff !important;
}
tr.week-row {
  border-top: 3px solid #aaa !important;
}

/* ====== 特別な日付セル ====== */
#calendar tr:not(.date-row) td.today-cell {
  background: #fff !important;
  border: 2.5px solid #ffb300 !important;
  z-index: 1;
}
#calendar tr.date-row td:not(:first-child):not(.holiday):not(.today-cell) {
  background: #e6f7ff !important;
  font-weight: bold;
  font-size: 1.2em;
}
#calendar tr.date-row td.today-cell {
  background: #ffb300 !important;
  color: #fff !important;
  font-weight: bold;
  border: 3px solid #ff9800 !important;
  font-size: 1.35em;
  z-index: 9;
}

/* データ行の背景 */
#calendar tr:not(.date-row) td:not(:first-child):not(.kyushin-cell):not(.cyousei-cell):not(.yaegashi-cell) {
  background: #fff !important;
}

/* 休診セル */
#calendar tr:not(.date-row) td.kyushin-cell {
  background: #e0e0e0 !important;
  color: #888 !important;
  cursor: default !important;
  pointer-events: none;
}

/* 個別：八重樫 9:30～ */
#calendar tr:not(.date-row) td.yaegashi-cell {
  background: #fff9c4 !important;
  color: #000 !important;
  font-weight: bold !important;
}

/* 祝日 */
#calendar td.holiday {
  background: #e53935 !important;
  color: #fff !important;
  font-weight: bold;
}
tr.week-row td.holiday {
  color: #d32f2f !important;
  font-weight: bold;
}

/* 日付行の土日 */
#calendar tr.date-row td.saturday { color: #1976d2 !important; }
#calendar tr.date-row td.sunday { color: #e53935 !important; }

/* 今日セルが土日の場合 */
#calendar tr.date-row td.today-cell.saturday,
#calendar tr.date-row td.today-cell.sunday {
  background: #ffe066 !important;
  border: 3px solid #ff9800 !important;
}
#calendar tr.date-row td.today-cell.saturday { color: #1976d2 !important; }
#calendar tr.date-row td.today-cell.sunday { color: #e53935 !important; }

/* その他 */
.female { color: red; }
.calendar-note {
  margin: 18px 0 0 0;
  font-size: 0.97em;
  color: #555;
  background: #fffbe8;
  border-left: 4px solid #ffe082;
  padding: 10px 12px;
  border-radius: 5px;
  max-width: 75vw;
  line-height: 1.6;
}

/* ====== モーダル（患者向け：ピンク・幅修正版） ====== */
.cell-modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,.45);
  z-index: 11000;
  
  display: none; 
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.cell-modal-content {
  position: relative;
  background: #FFE4EC !important;
  color: #333;
  border: 1px solid #F5C5D5;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.3);
  text-align: center;
  
  width: auto;
  min-width: 300px;
  max-width: 90vw;
  
  max-height: 80vh;
  overflow-y: auto;
  padding: 26px 18px;
  font-size: 22px;
  line-height: 1.6;
  margin: auto; 
}

#cellModalTitle { font-size: 30px; margin: 0 0 12px; font-weight: 700; }
.modal-label { display: block; margin: 8px 0 4px; color: #777; font-size: 20px; }
.modal-value { margin: 2px 0 10px; font-size: 34px; font-weight: 800; }

#cellModalClose {
  position: absolute; top: 10px; right: 10px;
  border: 1px solid #d1d5db; background: #fff; color: #111;
  padding: 6px 12px; border-radius: 9999px; font-size: 14px; cursor: pointer;
}

.cell-modal .highlight-time { color: #e53935 !important; font-weight: bold; }
body.no-scroll { overflow: hidden; }

@media (max-width: 600px) {
  .cell-modal-content {
    min-width: 280px;
    padding: 24px 14px;
    font-size: clamp(22px, 6vw, 26px);
  }
  #cellModalTitle { font-size: clamp(24px, 8vw, 30px); }
  .modal-label { font-size: clamp(20px, 5vw, 22px); }
  .modal-value { font-size: clamp(28px, 8vw, 36px); }
}