* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #f2f2f7;
  color: #1c1c1e;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
}


/* =========================================================
   全体
   ========================================================= */

.page {
  max-width: 720px;
  margin: 0 auto;

  padding:
    10px
    8px
    28px;
}


/* =========================================================
   ヘッダー
   ========================================================= */

.topbar {
  display: grid;

  grid-template-columns:
    48px
    1fr
    48px;

  align-items: center;

  gap: 6px;

  margin-bottom: 8px;
}


.back,
.reload {
  color: #007aff;

  font-size: 13px;

  text-decoration: none;
}


.reload {
  border: 0;

  background: transparent;

  padding: 6px 0;

  text-align: right;

  cursor: pointer;
}


.title-block {
  text-align: center;
}


.title-block h1 {
  margin: 0;

  font-size: 18px;

  line-height: 1.2;
}


.title-block p {
  margin: 2px 0 0;

  color: #8e8e93;

  font-size: 10px;
}


/* =========================================================
   予約サイト
   ========================================================= */

.booking-button {
  display: block;

  margin-bottom: 8px;

  padding: 9px 12px;

  border-radius: 10px;

  background: #007aff;

  color: white;

  text-align: center;

  text-decoration: none;

  font-size: 13px;

  font-weight: 700;
}


/* =========================================================
   空き / 開放待ち
   ========================================================= */

.status-tabs {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 6px;

  margin-bottom: 6px;
}


.status-tab {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 5px;

  border: 1px solid transparent;

  border-radius: 10px;

  background: white;

  padding: 8px 4px;

  color: #8e8e93;

  font-size: 12px;

  cursor: pointer;

  box-shadow:
    0 1px 3px
    rgba(0, 0, 0, 0.05);

  opacity: 0.55;
}


.status-tab strong {
  font-size: 15px;
}


/* 空き ON */

.status-tab.available.active {
  background: #e9f9ee;

  color: #18873b;

  border-color: #34c759;

  opacity: 1;
}


/* 開放待ち ON */

.status-tab.waiting.active {
  background: #fff6d8;

  color: #8a6a00;

  border-color: #e9bd35;

  opacity: 1;
}


/* =========================================================
   フィルター
   ========================================================= */

.filters {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 6px;

  margin-bottom: 8px;
}


.filters select {
  width: 100%;

  border: 0;

  border-radius: 9px;

  background: white;

  padding: 8px 9px;

  color: #3a3a3c;

  font-size: 11px;
}


/* =========================================================
   日付
   ========================================================= */

.day-group {
  margin-top: 10px;
}


.day-title {
  margin:
    0
    0
    4px
    2px;

  color: #636366;

  font-size: 12px;

  font-weight: 700;
}


/* =========================================================
   空き枠一覧
   ========================================================= */

.slot-table {
  overflow: hidden;

  border-radius: 11px;

  background: white;

  box-shadow:
    0 1px 4px
    rgba(0, 0, 0, 0.05);
}


.slot-row {
  display: grid;

  grid-template-columns:
    76px
    minmax(0, 1fr)
    minmax(62px, auto)
    18px;

  align-items: center;

  gap: 6px;

  min-height: 38px;

  padding: 6px 8px;

  border-bottom:
    1px solid #ececf0;
}


.slot-row:last-child {
  border-bottom: 0;
}


/* 時間 */

.slot-time {
  font-size: 12px;

  font-weight: 700;

  white-space: nowrap;
}


/* 場所 */

.slot-place {
  min-width: 0;
}


.slot-facility {
  overflow: hidden;

  font-size: 12px;

  font-weight: 600;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.slot-court {
  overflow: hidden;

  margin-top: 1px;

  color: #8e8e93;

  font-size: 10px;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* 条件 */

.slot-condition {
  color: #8e8e93;

  font-size: 9px;

  text-align: right;

  white-space: nowrap;
}


/* 状態 */

.slot-status {
  font-size: 11px;

  text-align: center;
}


/* =========================================================
   警告
   ========================================================= */

.warning {
  margin: 8px 0;

  padding: 8px 9px;

  border-radius: 9px;

  background: #fff4e5;

  color: #8a5a00;

  font-size: 10px;

  line-height: 1.4;
}


/* =========================================================
   空表示
   ========================================================= */

.empty {
  margin-top: 24px;

  color: #8e8e93;

  font-size: 12px;

  text-align: center;
}


.hidden {
  display: none !important;
}


/* =========================================================
   スマホ
   ========================================================= */

@media (max-width: 430px) {

  .page {
    padding-left: 7px;
    padding-right: 7px;
  }


  .slot-row {
    grid-template-columns:
      70px
      minmax(0, 1fr)
      16px;

    gap: 5px;

    min-height: 36px;

    padding:
      5px
      7px;
  }


  /*
    スマホでは条件名は非表示
    場所と時間を優先
  */

  .slot-condition {
    display: none;
  }


  .filters select {
    font-size: 10px;
  }

}