source: petify-frontend/src/views/ClinicDashboardView.vue@ f6ed6e4

<template>
  <main class="clinic-dashboard">
    <section class="dashboard-header">
      <div class="container">
        <div>
          <p class="eyebrow">Clinic workspace</p>
          <h1 class="page-title">Appointments & Availability</h1>
          <p v-if="clinic" class="clinic-subtitle">{{ clinic.name }} - {{ clinic.city }}, {{ clinic.address }}</p>
        </div>
        <div v-if="canUseSchedule" class="toolbar">
          <button class="btn btn-outline-secondary btn-sm" type="button" @click="goToPreviousDay">
            Previous day
          </button>
          <input v-model="selectedDate" type="date" class="form-control date-input" />
          <button class="btn btn-outline-secondary btn-sm" type="button" @click="goToToday">
            Today
          </button>
          <button class="btn btn-outline-secondary btn-sm" type="button" @click="goToNextDay">
            Next day
          </button>
        </div>
      </div>
    </section>

    <section class="container dashboard-body">
      <div v-if="accessError" class="alert alert-danger">{{ accessError }}</div>
      <div v-if="scheduleError" class="alert alert-danger">{{ scheduleError }}</div>
      <div v-if="notificationsError" class="alert alert-danger">{{ notificationsError }}</div>

      <div v-if="!canUseDashboard" class="empty-state">
        <h2>Clinic login required</h2>
        <p>This dashboard is only available for logged-in clinic accounts.</p>
      </div>

      <template v-else>
        <section v-if="clinic && !canUseSchedule" class="setup-panel">
          <div>
            <p class="eyebrow">Required setup</p>
            <h2>Add your working schedule</h2>
            <p class="setup-copy">
              Users can book appointment slots only after your clinic adds working days and opening hours.
            </p>
          </div>

          <form class="schedule-form" @submit.prevent="saveSchedule">
            <fieldset class="days-fieldset">
              <legend>Working days</legend>
              <label v-for="day in workDayOptions" :key="day.value" class="day-check">
                <input
                  v-model="scheduleForm.workDays"
                  type="checkbox"
                  :value="day.value"
                />
                <span>{{ day.label }}</span>
              </label>
            </fieldset>

            <div class="time-grid">
              <div class="form-group">
                <label class="form-label" for="startTime">Start time</label>
                <input id="startTime" v-model="scheduleForm.startTime" class="form-control" type="time" required />
              </div>
              <div class="form-group">
                <label class="form-label" for="endTime">End time</label>
                <input id="endTime" v-model="scheduleForm.endTime" class="form-control" type="time" required />
              </div>
            </div>

            <div v-if="scheduleSetupError" class="alert alert-danger">{{ scheduleSetupError }}</div>
            <button class="btn btn-primary" type="submit" :disabled="isSavingSchedule">
              {{ isSavingSchedule ? 'Saving...' : 'Save schedule' }}
            </button>
          </form>
        </section>

        <template v-else>
        <div class="summary-strip">
          <div class="summary-item">
            <span class="summary-value">{{ appointments.length }}</span>
            <span class="summary-label">Appointments</span>
          </div>
          <div class="summary-item">
            <span class="summary-value">{{ availableSlots.length }}</span>
            <span class="summary-label">Available</span>
          </div>
          <div class="summary-item">
            <span class="summary-value">{{ unavailableSlots.length }}</span>
            <span class="summary-label">Not working</span>
          </div>
        </div>

        <div v-if="isLoading" class="alert alert-info">Loading clinic schedule...</div>

        <div v-else class="schedule-layout">
          <section class="schedule-section">
            <div class="section-heading">
              <h2>Slots for {{ selectedDate }}</h2>
              <button class="btn btn-outline-secondary btn-sm" type="button" @click="loadSchedule">Refresh</button>
            </div>

            <div class="slot-grid">
              <div v-if="daySlots.length === 0" class="panel-empty full-width">
                This is not a working day for your clinic.
              </div>
              <div
                v-for="slot in daySlots"
                :key="slot.dateTime"
                class="slot-card"
                :class="slot.kind"
              >
                <div class="slot-time">{{ slot.label }}</div>
                <div class="slot-main">
                  <span class="slot-status">{{ slot.statusText }}</span>
                  <span v-if="slot.detail" class="slot-detail">{{ slot.detail }}</span>
                </div>
                <button
                  v-if="slot.kind === 'available'"
                  type="button"
                  class="btn btn-sm btn-outline-danger"
                  @click="blockSlot(slot.dateTime)"
                >
                  Mark not working
                </button>
                <button
                  v-else-if="slot.kind === 'unavailable' && slot.unavailableSlotId"
                  type="button"
                  class="btn btn-sm btn-outline-secondary"
                  @click="unblockSlot(slot.unavailableSlotId)"
                >
                  Make available
                </button>
              </div>
            </div>
          </section>

          <aside class="appointments-panel">
            <section class="notifications-panel">
              <div class="section-heading compact">
                <h2>Notifications</h2>
                <button class="btn btn-outline-secondary btn-sm" type="button" @click="loadNotifications">Refresh</button>
              </div>
              <div v-if="notifications.length === 0" class="panel-empty">No notifications yet.</div>
              <div v-else class="notification-list">
                <article v-for="notification in notifications.slice(0, 5)" :key="notification.notificationId" class="notification-row">
                  <div class="notification-message">{{ notification.message }}</div>
                  <div class="notification-date">{{ formatDateTime(notification.createdAt) }}</div>
                </article>
              </div>
            </section>

            <h2>Appointments</h2>
            <div v-if="appointments.length === 0" class="panel-empty">No appointments on this date.</div>
            <div v-else class="appointment-list">
              <article v-for="appointment in appointments" :key="appointment.appointmentId" class="appointment-row">
                <div class="appointment-time">{{ appointment.label }}</div>
                <div>
                  <div class="appointment-title">{{ appointment.petName || 'Pet' }}</div>
                  <div class="appointment-meta">
                    {{ appointment.petSpecies || 'Species unknown' }} with {{ appointment.ownerName || 'owner' }}
                  </div>
                  <div v-if="appointment.notes" class="appointment-notes">{{ appointment.notes }}</div>
                  <button
                    v-if="canMarkNoShow(appointment)"
                    type="button"
                    class="btn btn-sm btn-outline-danger appointment-action"
                    :disabled="updatingAppointmentId === appointment.appointmentId"
                    @click="markNoShow(appointment)"
                  >
                    {{ updatingAppointmentId === appointment.appointmentId ? 'Updating...' : 'Mark no-show' }}
                  </button>
                </div>
                <span class="badge" :class="getStatusClass(appointment.status)">{{ appointment.status }}</span>
              </article>
            </div>
          </aside>
        </div>
        </template>
      </template>
    </section>
  </main>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import {
  createMyClinicUnavailableSlot,
  deleteMyClinicUnavailableSlot,
  getMyClinic,
  getMyClinicAppointments,
  getMyClinicUnavailableSlots,
  getMyNotifications,
  markMyClinicAppointmentNoShow,
  updateMyClinicSchedule,
  type AppNotification,
  type AppointmentSlot,
  type ClinicAppointment,
  type ClinicUnavailableSlot,
  type VetClinic,
} from '../api/profile'
import { useAuthStore } from '../stores/auth'

