/* =========================
   桌機 / 手機 顯示切換
   desktopOnly：桌機顯示
   mobileOnly：手機顯示
========================= */
.desktopOnly{
  display:block;
}

.mobileOnly{
  display:none;
}

/* =========================
   整個桌機版週表外框
   讓超出寬度時可以左右捲動
========================= */
.weeklyTableWrap{
  width:100%;
  overflow-x:auto;
  padding:6px 0;
}

/* =========================
   婦科桌機版整體表格容器
   min-width 是避免欄位太窄
========================= */
#gyneSchedule.weeklyTable{
  min-width:980px;
  background:transparent;
  box-shadow:none;
}

/* =========================
   上方星期列（星期一～星期日）
   第一欄是空白，後面 7 欄是星期
========================= */
#gyneSchedule .weekRowHead{
  display:grid;
  grid-template-columns:180px repeat(7, minmax(110px, 1fr));
  gap:12px;
  background:transparent;
  color:#fff;
  margin-bottom:14px;
}

/* 星期列每一格 */
#gyneSchedule .weekRowHead > div{
  padding:16px 12px;
  text-align:center;
  font-weight:700;
  font-size:18px;
  background:#4a4a4a;
  border-radius:12px;
  box-sizing:border-box;
}

/* 星期列最左邊的空白格 */
#gyneSchedule .weekRowHead > div:first-child{
  background:transparent;
  box-shadow:none;
}

/* =========================
   每一個時段列（上午 / 下午 / 晚上）
   左邊 1 欄是時段，右邊 7 欄是星期一到日
========================= */
#gyneSchedule .weekRow{
  display:grid;
  grid-template-columns:180px repeat(7, minmax(110px, 1fr));
  gap:12px;
  margin-bottom:14px;
  border-bottom:none;
}

/* =========================
   左邊時段欄（上午 / 下午 / 晚上 + 時間）
========================= */
#gyneSchedule .periodCell{
  background:#fff;
  padding:18px 14px;
  text-align:center;
  border:none;
  border-radius:16px;
  box-shadow:0 2px 5px rgba(0,0,0,.08);
  box-sizing:border-box;
}

/* 時段名稱，例如：上午、下午、晚上 */
#gyneSchedule .periodTitle{
  display:block;
  font-size:20px;
  font-weight:700;
  color:#111;
  margin-bottom:8px;
}

/* 時段時間，例如：09:00-12:00 */
#gyneSchedule .periodTime{
  display:block;
  font-size:15px;
  color:#333;
  line-height:1.5;
}

/* =========================
   每一個醫師格
   桌機版一格代表：某天 + 某時段
========================= */
#gyneSchedule .doctorCell{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:100px;
  padding:16px 12px;
  font-size:17px;
  line-height:1.8;
  color:#222;
  border:none;
  border-radius:16px;
  background:#fff;
  box-shadow:0 2px 5px rgba(0,0,0,.08);
  word-break:break-word;
  box-sizing:border-box;
}

/* 休診格 */
#gyneSchedule .doctorCell.closed{
  color:#9a9a9a;
  background:#f1f1f1;
}

/* 多行內容（例如單週 / 雙週） */
#gyneSchedule .doctorCell.multiLine{
  font-size:16px;
  line-height:1.85;
  padding:14px 10px;
}

/* =========================
   手機版卡片區塊
   改成一排 3 個
========================= */
.gyneMobileCards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr)); /* 手機一排 3 個 */
  gap:10px;
}

/* 手機版每一天的卡片 */
.gyneDayCard{
  background:#fff;
  border-radius:16px;
  box-shadow:0 2px 5px rgba(0,0,0,.08);
  padding:10px;
  box-sizing:border-box;
}

/* 手機版卡片上方星期名稱 */
.gyneDayHd{
  font-size:18px;
  font-weight:700;
  color:#1f2d3d;
  margin-bottom:10px;
}

