/* 共用樣式：導覽列、表格、表單、Modal */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  background: #f5f6f8;
  color: #222;
}

nav.topnav {
  display: flex;
  gap: 4px;
  background: #2d3142;
  padding: 0 16px;
  overflow-x: auto;
  white-space: nowrap;
}

nav.topnav a {
  color: #d8dae3;
  text-decoration: none;
  padding: 14px 16px;
  font-size: 14px;
  flex-shrink: 0;
}

nav.topnav a:hover,
nav.topnav a.active {
  color: #fff;
  background: #40465e;
}

main {
  max-width: 1100px;
  margin: 24px auto;
  padding: 0 16px;
  overflow-x: auto;
}

h1 {
  font-size: 20px;
  margin-bottom: 16px;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

th,
td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}

th {
  background: #eef0f4;
  font-weight: 600;
}

tr:last-child td {
  border-bottom: none;
}

button {
  cursor: pointer;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 13px;
  background: #4a5cff;
  color: #fff;
}

button.secondary {
  background: #cfd2dc;
  color: #333;
}

button.danger {
  background: #e35555;
}

/* 收款狀態按鈕：未收款要顯眼，提醒還沒收到錢；已收款則低調帶過 */
button.status-unpaid {
  background: #f0a030;
  color: #3a2400;
  font-weight: 600;
}

button.status-paid {
  background: #b6e3c6;
  color: #1b4d2e;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

/* Modal */
.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
}

.modal-backdrop.open {
  display: flex;
}

.modal {
  background: #fff;
  border-radius: 8px;
  padding: 20px 24px;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal h2 {
  margin-top: 0;
  font-size: 18px;
}

.form-row {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-row label {
  font-size: 13px;
  color: #555;
}

.form-row input,
.form-row select,
.form-row textarea {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

/* FullCalendar 事件色塊。月檢視是小圓點＋文字（list-item），只有 border-color
   會拿去畫圓點，所以這裡的顏色深一點沒關係；週檢視是整塊填色（block），
   同樣的深色拿去整塊塗滿的話面積太大會很搶眼，所以週檢視另外用淺色版本。 */
.fc-event.status-unpaid {
  border-color: #c97f1e;
  color: #3a2400;
  font-weight: 600;
}

.fc-event.status-paid {
  border-color: #4a9e72;
  color: #0f3d22;
  font-weight: 600;
}

.fc-daygrid-event.status-unpaid {
  background: #f0a030;
}

.fc-daygrid-event.status-paid {
  background: #6cc194;
}

.fc-timegrid-event.status-unpaid {
  background: #fbe0b0;
}

.fc-timegrid-event.status-paid {
  background: #cdeedb;
}

/* FullCalendar 內層的 .fc-event-main 有自己更明確的白字規則，蓋掉外層 color，
   要直接指定內層文字顏色才會生效 */
.fc-timegrid-event.status-unpaid .fc-event-main {
  color: #6b4400;
}

.fc-timegrid-event.status-paid .fc-event-main {
  color: #123b25;
}

/* 行事曆色塊圖例 */
.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 10px;
  font-size: 13px;
  color: #555;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-sizing: border-box;
}

.legend-dot.status-unpaid {
  background: #f0a030;
}

.legend-dot.status-paid {
  background: #6cc194;
}

.legend-dot.status-cancelled {
  background: transparent;
  border: 1px dashed #999;
}

.fc-event.status-cancelled,
.fc-event.status-leave {
  background: transparent;
  border: 1px dashed #999;
  color: #777;
}

.legend-dot.legend-holiday {
  background: #fbdcd6;
}

/* 國定假日日格標色（行事曆） */
.fc-day-holiday {
  background: #fdf1ef;
}

.fc-daygrid-day.fc-day-holiday .fc-daygrid-day-number {
  color: #c0503c;
}

.holiday-label {
  display: block;
  font-size: 11px;
  color: #c0503c;
  padding: 0 4px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 統計卡片 */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.stat-card {
  background: #fff;
  border-radius: 8px;
  padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.stat-label {
  font-size: 13px;
  color: #777;
  margin-bottom: 6px;
}

.stat-value {
  font-size: 26px;
  font-weight: 700;
  color: #2d3142;
}

/* 未收款清單 */
.section-block {
  margin-bottom: 28px;
}

.section-block h2 {
  font-size: 16px;
  margin-bottom: 8px;
}

/* 訂場檢查：已訂區塊調淡顯示 */
.dimmed-table {
  opacity: 0.6;
}

details summary {
  cursor: pointer;
}

details table {
  margin-top: 8px;
}

/* 手機版適配 */
@media (max-width: 640px) {
  main {
    margin: 12px auto;
    padding: 0 10px;
  }

  .toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  th,
  td {
    padding: 8px;
    font-size: 13px;
  }

  .modal {
    max-width: 100%;
  }
}

/* 找空檔頁 */
.panel {
  background: #fff;
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  font-size: 14px;
}

.panel-textarea {
  width: 100%;
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.panel-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.hint {
  color: #777;
  font-size: 13px;
}

.check-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.check-list label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: normal;
}

.panel select {
  max-width: 240px;
}

.inline-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

/* display:flex 會蓋掉 hidden 屬性的預設隱藏效果，要另外指定 */
.inline-row[hidden] {
  display: none;
}

.inline-row input {
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.travel-input {
  width: 90px;
}

/* 找空檔結果表：日期、時段不換行，場館跟說明欄吃剩下的寬度 */
#result-block th:nth-child(-n + 2),
#candidate-list td:nth-child(-n + 2) {
  white-space: nowrap;
}

#candidate-list tr.group-row td {
  background: #eef0f4;
  font-weight: 600;
  font-size: 13px;
}

/* 登入頁 */
.login-main {
  max-width: 360px;
  margin-top: 12vh;
}

.login-panel h1 {
  margin-top: 0;
}

.login-panel button {
  width: 100%;
  padding: 10px;
  font-size: 15px;
}

/* 導覽列右側的登出 */
nav.topnav a.nav-logout {
  margin-left: auto;
}