/*! BMCPC Calendar – Rabbit Studio (v1.2.0)
   Scoped to #calendar-wrapper 以免影響站內其他元件
==================================================*/

/* ---------- 色票（可依品牌調整） ---------- */
:root{
  --ccw-green-deep: #2e836f;   /* 標題與強調綠 */
  --ccw-green-line: #b8cf86;   /* 表格線條淡綠 */
  --ccw-green-head: #e9f1cc;   /* 表頭底色 */
  --ccw-sunday:     #e75b2a;   /* 星期日／假期文字色 */
  --ccw-text:       #3b3f45;   /* 一般文字色 */

  /* 7 種型別底色（日期膠囊） */
  --ccw-type1: #D2D4D7; /* 淺灰 */
  --ccw-type2: #E6EF9D; /* 淺綠 */
  --ccw-type3: #CFE7E1; /* 淡青綠 */
  --ccw-type4: #F0E3B2; /* 米金 */
  --ccw-type5: #F3D5CF; /* 淡珊瑚粉 */
  --ccw-type6: #C9E0B0; /* 鼠尾草綠 */
  --ccw-type7: #E2D9F5; /* 淡紫 */
}

/* ---------- 容器 ---------- */
#calendar-wrapper{
  position: relative;
  font-family: inherit;
  color: var(--ccw-text);
}

/* ---------- Topbar：月份置中／右側地區下拉 ---------- */
#calendar-wrapper .calendar-topbar{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 12px;
  margin: 12px 0 10px;
}

/* 月份導航（置中） */
#calendar-wrapper .month-nav{
  grid-column: 2/3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--ccw-green-deep);
}
#calendar-wrapper .month-nav .month-title{
  font-weight: 800;
  font-size: 26px;
  line-height: 1.1;
}
#calendar-wrapper .month-nav button{
  appearance: none;
  border: none;
  background: transparent;
  color: var(--ccw-green-deep);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 8px;
}
#calendar-wrapper .month-nav button:hover{
  background: rgba(46,131,111,.08);
}
#calendar-wrapper .month-nav button:focus-visible{
  outline: 2px solid var(--ccw-green-deep);
  outline-offset: 2px;
}

/* 地區下拉（右側） */
#calendar-wrapper .calendar-region{
  grid-column: 3/4;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
#calendar-wrapper .calendar-region .region-label{
  font-size: 14px;
  color: #7f8f88;
  font-weight: 700;
  line-height: 1;
}
#calendar-wrapper .calendar-region .region-select-wrap{
  position: relative;
  min-width: 140px;
}
#calendar-wrapper .ccw-region{
  appearance: none;
  border: none;
  background: transparent;
  outline: none;
  border-bottom: 2px solid #cfe0d3;
  padding: 4px 22px 4px 0;
  width: 100%;
  font-weight: 800;
  font-size: 16px;
  color: var(--ccw-green-deep);
  cursor: pointer;
}
#calendar-wrapper .region-select-wrap .region-caret{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  pointer-events: none;
}
#calendar-wrapper .region-select-wrap .region-caret::before{
  content:"";
  display:block;
  width:0;height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:7px solid var(--ccw-green-deep);
}

/* ---------- 表格 ---------- */
#calendar-wrapper .custom-calendar{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: left;
  font-size: 16px;
  color: var(--ccw-text);
}
#calendar-wrapper .custom-calendar th,
#calendar-wrapper .custom-calendar td{
  border: 1px solid var(--ccw-green-line);
  padding: 0;
  background: #fff;
  vertical-align: top;
}
#calendar-wrapper .custom-calendar thead th{
  background: var(--ccw-green-head);
  color: var(--ccw-green-deep);
  font-weight: 800;
  text-align: center;
  padding: 14px 8px;
  letter-spacing: .5px;
}
#calendar-wrapper .custom-calendar thead th:first-child{
  color: var(--ccw-sunday);
}
#calendar-wrapper .custom-calendar td.empty{
  background: #fff;
}

/* 內層 cell */
#calendar-wrapper .custom-calendar td .cell-inner{
  position: relative;
  display: block;
  padding: 12px 12px 10px;
  min-height: 84px;
}