/* 如果整天都休診，顯示「本日休診」 */
.gyneDayClosed{
  min-height:90px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f1f1f1;
  color:#9a9a9a;
  font-size:20px;
  font-weight:700;
  border-radius:12px;
  text-align:center;
}

/* 手機版單一時段區塊（早 / 午 / 晚） */
.gyneSession{
  background:#eef4ff;
  border-radius:12px;
  padding:8px 10px;
  margin-top:8px;
}

/* 單一時段休診 */
.gyneSession.closed{
  background:#f2f2f2;
  color:#777;
}

/* 時段上方那一列：早 + 時間 */
/*.gyneSessionTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:4px;
}*/

/* 左邊的時段短字：早 / 午 / 晚 */
.gyneSessionLabel{
  font-weight:700;
  color:#1f3f75;
  flex:0 0 auto;
}

/* 如果此時段休診，label 也變灰 */
.gyneSession.closed .gyneSessionLabel{
  color:#777;
}

/* 右邊的時段時間 */
/*.gyneSessionTime{
  font-size:11px;
  color:#666;
  text-align:right;
}*/

/* 醫師名稱 / 單雙週文字 */
.gyneSessionDoctor{
  font-size:14px;
  line-height:1.6;
  color:#1f2d3d;
  word-break:break-word;
}

/* 休診時內容字色 */
.gyneSession.closed .gyneSessionDoctor{
  color:#777;
}

/* 多行內容（單週 / 雙週） */
.gyneSession.multiLine .gyneSessionDoctor{
  line-height:1.75;
}


/* 手機：早 午 晚 + 醫師同一行 */
.gyneSessionRow{
  display:flex;
  align-items:center;
  gap:10px;
}

/* 左邊 早 午 晚 */
.gyneSessionLabel{
  font-weight:700;
  color:#1f3f75;
  flex:0 0 20px;
}

/* 右邊醫師 */
.gyneSessionDoctor{
  font-size:14px;
  line-height:1.6;
  color:#1f2d3d;
  flex:1;
  word-break:break-word;
}

/* 休診樣式 */
.gyneSession.closed .gyneSessionLabel{
  color:#777;
}

.gyneSession.closed .gyneSessionDoctor{
  color:#777;
}

/* =========================
   平板 / 手機切換
   800px 以下：
   - 隱藏桌機週表
   - 顯示手機卡片
========================= */

@media screen and (max-width:800px){
  .desktopOnly{
    display:none !important;
  }

  .mobileOnly{
    display:grid !important;
  }
}

/* =========================
   小手機微調
   如果螢幕太小，3 欄會太擠
   可改成 2 欄比較好讀
   你如果堅持全部手機都 3 欄，可以刪掉這段
========================= */
@media screen and (max-width:520px){
  .gyneMobileCards{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .gyneDayHd{
    font-size:17px;
  }

/*  .gyneSessionTime{
    font-size:10px;
  }*/

  .gyneSessionDoctor{
    font-size:13px;
  }

  .gyneDayClosed{
    font-size:18px;
    min-height:80px;
  }
}


/* 預設：桌機顯示、手機隱藏 */
.weeklyTableWrap.desktopOnly{
  display:block;
}

.gyneMobileCards.mobileOnly{
  display:none;
}

/* 手機：桌機隱藏、手機顯示 */
@media screen and (max-width:800px){
  .weeklyTableWrap.desktopOnly{
    display:none !important;
  }

  .gyneMobileCards.mobileOnly{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
  }
}

/* 小手機 */
@media screen and (max-width:520px){
  .gyneMobileCards.mobileOnly{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}


/* 手機高亮 */
.gyneSession.active{
  background:#fff3e8;
  border:1px solid #ffb36b;
  box-shadow:0 4px 12px rgba(255,150,60,.25);
}

/* label 顏色 */
.gyneSession.active .gyneSessionLabel{
  color:#ff7a00;
}

/* 桌機高亮 */
#gyneSchedule .doctorCell.active{
  background:#fff3e8;
  border:1px solid #ffb36b;
  box-shadow:0 4px 12px rgba(255,150,60,.25);
}