<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import http, { apiErrorMessage } from '../api/http'
import { useAuthStore } from '../stores/auth'

interface TermOption {
  id: string
  name: string
  startDate: string
  endDate: string
  isCurrent: boolean
  hasPublishedTimetable: boolean
}

interface CampusOption {
  id: string
  code: string
  name: string
}

interface BuildingOption {
  id: string
  code: string
  name: string
  campusId: string
}

interface ClassroomOption {
  id: string
  code: string
  name: string
  buildingId: string
  capacity: number
  roomType: string
}

interface AvailableClassroom extends ClassroomOption {
  buildingName: string
  campusId: string
  campusName: string
}

interface TimeSlot {
  periodNumber: number
  name: string
  startTime: string
  endTime: string
}

interface Applicant {
  id: string
  displayName: string
  collegeId: string
  collegeName: string
}

interface Reservation {
  id: string
  applicantUserId: string
  applicantName: string
  applicantCollegeId: string
  applicantCollegeName: string
  academicTermId: string
  academicTermName: string
  classroomId: string
  classroomCode: string
  classroomName: string
  buildingName: string
  campusName: string
  reservationDate: string
  startPeriod: number
  periodCount: number
  attendeeCount: number
  purpose: string
  contactPhone: string
  notes?: string
  status: 'Submitted' | 'Approved' | 'Rejected' | 'Cancelled'
  reviewComment?: string
  reviewedAt?: string
  cancelledAt?: string
  createdAt: string
}

interface PagedResponse {
  items: Reservation[]
  total: number
  page: number
  pageSize: number
}

const auth = useAuthStore()
const isCollegeAdmin = computed(() =>
  auth.user?.roles.includes('CollegeAdmin') ?? false,
)
const activeTab = ref<'mine' | 'review'>('mine')
const loading = ref(false)
const submitting = ref(false)
const availabilityLoading = ref(false)
const applicant = ref<Applicant | null>(null)
const applicantProblem = ref('')
const terms = ref<TermOption[]>([])
const campuses = ref<CampusOption[]>([])
const buildings = ref<BuildingOption[]>([])
const classrooms = ref<ClassroomOption[]>([])
const timeSlots = ref<TimeSlot[]>([])
const availableRooms = ref<AvailableClassroom[]>([])
const availabilityChecked = ref(false)
const mine = ref<Reservation[]>([])
const mineTotal = ref(0)
const minePage = ref(1)
const reviewItems = ref<Reservation[]>([])
const reviewTotal = ref(0)
const reviewPage = ref(1)
const pageSize = 12
const reviewStatus = ref<Reservation['status'] | ''>('Submitted')

const form = reactive({
  academicTermId: '',
  reservationDate: '',
  campusId: '',
  buildingId: '',
  classroomId: '',
  startPeriod: 1,
  periodCount: 2,
  attendeeCount: 1,
  purpose: '',
  contactPhone: '',
  notes: '',
})

const selectedTerm = computed(() =>
  terms.value.find((term) => term.id === form.academicTermId),
)
const filteredBuildings = computed(() =>
  buildings.value.filter((building) =>
    !form.campusId || building.campusId === form.campusId,
  ),
)
const availablePeriodCounts = computed(() => {
  const enabled = new Set(timeSlots.value.map((slot) => slot.periodNumber))
  const counts: number[] = []
  for (let count = 1; count <= 6; count += 1) {
    if (!enabled.has(form.startPeriod + count - 1)) break
    counts.push(count)
  }
  return counts
})

const statusMeta: Record<Reservation['status'], { label: string; type: 'warning' | 'success' | 'danger' | 'info' }> = {
  Submitted: { label: '待学院审核', type: 'warning' },
  Approved: { label: '已批准', type: 'success' },
  Rejected: { label: '已驳回', type: 'danger' },
  Cancelled: { label: '已取消', type: 'info' },
}

function statusInfo(status: unknown) {
  return statusMeta[status as Reservation['status']]
    ?? { label: '未知状态', type: 'info' as const }
}

function todayText() {
  const formatter = new Intl.DateTimeFormat('en-CA', {
    timeZone: 'Asia/Shanghai',
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
  })
  return formatter.format(new Date())
}

function initialReservationDate(term?: TermOption) {
  const today = todayText()
  if (!term) return today
  if (today < term.startDate) return term.startDate
  if (today > term.endDate) return ''
  return today
}