type ScheduleSlot = {
  dateTime: string
  label: string
  kind: 'available' | 'booked' | 'unavailable' | 'past'
  statusText: string
  detail?: string
  unavailableSlotId?: number
}

const router = useRouter()
const auth = useAuthStore()

const clinic = ref<VetClinic | null>(null)
const selectedDate = ref(toDateKey(new Date()))
const availableSlots = ref<AppointmentSlot[]>([])
const unavailableSlots = ref<ClinicUnavailableSlot[]>([])
const appointments = ref<ClinicAppointment[]>([])
const notifications = ref<AppNotification[]>([])
const isLoading = ref(false)
const isSavingSchedule = ref(false)
const updatingAppointmentId = ref<number | null>(null)
const accessError = ref('')
const scheduleError = ref('')
const scheduleSetupError = ref('')
const notificationsError = ref('')
const NON_BLOCKING_STATUSES = new Set(['CANCELLED', 'CANCELED', 'NO_SHOW'])
let latestScheduleRequest = 0

const canUseDashboard = computed(() => auth.isAuthenticated && auth.user?.userType === 'CLINIC')
const canUseSchedule = computed(() => Boolean(clinic.value?.scheduleComplete))
const scheduleForm = ref({
  workDays: [] as string[],
  startTime: '09:00',
  endTime: '17:00',
})
const workDayOptions = [
  { value: 'MONDAY', label: 'Mon' },
  { value: 'TUESDAY', label: 'Tue' },
  { value: 'WEDNESDAY', label: 'Wed' },
  { value: 'THURSDAY', label: 'Thu' },
  { value: 'FRIDAY', label: 'Fri' },
  { value: 'SATURDAY', label: 'Sat' },
  { value: 'SUNDAY', label: 'Sun' },
]