/* 公曆＋農曆同一行（膠囊） */
#calendar-wrapper .custom-calendar td .cell-head.inline{
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  position: relative;
  z-index: 2;
  padding: 6px 12px;
  border-radius: 22px;
}
#calendar-wrapper .custom-calendar td .gdate{
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  color: var(--ccw-text);
}
#calendar-wrapper .custom-calendar td .lunar-inline{
  font-size: 15px;
  font-weight: 700;
  opacity: .9;
}

/* 假期與星期日文字顏色 */
#calendar-wrapper .custom-calendar td.holiday .gdate,
#calendar-wrapper .custom-calendar td.holiday .lunar-inline,
#calendar-wrapper .custom-calendar td.sunday  .gdate,
#calendar-wrapper .custom-calendar td.sunday  .lunar-inline{
  color: var(--ccw-sunday) !important;
}

/* ---------- 7 類型：將日期膠囊加底色 ---------- */
#calendar-wrapper .custom-calendar td.type1 .cell-head{ background: var(--ccw-type1); }
#calendar-wrapper .custom-calendar td.type2 .cell-head{ background: var(--ccw-type2); }
#calendar-wrapper .custom-calendar td.type3 .cell-head{ background: var(--ccw-type3); }
#calendar-wrapper .custom-calendar td.type4 .cell-head{ background: var(--ccw-type4); }
#calendar-wrapper .custom-calendar td.type5 .cell-head{ background: var(--ccw-type5); }
#calendar-wrapper .custom-calendar td.type6 .cell-head{ background: var(--ccw-type6); }
#calendar-wrapper .custom-calendar td.type7 .cell-head{ background: var(--ccw-type7); }

/* ---------- RWD ---------- */
@media (max-width: 640px){
  #calendar-wrapper .month-nav .month-title{ font-size: 20px; }
  #calendar-wrapper .calendar-region .region-select-wrap{ min-width: 120px; }
  #calendar-wrapper .custom-calendar td .cell-inner{ min-height: 72px; }
}

/* ---------- 列印（簡化邊框／保留顏色） ---------- */
@media print{
  #calendar-wrapper .calendar-topbar{ display: none; }
  #calendar-wrapper .custom-calendar th,
  #calendar-wrapper .custom-calendar td{
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

.is-hidden{ display:none !important; }

/* === Move "地區" to the left & enlarge text === */
#calendar-wrapper .calendar-topbar{
  grid-template-columns: 1fr 1fr 1fr; /* 保留三欄：左=地區，中=月份，右=留白 */
}

#calendar-wrapper .calendar-region{
  grid-column: 1 / 2;         /* 從原本右側 → 左側 */
  align-items: flex-start;     /* 左對齊 */
}

#calendar-wrapper .month-nav{
  grid-column: 2 / 3;          /* 置中顯示年月＋箭頭 */
}

/* 放大「地區」標籤與選單字體 */
#calendar-wrapper .calendar-region .region-label{
  font-size: 16px;             /* 原本 14px → 稍微放大 */
  line-height: 1.2;
}

#calendar-wrapper .calendar-region .region-select-wrap{
  min-width: 160px;            /* 原本 140px → 稍加寬，避免截字 */
}

#calendar-wrapper .ccw-region{
  font-size: 18px;             /* 原本 16px → 放大 */
  font-weight: 800;
  padding: 6px 26px 6px 0;     /* 稍增高 */
  border-bottom-width: 2px;    /* 保持線條厚度 */
}

/* 下拉箭頭也放大些許 */
#calendar-wrapper .region-select-wrap .region-caret::before{
  border-left: 7px solid transparent;
  border-right:7px solid transparent;
  border-top: 9px solid var(--ccw-green-deep);
}

/* 手機：仍維持左邊地區、月份在中間 */
@media (max-width: 640px){
  #calendar-wrapper .calendar-region .region-select-wrap{ min-width: 140px; }
  #calendar-wrapper .ccw-region{ font-size: 17px; }
  #calendar-wrapper .month-nav .month-title{ font-size: 20px; }
}