function invalidateAvailability() {
  availabilityChecked.value = false
  availableRooms.value = []
  form.classroomId = ''
}

async function loadOptions(termId?: string) {
  const { data } = await http.get('/classroom-reservations/options', {
    params: termId ? { academicTermId: termId } : {},
  })
  applicant.value = data.applicant
  applicantProblem.value = data.applicantProblem ?? ''
  terms.value = data.terms
  campuses.value = data.campuses
  buildings.value = data.buildings
  classrooms.value = data.classrooms
  timeSlots.value = data.timeSlots
  const nextTermId = termId || data.selectedTermId || ''
  form.academicTermId = nextTermId
  if (!timeSlots.value.some((slot) => slot.periodNumber === form.startPeriod)) {
    form.startPeriod = timeSlots.value[0]?.periodNumber ?? 1
  }
  if (!availablePeriodCounts.value.includes(form.periodCount)) {
    form.periodCount = availablePeriodCounts.value[0] ?? 1
  }
  if (!form.reservationDate ||
      form.reservationDate < (selectedTerm.value?.startDate ?? '') ||
      form.reservationDate > (selectedTerm.value?.endDate ?? '9999-12-31')) {
    form.reservationDate = initialReservationDate(selectedTerm.value)
  }
  invalidateAvailability()
}

async function changeTerm(termId: string) {
  try {
    await loadOptions(termId)
  } catch (error) {
    ElMessage.error(apiErrorMessage(error))
  }
}

function changeCampus() {
  if (form.buildingId &&
      !filteredBuildings.value.some((building) => building.id === form.buildingId)) {
    form.buildingId = ''
  }
  invalidateAvailability()
}

function isDateDisabled(value: Date) {
  const term = selectedTerm.value
  if (!term) return true
  const date = [
    value.getFullYear(),
    String(value.getMonth() + 1).padStart(2, '0'),
    String(value.getDate()).padStart(2, '0'),
  ].join('-')
  return date < todayText() || date < term.startDate || date > term.endDate
}

async function queryAvailability() {
  if (!form.academicTermId || !form.reservationDate) {
    ElMessage.warning('请先选择学期和预约日期。')
    return
  }
  availabilityLoading.value = true
  try {
    const { data } = await http.get('/classroom-reservations/availability', {
      params: {
        academicTermId: form.academicTermId,
        reservationDate: form.reservationDate,
        startPeriod: form.startPeriod,
        periodCount: form.periodCount,
        campusId: form.campusId || undefined,
        buildingId: form.buildingId || undefined,
        attendeeCount: form.attendeeCount,
      },
    })
    availableRooms.value = data.items
    availabilityChecked.value = true
    if (!availableRooms.value.some((room) => room.id === form.classroomId)) {
      form.classroomId = ''
    }
    if (availableRooms.value.length === 0) {
      ElMessage.warning('当前条件下没有可预约教室，请调整日期、节次或人数。')
    }
  } catch (error) {
    availabilityChecked.value = false
    ElMessage.error(apiErrorMessage(error))
  } finally {
    availabilityLoading.value = false
  }
}

async function submitReservation() {
  if (!applicant.value) {
    ElMessage.error(applicantProblem.value || '当前账号没有可用的学院归属。')
    return
  }
  if (!availabilityChecked.value || !form.classroomId) {
    ElMessage.warning('请先查询可用教室并选择教室。')
    return
  }
  if (!form.purpose.trim() || !form.contactPhone.trim()) {
    ElMessage.warning('请填写借用用途和联系电话。')
    return
  }
  submitting.value = true
  try {
    await http.post('/classroom-reservations', {
      academicTermId: form.academicTermId,
      classroomId: form.classroomId,
      reservationDate: form.reservationDate,
      startPeriod: form.startPeriod,
      periodCount: form.periodCount,
      attendeeCount: form.attendeeCount,
      purpose: form.purpose.trim(),
      contactPhone: form.contactPhone.trim(),
      notes: form.notes.trim() || null,
    })
    ElMessage.success('申请已提交，将由您所在学院审核。')
    form.purpose = ''
    form.notes = ''
    invalidateAvailability()
    activeTab.value = 'mine'
    minePage.value = 1
    await loadMine()
  } catch (error) {
    ElMessage.error(apiErrorMessage(error))
  } finally {
    submitting.value = false
  }
}