const appointmentsByDateTime = computed(() => {
  const map = new Map<string, ClinicAppointment>()
  appointments.value
    .filter((appointment) => !NON_BLOCKING_STATUSES.has(String(appointment.status || '').toUpperCase()))
    .forEach((appointment) => map.set(normalizeDateTime(appointment.dateTime), appointment))
  return map
})

const availableDateTimes = computed(() => {
  return new Set(availableSlots.value.map((slot) => normalizeDateTime(slot.dateTime)))
})

const unavailableByDateTime = computed(() => {
  const map = new Map<string, ClinicUnavailableSlot>()
  unavailableSlots.value.forEach((slot) => map.set(normalizeDateTime(slot.dateTime), slot))
  return map
})

const daySlots = computed<ScheduleSlot[]>(() => {
  const slots: ScheduleSlot[] = []
  const now = new Date()

  for (const time of getClinicTimesForDate(selectedDate.value)) {
      const dateTime = `${selectedDate.value}T${time}`
      const label = time
      const key = normalizeDateTime(dateTime)
      const appointment = appointmentsByDateTime.value.get(key)
      const unavailable = unavailableByDateTime.value.get(key)

      if (appointment) {
        slots.push({
          dateTime,
          label,
          kind: 'booked',
          statusText: 'Booked',
          detail: appointment.petName || undefined,
        })
      } else if (unavailable) {
        slots.push({
          dateTime,
          label,
          kind: 'unavailable',
          statusText: 'Not working',
          detail: unavailable.reason || undefined,
          unavailableSlotId: unavailable.slotId,
        })
      } else if (availableDateTimes.value.has(key)) {
        slots.push({
          dateTime,
          label,
          kind: 'available',
          statusText: 'Available',
        })
      } else if (new Date(dateTime).getTime() < now.getTime()) {
        slots.push({
          dateTime,
          label,
          kind: 'past',
          statusText: 'Past',
        })
      } else {
        slots.push({
          dateTime,
          label,
          kind: 'unavailable',
          statusText: 'Unavailable',
        })
      }
  }

  return slots
})

function buildAvailableSlots(
  date: string,
  clinicAppointments: ClinicAppointment[],
  clinicUnavailableSlots: ClinicUnavailableSlot[]
): AppointmentSlot[] {
  const now = new Date()
  const booked = new Set(
    clinicAppointments
      .filter((appointment) => !NON_BLOCKING_STATUSES.has(String(appointment.status || '').toUpperCase()))
      .map((appointment) => normalizeDateTime(appointment.dateTime))
  )
  const unavailable = new Set(
    clinicUnavailableSlots.map((slot) => normalizeDateTime(slot.dateTime))
  )
  const slots: AppointmentSlot[] = []

  for (const time of getClinicTimesForDate(date)) {
      const dateTime = `${date}T${time}`
      const key = normalizeDateTime(dateTime)
      if (new Date(dateTime).getTime() < now.getTime()) continue
      if (booked.has(key) || unavailable.has(key)) continue
      slots.push({
        dateTime,
        label: time,
      })
  }

  return slots
}

async function loadSchedule() {
  if (!auth.user?.userId || !canUseDashboard.value || !canUseSchedule.value || !selectedDate.value) return

  const requestId = ++latestScheduleRequest
  try {
    isLoading.value = true
    scheduleError.value = ''
    const [unavailable, clinicAppointments] = await Promise.all([
      getMyClinicUnavailableSlots(auth.user.userId, selectedDate.value),
      getMyClinicAppointments(auth.user.userId, selectedDate.value),
    ])

    if (requestId !== latestScheduleRequest) return
    unavailableSlots.value = unavailable
    appointments.value = clinicAppointments
    availableSlots.value = buildAvailableSlots(selectedDate.value, clinicAppointments, unavailable)
  } catch (error) {
    if (requestId !== latestScheduleRequest) return
    availableSlots.value = []
    unavailableSlots.value = []
    appointments.value = []
    scheduleError.value = error instanceof Error ? error.message : 'Failed to load clinic schedule'
  } finally {
    if (requestId === latestScheduleRequest) {
      isLoading.value = false
    }
  }
}

async function saveSchedule() {
  if (!auth.user?.userId) return
  if (scheduleForm.value.workDays.length === 0) {
    scheduleSetupError.value = 'Choose at least one working day'
    return
  }

  if (!scheduleForm.value.startTime || !scheduleForm.value.endTime) {
    scheduleSetupError.value = 'Start and end time are required'
    return
  }

  if (scheduleForm.value.startTime >= scheduleForm.value.endTime) {
    scheduleSetupError.value = 'Start time must be before end time'
    return
  }

  try {
    isSavingSchedule.value = true
    scheduleSetupError.value = ''
    clinic.value = await updateMyClinicSchedule(auth.user.userId, {
      workDays: scheduleForm.value.workDays.join(','),
      startTime: scheduleForm.value.startTime,
      endTime: scheduleForm.value.endTime,
    })
    hydrateScheduleForm()
    await loadSchedule()
  } catch (error) {
    scheduleSetupError.value = error instanceof Error ? error.message : 'Failed to save clinic schedule'
  } finally {
    isSavingSchedule.value = false
  }
}

async function loadNotifications() {
  if (!auth.user?.userId || !canUseDashboard.value) return

  try {
    notificationsError.value = ''
    notifications.value = await getMyNotifications(auth.user.userId)
  } catch (error) {
    notifications.value = []
    notificationsError.value = error instanceof Error ? error.message : 'Failed to load notifications'
  }
}

async function blockSlot(dateTime: string) {
  if (!auth.user?.userId) return
  const reason = window.prompt('Reason for blocking this slot?', 'Not working')
  if (reason === null) return

  try {
    scheduleError.value = ''
    await createMyClinicUnavailableSlot(auth.user.userId, {
      dateTime,
      reason: reason.trim() || 'Not working',
    })
    await loadSchedule()
  } catch (error) {
    scheduleError.value = error instanceof Error ? error.message : 'Failed to block slot'
  }
}

async function unblockSlot(slotId: number) {
  if (!auth.user?.userId) return

  try {
    scheduleError.value = ''
    await deleteMyClinicUnavailableSlot(auth.user.userId, slotId)
    await loadSchedule()
  } catch (error) {
    scheduleError.value = error instanceof Error ? error.message : 'Failed to unblock slot'
  }
}

function canMarkNoShow(appointment: ClinicAppointment): boolean {
  return ['CONFIRMED', 'DONE'].includes(appointment.status) && new Date(appointment.dateTime).getTime() <= Date.now()
}

async function markNoShow(appointment: ClinicAppointment) {
  if (!auth.user?.userId) return
  if (!window.confirm('Mark this appointment as no-show?')) return

  try {
    updatingAppointmentId.value = appointment.appointmentId
    scheduleError.value = ''
    const updated = await markMyClinicAppointmentNoShow(auth.user.userId, appointment.appointmentId)
    appointments.value = appointments.value.map((item) =>
      item.appointmentId === updated.appointmentId ? updated : item
    )
  } catch (error) {
    scheduleError.value = error instanceof Error ? error.message : 'Failed to mark appointment as no-show'
  } finally {
    updatingAppointmentId.value = null
  }
}