async function loadMine() {
  loading.value = true
  try {
    const { data } = await http.get<PagedResponse>('/classroom-reservations/mine', {
      params: { page: minePage.value, pageSize },
    })
    mine.value = data.items
    mineTotal.value = data.total
  } catch (error) {
    ElMessage.error(apiErrorMessage(error))
  } finally {
    loading.value = false
  }
}

async function loadReview() {
  if (!isCollegeAdmin.value) return
  loading.value = true
  try {
    const { data } = await http.get<PagedResponse>('/classroom-reservations/review', {
      params: {
        status: reviewStatus.value || undefined,
        page: reviewPage.value,
        pageSize,
      },
    })
    reviewItems.value = data.items
    reviewTotal.value = data.total
  } catch (error) {
    ElMessage.error(apiErrorMessage(error))
  } finally {
    loading.value = false
  }
}

async function changeTab(name: string | number) {
  activeTab.value = name as 'mine' | 'review'
  if (activeTab.value === 'review') await loadReview()
}

async function cancelReservation(item: Reservation | Record<string, any>) {
  try {
    await ElMessageBox.confirm(
      item.status === 'Approved'
        ? '该预约已经批准，取消后教室将立即释放。确认取消吗？'
        : '确认撤回这条待审核申请吗？',
      '取消教室预约',
      { type: 'warning', confirmButtonText: '确认取消', cancelButtonText: '暂不取消' },
    )
    await http.post(`/classroom-reservations/${item.id}/cancel`)
    ElMessage.success('预约已取消。')
    await loadMine()
  } catch (error) {
    if (error === 'cancel' || error === 'close') return
    ElMessage.error(apiErrorMessage(error))
  }
}

async function approveReservation(item: Reservation | Record<string, any>) {
  try {
    await ElMessageBox.confirm(
      `确认批准 ${item.applicantName} 对 ${item.buildingName} ${item.classroomName} 的借用申请吗？系统会再次检查占用冲突。`,
      '批准教室借用',
      { type: 'success', confirmButtonText: '批准', cancelButtonText: '返回' },
    )
    await http.post(`/classroom-reservations/${item.id}/approve`, { comment: null })
    ElMessage.success('申请已批准。')
    await loadReview()
  } catch (error) {
    if (error === 'cancel' || error === 'close') return
    ElMessage.error(apiErrorMessage(error))
  }
}

async function rejectReservation(item: Reservation | Record<string, any>) {
  try {
    const result = await ElMessageBox.prompt(
      '请填写驳回原因，申请人将在消息中心收到该意见。',
      '驳回教室借用',
      {
        inputType: 'textarea',
        inputPlaceholder: '请输入具体原因',
        inputValidator: (value) => value.trim().length > 0 || '驳回原因不能为空',
        confirmButtonText: '确认驳回',
        cancelButtonText: '返回',
        type: 'warning',
      },
    )
    await http.post(`/classroom-reservations/${item.id}/reject`, {
      comment: result.value.trim(),
    })
    ElMessage.success('申请已驳回。')
    await loadReview()
  } catch (error) {
    if (error === 'cancel' || error === 'close') return
    ElMessage.error(apiErrorMessage(error))
  }
}

function periodText(item: Reservation | Record<string, any>) {
  const end = item.startPeriod + item.periodCount - 1
  return item.periodCount === 1
    ? `第 ${item.startPeriod} 节`
    : `第 ${item.startPeriod}—${end} 节`
}

function roomLabel(room: AvailableClassroom) {
  return `${room.campusName} · ${room.buildingName} · ${room.name}（${room.capacity} 人）`
}

function formatDateTime(value?: string) {
  return value ? new Date(value).toLocaleString('zh-CN', { hour12: false }) : '—'
}

onMounted(async () => {
  try {
    await Promise.all([loadOptions(), loadMine()])
  } catch (error) {
    ElMessage.error(apiErrorMessage(error))
  }
})
</script>