function getStatusClass(status: string): string {
  if (status === 'CONFIRMED' || status === 'DONE') return 'bg-success'
  if (status === 'CANCELLED' || status === 'CANCELED' || status === 'NO_SHOW') return 'bg-secondary'
  return 'bg-warning'
}

function normalizeDateTime(value: string): string {
  return value.length >= 16 ? value.slice(0, 16) : value
}

function toDateKey(date: Date): string {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

function shiftSelectedDate(days: number) {
  const date = new Date(`${selectedDate.value}T00:00:00`)
  date.setDate(date.getDate() + days)
  selectedDate.value = toDateKey(date)
}

function goToPreviousDay() {
  shiftSelectedDate(-1)
}

function goToNextDay() {
  shiftSelectedDate(1)
}

function goToToday() {
  selectedDate.value = toDateKey(new Date())
}

function hydrateScheduleForm() {
  scheduleForm.value = {
    workDays: clinic.value?.workDays ? clinic.value.workDays.split(',').map((day) => day.trim()).filter(Boolean) : [],
    startTime: clinic.value?.startTime?.slice(0, 5) || '09:00',
    endTime: clinic.value?.endTime?.slice(0, 5) || '17:00',
  }
}

function getClinicTimesForDate(date: string): string[] {
  if (!clinic.value?.workDays || !clinic.value.startTime || !clinic.value.endTime) return []
  if (!isClinicWorkingDay(date)) return []

  const times: string[] = []
  const start = timeToMinutes(clinic.value.startTime)
  const end = timeToMinutes(clinic.value.endTime)

  for (let minutes = start; minutes < end; minutes += 30) {
    times.push(minutesToTime(minutes))
  }

  return times
}

function isClinicWorkingDay(date: string): boolean {
  const day = new Date(`${date}T00:00:00`).toLocaleDateString('en-US', { weekday: 'long' }).toUpperCase()
  return clinic.value?.workDays?.split(',').map((item) => item.trim().toUpperCase()).includes(day) ?? false
}

function timeToMinutes(time: string): number {
  const parts = time.slice(0, 5).split(':').map(Number)
  const hours = parts[0] ?? 0
  const minutes = parts[1] ?? 0
  return hours * 60 + minutes
}

function minutesToTime(total: number): string {
  const hours = Math.floor(total / 60)
  const minutes = total % 60
  return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`
}

function formatDateTime(value: string): string {
  return new Date(value).toLocaleString('en-US', {
    month: 'short',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
  })
}

onMounted(async () => {
  if (!auth.isAuthenticated) {
    router.push('/login')
    return
  }

  if (auth.user?.userType !== 'CLINIC') {
    accessError.value = 'This dashboard is only available for clinic accounts.'
    return
  }

  try {
    clinic.value = await getMyClinic(auth.user.userId)
    hydrateScheduleForm()
    accessError.value = ''
  } catch (error) {
    accessError.value = error instanceof Error ? error.message : 'Unable to load your clinic profile'
    return
  }

  if (canUseSchedule.value) {
    await Promise.all([loadSchedule(), loadNotifications()])
  } else {
    await loadNotifications()
  }
})

watch(selectedDate, () => {
  loadSchedule()
})
</script>

<style scoped>
.clinic-dashboard {
  min-height: 100vh;
  background: #f7fafc;
  padding-bottom: 56px;
}

.dashboard-header {
  background: white;
  border-bottom: 1px solid #e2e8f0;
  padding: 32px 0;
}

.dashboard-header .container {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.eyebrow {
  color: #f97316;
  font-weight: 700;
  margin: 0 0 8px;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.page-title {
  color: #1a202c;
  font-size: 2rem;
  margin: 0;
}

.clinic-subtitle {
  color: #718096;
  margin: 8px 0 0;
  font-weight: 600;
}

.toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
}

.date-input {
  width: 180px;
}

.dashboard-body {
  padding-top: 32px;
}

.empty-state,
.summary-strip,
.schedule-section,
.appointments-panel,
.setup-panel {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.empty-state {
  padding: 48px;
  text-align: center;
}

.empty-state h2 {
  font-size: 1.35rem;
  margin: 0 0 8px;
}

.empty-state p {
  color: #718096;
  margin: 0;
}

.setup-panel {
  display: grid;
  gap: 24px;
  padding: 28px;
}

.setup-panel h2 {
  color: #1a202c;
  font-size: 1.45rem;
  margin: 0 0 8px;
}

.setup-copy {
  color: #718096;
  margin: 0;
}

.schedule-form {
  display: grid;
  gap: 20px;
  max-width: 720px;
}

.days-fieldset {
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.days-fieldset legend {
  color: #2d3748;
  font-weight: 700;
  margin-bottom: 8px;
  width: 100%;
}

.day-check {
  align-items: center;
  border: 1px solid #cbd5e0;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  gap: 8px;
  padding: 9px 12px;
}

.day-check:has(input:checked) {
  background: #fff7ed;
  border-color: #f97316;
  color: #9a3412;
}

.time-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 180px));
  gap: 16px;
}

.form-group {
  display: grid;
  gap: 8px;
}

.form-label {
  color: #2d3748;
  font-weight: 700;
}

.summary-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 20px;
}

.summary-item {
  padding: 20px 24px;
  border-right: 1px solid #e2e8f0;
}

.summary-item:last-child {
  border-right: none;
}

.summary-value {
  display: block;
  font-size: 1.8rem;
  color: #1a202c;
  font-weight: 800;
}

.summary-label {
  color: #718096;
  font-weight: 600;
}

.schedule-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 20px;
  align-items: start;
}

.schedule-section,
.appointments-panel {
  padding: 24px;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 16px;
}

.section-heading.compact {
  margin-bottom: 12px;
}

.notifications-panel {
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 20px;
  padding-bottom: 20px;
}

.notification-list {
  display: grid;
  gap: 10px;
}

.notification-row {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  padding: 10px 12px;
}

.notification-message {
  color: #2d3748;
  font-weight: 600;
  line-height: 1.35;
}

.notification-date {
  color: #718096;
  font-size: 0.82rem;
  margin-top: 4px;
}

.section-heading h2,
.appointments-panel h2 {
  font-size: 1.2rem;
  margin: 0;
  color: #1a202c;
}

.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}

.full-width {
  grid-column: 1 / -1;
}

.slot-card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px;
  display: grid;
  gap: 10px;
  min-height: 136px;
  align-content: start;
}

.slot-card.available {
  border-color: #9ae6b4;
  background: #f0fff4;
}

.slot-card.booked {
  border-color: #90cdf4;
  background: #ebf8ff;
}

.slot-card.unavailable {
  border-color: #fed7d7;
  background: #fff5f5;
}

.slot-card.past {
  color: #718096;
  background: #edf2f7;
}

.slot-time {
  font-size: 1.25rem;
  font-weight: 800;
  color: #1a202c;
}

.slot-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.slot-status {
  font-weight: 700;
}

.slot-detail {
  color: #4a5568;
  font-size: 0.9rem;
}

.appointment-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.appointment-row {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.appointment-time {
  font-weight: 800;
  color: #f97316;
}

.appointment-title {
  font-weight: 800;
  color: #1a202c;
}

.appointment-meta,
.appointment-notes,
.panel-empty {
  color: #718096;
  font-size: 0.9rem;
}

.appointment-notes {
  margin-top: 6px;
  background: #f7fafc;
  padding: 8px;
  border-radius: 6px;
}

.appointment-action {
  margin-top: 10px;
}

.badge {
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.75rem;
}

.bg-success {
  background: #c6f6d5;
  color: #22543d;
}

.bg-secondary {
  background: #e2e8f0;
  color: #2d3748;
}

.bg-warning {
  background: #fefcbf;
  color: #744210;
}

@media (max-width: 980px) {
  .dashboard-header .container,
  .toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .date-input {
    min-width: 0;
    width: 100%;
  }

  .schedule-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .summary-strip {
    grid-template-columns: 1fr;
  }

  .summary-item {
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
  }

  .summary-item:last-child {
    border-bottom: none;
  }
}
</style>