<template>
  <section class="reservation-page">
    <header class="page-heading">
      <div>
        <p class="eyebrow">教学场地</p>
        <h2>教室借用与预约</h2>
        <p>选择正式课表之外的空闲时段提交申请，由申请人所在学院审核。</p>
      </div>
      <el-tag v-if="applicant" type="success" effect="plain" size="large">
        审核学院：{{ applicant.collegeName }}
      </el-tag>
    </header>

    <el-alert
      v-if="applicantProblem"
      :title="applicantProblem"
      type="warning"
      show-icon
      :closable="false"
      class="scope-alert"
    />

    <el-card class="application-card" shadow="never">
      <template #header>
        <div class="card-title">
          <div>
            <h3>提交借用申请</h3>
            <p>系统会避让正式课程、已发布考试及已批准的教室预约。</p>
          </div>
          <span v-if="applicant">{{ applicant.displayName }} · {{ applicant.collegeName }}</span>
        </div>
      </template>

      <el-form label-position="top" :disabled="!applicant">
        <div class="form-grid">
          <el-form-item label="学期" required>
            <el-select
              v-model="form.academicTermId"
              placeholder="选择学期"
              @change="changeTerm"
            >
              <el-option
                v-for="term in terms"
                :key="term.id"
                :value="term.id"
                :label="`${term.name}${term.hasPublishedTimetable ? '' : '（课表未发布）'}`"
                :disabled="!term.hasPublishedTimetable"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="预约日期" required>
            <el-date-picker
              v-model="form.reservationDate"
              type="date"
              value-format="YYYY-MM-DD"
              format="YYYY-MM-DD"
              placeholder="选择日期"
              :disabled-date="isDateDisabled"
              @change="invalidateAvailability"
            />
          </el-form-item>
          <el-form-item label="开始节次" required>
            <el-select v-model="form.startPeriod" @change="invalidateAvailability">
              <el-option
                v-for="slot in timeSlots"
                :key="slot.periodNumber"
                :value="slot.periodNumber"
                :label="`${slot.name}${slot.startTime ? `（${slot.startTime}—${slot.endTime}）` : ''}`"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="连续节数" required>
            <el-select v-model="form.periodCount" @change="invalidateAvailability">
              <el-option
                v-for="count in availablePeriodCounts"
                :key="count"
                :value="count"
                :label="`${count} 节`"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="预计人数" required>
            <el-input-number
              v-model="form.attendeeCount"
              :min="1"
              :max="10000"
              controls-position="right"
              @change="invalidateAvailability"
            />
          </el-form-item>
          <el-form-item label="校区">
            <el-select
              v-model="form.campusId"
              clearable
              placeholder="全部校区"
              @change="changeCampus"
            >
              <el-option
                v-for="campus in campuses"
                :key="campus.id"
                :value="campus.id"
                :label="campus.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="教学楼">
            <el-select
              v-model="form.buildingId"
              clearable
              placeholder="全部教学楼"
              @change="invalidateAvailability"
            >
              <el-option
                v-for="building in filteredBuildings"
                :key="building.id"
                :value="building.id"
                :label="building.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="可用教室" required>
            <div class="room-picker">
              <el-select
                v-model="form.classroomId"
                filterable
                :disabled="!availabilityChecked"
                :placeholder="availabilityChecked ? '选择可用教室' : '请先查询可用教室'"
              >
                <el-option
                  v-for="room in availableRooms"
                  :key="room.id"
                  :value="room.id"
                  :label="roomLabel(room)"
                />
              </el-select>
              <el-button
                :loading="availabilityLoading"
                type="primary"
                plain
                @click="queryAvailability"
              >
                查询可用教室
              </el-button>
            </div>
          </el-form-item>
          <el-form-item label="借用用途" required class="span-2">
            <el-input
              v-model="form.purpose"
              maxlength="200"
              show-word-limit
              placeholder="例如：学院学术讲座、班级主题活动"
            />
          </el-form-item>
          <el-form-item label="联系电话" required>
            <el-input
              v-model="form.contactPhone"
              maxlength="30"
              placeholder="便于审核人联系"
            />
          </el-form-item>
          <el-form-item label="补充说明" class="span-2">
            <el-input
              v-model="form.notes"
              type="textarea"
              :rows="3"
              maxlength="500"
              show-word-limit
              placeholder="可填写设备、布置或其他需求"
            />
          </el-form-item>
        </div>
        <div class="submit-row">
          <p v-if="availabilityChecked">
            已找到 <b>{{ availableRooms.length }}</b> 间符合条件的空闲教室
          </p>
          <span v-else>日期、节次、人数变化后需重新查询可用教室。</span>
          <el-button
            type="primary"
            size="large"
            :loading="submitting"
            @click="submitReservation"
          >
            提交学院审核
          </el-button>
        </div>
      </el-form>
    </el-card>

    <el-card class="records-card" shadow="never">
      <el-tabs v-model="activeTab" @tab-change="changeTab">
        <el-tab-pane label="我的申请" name="mine">
          <div v-loading="loading">
            <el-table :data="mine" class="desktop-table">
              <el-table-column label="日期与节次" min-width="150">
                <template #default="{ row }">
                  <b>{{ row.reservationDate }}</b>
                  <small>{{ periodText(row) }}</small>
                </template>
              </el-table-column>
              <el-table-column label="教室" min-width="190">
                <template #default="{ row }">
                  <b>{{ row.buildingName }} · {{ row.classroomName }}</b>
                  <small>{{ row.campusName }} · {{ row.attendeeCount }} 人</small>
                </template>
              </el-table-column>
              <el-table-column prop="purpose" label="用途" min-width="180" show-overflow-tooltip />
              <el-table-column label="状态" width="120">
                <template #default="{ row }">
                  <el-tag :type="statusInfo(row.status).type">
                    {{ statusInfo(row.status).label }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="审核意见" min-width="170">
                <template #default="{ row }">{{ row.reviewComment || '—' }}</template>
              </el-table-column>
              <el-table-column label="操作" width="90" fixed="right">
                <template #default="{ row }">
                  <el-button
                    v-if="['Submitted', 'Approved'].includes(row.status)"
                    link
                    type="danger"
                    @click="cancelReservation(row)"
                  >
                    取消
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="mobile-records">
              <article v-for="item in mine" :key="item.id" class="record-item">
                <header>
                  <div>
                    <b>{{ item.reservationDate }} · {{ periodText(item) }}</b>
                    <span>{{ item.buildingName }} {{ item.classroomName }}</span>
                  </div>
                  <el-tag :type="statusInfo(item.status).type">
                    {{ statusInfo(item.status).label }}
                  </el-tag>
                </header>
                <p>{{ item.purpose }}</p>
                <small>{{ item.attendeeCount }} 人 · {{ item.contactPhone }}</small>
                <blockquote v-if="item.reviewComment">{{ item.reviewComment }}</blockquote>
                <el-button
                  v-if="['Submitted', 'Approved'].includes(item.status)"
                  type="danger"
                  plain
                  @click="cancelReservation(item)"
                >
                  取消预约
                </el-button>
              </article>
            </div>
            <el-empty v-if="mine.length === 0" description="还没有教室借用申请" />
            <el-pagination
              v-if="mineTotal > pageSize"
              v-model:current-page="minePage"
              :page-size="pageSize"
              :total="mineTotal"
              layout="prev, pager, next"
              @current-change="loadMine"
            />
          </div>
        </el-tab-pane>

        <el-tab-pane v-if="isCollegeAdmin" label="本院审核" name="review">
          <div class="review-toolbar">
            <div>
              <h3>{{ applicant?.collegeName || auth.user?.displayName }}审核队列</h3>
              <p>这里只显示申请人归属本学院的教室借用申请。</p>
            </div>
            <el-select
              v-model="reviewStatus"
              style="width: 150px"
              @change="reviewPage = 1; loadReview()"
            >
              <el-option label="待审核" value="Submitted" />
              <el-option label="已批准" value="Approved" />
              <el-option label="已驳回" value="Rejected" />
              <el-option label="已取消" value="Cancelled" />
              <el-option label="全部状态" value="" />
            </el-select>
          </div>
          <div v-loading="loading">
            <el-table :data="reviewItems" class="desktop-table">
              <el-table-column label="申请人" min-width="140">
                <template #default="{ row }">
                  <b>{{ row.applicantName }}</b>
                  <small>{{ row.applicantCollegeName }}</small>
                </template>
              </el-table-column>
              <el-table-column label="日期与教室" min-width="220">
                <template #default="{ row }">
                  <b>{{ row.reservationDate }} · {{ periodText(row) }}</b>
                  <small>{{ row.campusName }} · {{ row.buildingName }} {{ row.classroomName }}</small>
                </template>
              </el-table-column>
              <el-table-column label="用途与人数" min-width="220">
                <template #default="{ row }">
                  <span>{{ row.purpose }}</span>
                  <small>{{ row.attendeeCount }} 人 · {{ row.contactPhone }}</small>
                </template>
              </el-table-column>
              <el-table-column label="提交时间" width="170">
                <template #default="{ row }">{{ formatDateTime(row.createdAt) }}</template>
              </el-table-column>
              <el-table-column label="状态" width="120">
                <template #default="{ row }">
                  <el-tag :type="statusInfo(row.status).type">
                    {{ statusInfo(row.status).label }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="150" fixed="right">
                <template #default="{ row }">
                  <template v-if="row.status === 'Submitted'">
                    <el-button link type="success" @click="approveReservation(row)">批准</el-button>
                    <el-button link type="danger" @click="rejectReservation(row)">驳回</el-button>
                  </template>
                  <span v-else>{{ row.reviewComment || '—' }}</span>
                </template>
              </el-table-column>
            </el-table>
            <div class="mobile-records">
              <article v-for="item in reviewItems" :key="item.id" class="record-item">
                <header>
                  <div>
                    <b>{{ item.applicantName }} · {{ item.reservationDate }}</b>
                    <span>{{ periodText(item) }} · {{ item.buildingName }} {{ item.classroomName }}</span>
                  </div>
                  <el-tag :type="statusInfo(item.status).type">
                    {{ statusInfo(item.status).label }}
                  </el-tag>
                </header>
                <p>{{ item.purpose }}</p>
                <small>{{ item.attendeeCount }} 人 · {{ item.contactPhone }}</small>
                <div v-if="item.status === 'Submitted'" class="review-actions">
                  <el-button type="success" @click="approveReservation(item)">批准</el-button>
                  <el-button type="danger" plain @click="rejectReservation(item)">驳回</el-button>
                </div>
                <blockquote v-else-if="item.reviewComment">{{ item.reviewComment }}</blockquote>
              </article>
            </div>
            <el-empty v-if="reviewItems.length === 0" description="当前筛选下没有申请" />
            <el-pagination
              v-if="reviewTotal > pageSize"
              v-model:current-page="reviewPage"
              :page-size="pageSize"
              :total="reviewTotal"
              layout="prev, pager, next"
              @current-change="loadReview"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </section>
</template>

<style scoped>
.reservation-page {
  display: grid;
  gap: 20px;
}

.page-heading,
.card-title,
.submit-row,
.review-toolbar,
.record-item header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.page-heading h2,
.card-title h3,
.review-toolbar h3 {
  margin: 0;
  color: #183b56;
}

.page-heading p,
.card-title p,
.review-toolbar p {
  margin: 5px 0 0;
  color: #6c7f90;
}

.eyebrow {
  color: #17867c !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
}

.scope-alert {
  border: 1px solid #f3d7a5;
}

.application-card,
.records-card {
  border: 1px solid #dfe9ec;
  border-radius: 12px;
}

.card-title > span {
  color: #17867c;
  font-weight: 700;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 16px;
}

.span-2 {
  grid-column: span 2;
}

.room-picker {
  display: flex;
  width: 100%;
  gap: 8px;
}

.room-picker .el-select {
  flex: 1;
}

.submit-row {
  padding-top: 10px;
  border-top: 1px dashed #dfe9ec;
}

.submit-row p,
.submit-row span {
  margin: 0;
  color: #6c7f90;
  font-size: 13px;
}

.submit-row b {
  color: #17867c;
}

.desktop-table b,
.desktop-table span,
.desktop-table small {
  display: block;
}

.desktop-table small {
  margin-top: 4px;
  color: #7a8a99;
}

.review-toolbar {
  margin-bottom: 16px;
}

.mobile-records {
  display: none;
}

.record-item {
  align-items: stretch;
  flex-direction: column;
  padding: 15px;
  border: 1px solid #dfe9ec;
  border-radius: 10px;
  background: #fff;
}

.record-item + .record-item {
  margin-top: 10px;
}

.record-item header {
  align-items: flex-start;
}

.record-item header b,
.record-item header span,
.record-item small {
  display: block;
}

.record-item header span,
.record-item small {
  margin-top: 4px;
  color: #738596;
}

.record-item p {
  margin: 12px 0 2px;
  color: #29495f;
}

.record-item blockquote {
  margin: 10px 0 0;
  padding: 9px 12px;
  border-left: 3px solid #e4a74e;
  background: #fff9ef;
  color: #805d2c;
}

.review-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.el-pagination {
  justify-content: flex-end;
  margin-top: 16px;
}

@media (max-width: 1100px) {
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .page-heading,
  .card-title,
  .submit-row,
  .review-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .span-2 {
    grid-column: span 1;
  }

  .room-picker {
    flex-direction: column;
  }

  .submit-row .el-button,
  .review-toolbar .el-select {
    width: 100% !important;
  }

  .desktop-table {
    display: none;
  }

  .mobile-records {
    display: block;
  }

  .el-pagination {
    justify-content: center;
  }
}
</style>
