<template>
  <div class="page">
    <NavBar />
    <main class="container">
      <div class="page-header">
        <h1>Dashboard</h1>
        <ChildSelector />
      </div>

      <div v-if="!activeChild" class="empty-state">
        <p>Add a child in <RouterLink to="/admin">Admin</RouterLink> to get started.</p>
      </div>

      <div v-else class="dashboard-grid">

        <!-- Top row: TV Dashboard · 3 Strikes · Overlays -->
        <div class="top-row">
          <!-- TV Link -->
          <div class="card tv-card">
            <div class="card-title">TV Dashboard</div>
            <p class="tv-desc">Open this on the living room TV for the full-screen view.</p>
            <a :href="`/tv/${activeChild.tv_token}`" target="_blank" class="btn-primary">
              Open TV View →
            </a>
          </div>

          <!-- 3 Strikes -->
          <div class="card strikes-card">
            <div class="card-title">3 Strikes</div>
            <div class="strikes-list">
              <div v-for="child in childrenStore.children" :key="child.id" class="strikes-row">
                <div class="strikes-child-color" :style="{ background: child.color }"></div>
                <span class="strikes-child-name">{{ child.name }}</span>
                <div class="strikes-buttons">
                  <button
                    v-for="i in 3"
                    :key="i"
                    class="strike-btn"
                    :class="{ lit: i <= child.strikes }"
                    @click="toggleStrike(child, i)"
                    :title="`Strike ${i}`"
                  >✕</button>
                </div>
              </div>
              <div v-if="childrenStore.children.length === 0" class="empty-small">No children added yet.</div>
            </div>
          </div>

          <!-- Overlays -->
          <div class="card overlays-card">
            <div class="card-title">Overlays</div>
            <div class="overlays-grid">
              <button
                class="overlay-btn"
                :class="{ 'overlay-btn-active': scheduleStore.showRulesOverlay }"
                @click="toggleRulesOverlay"
                :disabled="!activeChild"
              >
                <span class="overlay-btn-icon">📋</span>
                <span>Rules/Expectations</span>
                <span v-if="scheduleStore.showRulesOverlay" class="overlay-live-badge">LIVE</span>
              </button>
            </div>
          </div>
        </div>

        <!-- Session + Schedule row -->
        <div class="bottom-row">
        <!-- Today's session card -->
        <div class="card session-card">
          <div class="card-title">Today's Session</div>
          <div v-if="scheduleStore.session">
            <div v-if="scheduleStore.blocks.length > 0" class="day-progress-section">
              <div class="day-progress-header">
                <span class="badge-active">Active</span>
                <span class="day-progress-pct">{{ dayProgressPercent }}%</span>
              </div>
              <ProgressBar :percent="dayProgressPercent" />
              <div class="day-progress-times">
                <span>{{ firstBlockStartTime }}</span>
                <span>{{ currentTimeDisplay }}</span>
                <span>{{ estimatedFinishTime }}</span>
              </div>
            </div>
            <div v-else class="session-info">
              <span class="badge-active">Active</span>
            </div>
            <div v-if="scheduleStore.currentBlock" class="current-block-timer">
              <TimerDisplay
                compact
                :block="scheduleStore.currentBlock"
                :session="scheduleStore.session"
                :is-paused="scheduleStore.isPaused"
                :block-started-at="scheduleStore.blockStartedAt"
                :block-elapsed-offset="scheduleStore.blockElapsedOffset"
              />
            </div>

            <div class="session-actions">
              <button
                class="btn-sm"
                v-if="scheduleStore.session.current_block_id && !scheduleStore.isPaused"
                @click="sendAction('pause')"
              >Pause</button>
              <button
                class="btn-sm btn-start"
                v-if="scheduleStore.isPaused && scheduleStore.blockElapsedOffset === 0 && scheduleStore.session.current_block_id"
                @click="scheduleStore.startCurrentBlock(scheduleStore.session.id)"
              >Start</button>
              <button
                class="btn-sm"
                v-if="scheduleStore.isPaused && scheduleStore.blockElapsedOffset > 0"
                @click="scheduleStore.resumeCurrentBlock(scheduleStore.session.id)"
              >Resume</button>
              <button
                class="btn-sm"
                v-if="scheduleStore.session.current_block_id"
                @click="scheduleStore.resetCurrentBlock(scheduleStore.session.id)"
              >Reset</button>
              <button
                class="btn-sm"
                v-if="scheduleStore.session.current_block_id"
                @click="scheduleStore.markBlockDone(scheduleStore.session.id)"
              >Done</button>
              <button class="btn-sm btn-danger" @click="sendAction('complete')">End Day</button>
            </div>

            <!-- Break Time section -->
            <div
              v-if="scheduleStore.currentBlock?.break_time_enabled"
              class="break-section"
              :class="{ 'break-active': scheduleStore.isBreakMode }"
            >
              <div class="break-header">
                <span class="break-icon">☕</span>
                <span class="break-title">Break Time</span>
                <span class="break-duration-badge">{{ scheduleStore.currentBlock.break_time_minutes }} min</span>
              </div>
              <div v-if="scheduleStore.isBreakMode" class="break-timer-display">
                <TimerDisplay
                  compact
                  :block="breakBlock"
                  :session="scheduleStore.session"
                  :is-paused="!scheduleStore.breakStartedAt"
                  :block-started-at="scheduleStore.breakStartedAt"
                  :block-elapsed-offset="scheduleStore.breakElapsedOffset"
                />
              </div>
              <div class="break-actions">
                <button
                  class="btn-sm btn-break"
                  v-if="!scheduleStore.isBreakMode"
                  @click="scheduleStore.startBreak(scheduleStore.session.id)"
                >Start Break</button>
                <button
                  class="btn-sm btn-break"
                  v-if="scheduleStore.isBreakMode && scheduleStore.breakStartedAt"
                  @click="scheduleStore.pauseBreak(scheduleStore.session.id)"
                >Pause</button>
                <button
                  class="btn-sm btn-break"
                  v-if="scheduleStore.isBreakMode && !scheduleStore.breakStartedAt && scheduleStore.breakElapsedOffset > 0"
                  @click="scheduleStore.resumeBreak(scheduleStore.session.id)"
                >Resume</button>
                <button
                  class="btn-sm"
                  v-if="scheduleStore.isBreakMode"
                  @click="scheduleStore.resetBreak(scheduleStore.session.id)"
                >Reset</button>
              </div>
            </div>
          </div>
          <div v-else class="no-session">
            <p>No active session.</p>
            <button class="btn-primary" @click="showStartDialog = true">Start Day</button>
          </div>
        </div>

        <!-- Schedule blocks -->
        <div class="card">
          <div class="card-title">Today's Schedule</div>
          <div v-if="scheduleStore.blocks.length === 0" class="empty-small">
            No blocks loaded.
          </div>
          <div class="block-list" v-else>
            <div v-for="block in scheduleStore.blocks" :key="block.id" class="block-row-wrap">
              <ScheduleBlock
                :block="block"
                :is-current="block.id === scheduleStore.session?.current_block_id"
                :is-completed="scheduleStore.completedBlockIds.includes(block.id)"
                :elapsed-seconds="blockElapsed(block)"
                @click="selectBlock(block)"
              />
              <button
                class="agenda-btn"
                :class="{ 'agenda-btn-set': scheduleStore.blockAgendas[String(block.id)] }"
                @click.stop="openAgendaDialog(block)"
                title="Set agenda for this block"
              >📝</button>
            </div>
          </div>
        </div>
        </div><!-- end bottom-row -->

      </div>

      <!-- Agenda dialog -->
      <div class="dialog-overlay" v-if="agendaDialog.open" @click.self="closeAgendaDialog">
        <div class="dialog">
          <h2>Block Agenda</h2>
          <p class="dialog-hint">{{ agendaDialog.blockLabel }}</p>
          <div class="field">
            <label>Today's activity or note</label>
            <textarea
              v-model="agendaDialog.text"
              class="agenda-textarea"
              placeholder="e.g. Chapter 5 reading, worksheet page 12..."
              rows="4"
              @keydown.ctrl.enter="saveAgenda"
            ></textarea>
          </div>
          <div class="dialog-actions">
            <button class="btn-sm btn-danger" v-if="agendaDialog.existing" @click="clearAgenda">Clear</button>
            <button class="btn-sm" @click="closeAgendaDialog">Cancel</button>
            <button class="btn-primary" @click="saveAgenda">Save</button>
          </div>
        </div>
      </div>

      <!-- Start session dialog -->
      <div class="dialog-overlay" v-if="showStartDialog" @click.self="showStartDialog = false">
        <div class="dialog">
          <h2>Start School Day</h2>
          <div class="field">
            <label>Schedule Template</label>
            <select v-model="selectedTemplate">
              <option :value="null">No template (freestyle)</option>
              <option v-for="t in templates" :key="t.id" :value="t.id">{{ t.name }}</option>
            </select>
          </div>
          <div class="dialog-actions">
            <button class="btn-sm" @click="showStartDialog = false">Cancel</button>
            <button class="btn-primary" @click="startSession">Start</button>
          </div>
        </div>
      </div>
    </main>

    <!-- Meeting alert corner toasts -->
    <teleport to="body">
      <div class="meeting-toasts">
        <transition-group name="toast">
          <div v-for="alert in meetingAlerts.dashboardAlerts.value" :key="alert.id" class="meeting-toast">
            <div class="toast-icon">📅</div>
            <div class="toast-body">
              <div class="toast-title">Upcoming Meeting</div>
              <div class="toast-label">{{ alert.label }}</div>
              <div class="toast-countdown">Starts in {{ meetingAlerts.alertCountdown(alert) }}</div>
            </div>
            <button class="toast-dismiss" @click="meetingAlerts.dismissDashboardAlert(alert.id)">✕</button>
          </div>
        </transition-group>
      </div>
    </teleport>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, computed } from 'vue'
import { useChildrenStore } from '@/stores/children'
import { useScheduleStore } from '@/stores/schedule'
import { useWebSocket } from '@/composables/useWebSocket'
import { useMeetingAlerts } from '@/composables/useMeetingAlerts'
import api from '@/composables/useApi'
import NavBar from '@/components/NavBar.vue'
import ChildSelector from '@/components/ChildSelector.vue'
import ProgressBar from '@/components/ProgressBar.vue'
import ScheduleBlock from '@/components/ScheduleBlock.vue'
import TimerDisplay from '@/components/TimerDisplay.vue'

const childrenStore = useChildrenStore()
const scheduleStore = useScheduleStore()
const activeChild = computed(() => childrenStore.activeChild)
const meetingAlerts = useMeetingAlerts((blockId) => {
  if (!scheduleStore.session) return
  if (scheduleStore.session.current_block_id === blockId) return
  scheduleStore.switchBlock(scheduleStore.session.id, blockId)
})

// Virtual block for break timer (same block but with break duration)
const breakBlock = computed(() => {
  const block = scheduleStore.currentBlock
  if (!block?.break_time_enabled) return null
  return { ...block, duration_minutes: block.break_time_minutes }
})
const showStartDialog = ref(false)
const selectedTemplate = ref(null)
const templates = ref([])

const now = ref(new Date())
setInterval(() => { now.value = new Date() }, 1000)

function formatDayTime(str) {
  if (!str) return ''
  const [h, m] = str.split(':').map(Number)
  const period = h >= 12 ? 'PM' : 'AM'
  const hour = h % 12 || 12
  return `${hour}:${String(m).padStart(2, '0')} ${period}`
}

const currentTimeDisplay = computed(() =>
  now.value.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })
)

const dayProgressPercent = computed(() => {
  const allBlocks = scheduleStore.blocks
  if (!allBlocks.length) return 0
  const totalSeconds = allBlocks.reduce((sum, b) => sum + (b.duration_minutes || 0) * 60, 0)
  if (totalSeconds === 0) return 0
  const remainingSeconds = allBlocks.reduce((sum, b) => {
    if (scheduleStore.completedBlockIds.includes(b.id)) return sum
    const blockTotal = (b.duration_minutes || 0) * 60
    const elapsed = blockElapsed(b)
    return sum + Math.max(0, blockTotal - elapsed)
  }, 0)
  return Math.max(0, Math.min(100, Math.round((totalSeconds - remainingSeconds) / totalSeconds * 100)))
})

let wsDisconnect = null

async function loadDashboard() {
  if (!activeChild.value) return
  await scheduleStore.fetchDashboard(activeChild.value.tv_token)

  // Load templates for start dialog
  const res = await api.get('/api/schedules')
  templates.value = res.data

  // WS subscription
  if (wsDisconnect) wsDisconnect()
  const { disconnect } = useWebSocket(activeChild.value.tv_token, (msg) => {
    scheduleStore.applyWsEvent(msg)
  })
  wsDisconnect = disconnect
}

async function startSession() {
  await scheduleStore.startSession(activeChild.value.id, selectedTemplate.value)
  showStartDialog.value = false
  await loadDashboard()
}

async function toggleStrike(child, index) {
  const newStrikes = index <= child.strikes ? index - 1 : index
  const res = await api.patch(`/api/children/${child.id}/strikes`, { strikes: newStrikes })
  const idx = childrenStore.children.findIndex((c) => c.id === child.id)
  if (idx !== -1) childrenStore.children[idx] = res.data
}

async function sendAction(type) {
  if (!scheduleStore.session) return
  await scheduleStore.sendTimerAction(scheduleStore.session.id, type)
}

function blockElapsed(block) {
  const currentId = scheduleStore.session?.current_block_id
  if (block.id === currentId && scheduleStore.blockStartedAt && !scheduleStore.isPaused) {
    return scheduleStore.blockElapsedOffset + Math.floor((now.value - scheduleStore.blockStartedAt) / 1000)
  }
  return scheduleStore.blockElapsedCache[block.id] || 0
}

function breakElapsed(block) {
  if (scheduleStore.isBreakMode && block.id === scheduleStore.session?.current_block_id && scheduleStore.breakStartedAt) {
    return scheduleStore.breakElapsedOffset + Math.floor((now.value - scheduleStore.breakStartedAt) / 1000)
  }
  return scheduleStore.breakElapsedCache[block.id] || 0
}

const firstBlockStartTime = computed(() => {
  const first = scheduleStore.blocks[0]
  return first?.time_start ? formatDayTime(first.time_start) : ''
})

const estimatedFinishTime = computed(() => {
  const allBlocks = scheduleStore.blocks
  if (!allBlocks.length) return ''
  let remainingSeconds = 0
  for (const b of allBlocks) {
    if (scheduleStore.completedBlockIds.includes(b.id)) continue
    remainingSeconds += Math.max(0, (b.duration_minutes || 0) * 60 - blockElapsed(b))
    if (b.break_time_enabled && b.break_time_minutes) {
      remainingSeconds += Math.max(0, b.break_time_minutes * 60 - breakElapsed(b))
    }
  }
  const finish = new Date(now.value.getTime() + remainingSeconds * 1000)
  const h = finish.getHours()
  const period = h >= 12 ? 'PM' : 'AM'
  const hour = h % 12 || 12
  return `${hour}:${String(finish.getMinutes()).padStart(2, '0')} ${period}`
})

// Agenda dialog
const agendaDialog = ref({ open: false, blockId: null, blockLabel: '', text: '', existing: false })

function openAgendaDialog(block) {
  if (!scheduleStore.session) return
  const label = block.label || block.subject?.name || 'Block'
  const existing = scheduleStore.blockAgendas[String(block.id)] || ''
  agendaDialog.value = { open: true, blockId: block.id, blockLabel: label, text: existing, existing: !!existing }
}

function closeAgendaDialog() {
  agendaDialog.value = { open: false, blockId: null, blockLabel: '', text: '', existing: false }
}

async function saveAgenda() {
  if (!scheduleStore.session || agendaDialog.value.blockId === null) return
  await api.put(
    `/api/sessions/${scheduleStore.session.id}/blocks/${agendaDialog.value.blockId}/agenda`,
    { text: agendaDialog.value.text }
  )
  closeAgendaDialog()
}

async function clearAgenda() {
  if (!scheduleStore.session || agendaDialog.value.blockId === null) return
  await api.put(
    `/api/sessions/${scheduleStore.session.id}/blocks/${agendaDialog.value.blockId}/agenda`,
    { text: '' }
  )
  closeAgendaDialog()
}

async function toggleRulesOverlay() {
  if (!activeChild.value) return
  const endpoint = scheduleStore.showRulesOverlay
    ? '/api/overlays/rules/hide'
    : '/api/overlays/rules/show'
  await api.post(endpoint, { child_id: activeChild.value.id })
}

function selectBlock(block) {
  if (!scheduleStore.session) return
  // Clicking the current block does nothing — use Start/Pause/Resume buttons
  if (block.id === scheduleStore.session.current_block_id) return
  scheduleStore.selectBlock(scheduleStore.session.id, block.id)
}

onMounted(async () => {
  await childrenStore.fetchChildren()
  await loadDashboard()
})

watch(activeChild, loadDashboard)
</script>

<style scoped>
.page { min-height: 100vh; background: #0f172a; }
.container { max-width: 1100px; margin: 0 auto; padding: 2rem; }
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
h1 { font-size: 1.75rem; font-weight: 700; }

.dashboard-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.top-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 700px) {
  .top-row,
  .bottom-row {
    grid-template-columns: 1fr;
  }
}

.card {
  background: #1e293b;
  border-radius: 1rem;
  padding: 1.5rem;
}

.card-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  margin-bottom: 1rem;
}

.session-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  color: #94a3b8;
}

.day-progress-section { margin-bottom: 0.75rem; }
.day-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.day-progress-pct { font-size: 0.9rem; color: #94a3b8; }
.day-progress-times {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #475569;
  margin-top: 0.35rem;
  font-variant-numeric: tabular-nums;
}

.badge-active {
  background: #14532d;
  color: #4ade80;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.current-block-timer { display: flex; justify-content: center; margin: 1rem 0; }
.session-actions { display: flex; align-items: center; margin-top: 1rem; gap: 0.5rem; }
.session-actions .btn-sm { flex: 1; text-align: center; }

.btn-sm {
  padding: 0.8rem 0.9rem;
  border: 1px solid #334155;
  background: transparent;
  color: #94a3b8;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.2s;
}
.btn-sm:hover { background: #334155; }
.btn-sm.btn-danger { border-color: #7f1d1d; color: #fca5a5; }
.btn-sm.btn-danger:hover { background: #7f1d1d; }
.btn-sm.btn-start { border-color: #4f46e5; color: #818cf8; }
.btn-sm.btn-start:hover { background: #4f46e5; color: #fff; }

.break-section {
  margin: 0.75rem 0;
  background: #1c1207;
  border: 1px solid #78350f;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
}
.break-section.break-active { border-color: #f59e0b; background: #1c1a07; }
.break-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.break-icon { font-size: 1rem; }
.break-title { font-size: 0.8rem; font-weight: 600; color: #fbbf24; text-transform: uppercase; letter-spacing: 0.06em; flex: 1; }
.break-duration-badge {
  font-size: 0.75rem;
  background: #78350f;
  color: #fde68a;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
}
.break-timer-display { display: flex; justify-content: flex-start; margin-bottom: 0.5rem; }
.break-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.btn-break { border-color: #92400e !important; color: #fbbf24 !important; }
.btn-break:hover { background: #78350f !important; }

.no-session { text-align: center; padding: 1.5rem 0; color: #64748b; }
.no-session p { margin-bottom: 1rem; }

.empty-state { text-align: center; padding: 4rem; color: #64748b; }
.empty-small { color: #64748b; font-size: 0.9rem; padding: 1rem 0; }

.block-list { display: flex; flex-direction: column; gap: 0.5rem; }

.block-row-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.block-row-wrap > :first-child { flex: 1; min-width: 0; }

.agenda-btn {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border: 1px solid #334155;
  background: transparent;
  border-radius: 0.4rem;
  cursor: pointer;
  font-size: 0.95rem;
  opacity: 0.4;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.agenda-btn:hover { opacity: 1; background: #334155; }
.agenda-btn-set { opacity: 1; border-color: #6366f1; background: #1e1b4b; }

.agenda-textarea {
  width: 100%;
  padding: 0.65rem 0.9rem;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 0.5rem;
  color: #f1f5f9;
  font-size: 0.9rem;
  resize: vertical;
  font-family: inherit;
  line-height: 1.5;
  box-sizing: border-box;
}
.agenda-textarea:focus { outline: none; border-color: #818cf8; }

.dialog-hint {
  font-size: 0.82rem;
  color: #64748b;
  margin: -0.5rem 0 0.25rem;
}

.strikes-list { display: flex; flex-direction: column; gap: 0.6rem; }

.strikes-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.strikes-child-color { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.strikes-child-name { flex: 1; font-size: 0.95rem; }

.strikes-buttons { display: flex; gap: 0.5rem; }

.strike-btn {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 2px solid #334155;
  background: transparent;
  color: #334155;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.strike-btn:hover { border-color: #ef4444; color: #ef4444; }

.strike-btn.lit {
  background: #7f1d1d;
  border-color: #ef4444;
  color: #fca5a5;
}

.tv-desc { color: #64748b; margin-bottom: 1rem; font-size: 0.9rem; }
.overlays-grid { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.overlay-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.25rem;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 0.75rem;
  color: #94a3b8;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.overlay-btn:hover:not(:disabled) { background: #334155; border-color: #475569; color: #f1f5f9; }
.overlay-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.overlay-btn-active {
  background: #1e1b4b;
  border-color: #6366f1;
  color: #a5b4fc;
}
.overlay-btn-active:hover:not(:disabled) { background: #312e81; }
.overlay-btn-icon { font-size: 1.2rem; }
.overlay-live-badge {
  font-size: 0.65rem;
  font-weight: 700;
  background: #6366f1;
  color: #fff;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  letter-spacing: 0.06em;
  animation: pulse-badge 1.5s ease-in-out infinite;
}
@keyframes pulse-badge {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.btn-primary {
  display: inline-block;
  padding: 0.7rem 1.5rem;
  background: #4f46e5;
  color: #fff;
  border: none;
  border-radius: 0.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s;
}
.btn-primary:hover { background: #4338ca; }

.dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.dialog {
  background: #1e293b;
  border-radius: 1rem;
  padding: 2rem;
  width: 380px;
  max-width: 90vw;
}
.dialog h2 { margin-bottom: 1.5rem; }
.dialog-actions { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 1.5rem; }

.field { margin-bottom: 1rem; }
.field label { display: block; font-size: 0.85rem; color: #94a3b8; margin-bottom: 0.4rem; }
.field select {
  width: 100%;
  padding: 0.65rem 0.9rem;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 0.5rem;
  color: #f1f5f9;
  font-size: 0.9rem;
}

/* Meeting alert toasts */
.meeting-toasts {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-end;
}
.meeting-toast {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: #1c1a07;
  border: 1px solid #f59e0b;
  border-radius: 0.75rem;
  padding: 0.85rem 1rem;
  width: 280px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}
.toast-icon { font-size: 1.5rem; flex-shrink: 0; }
.toast-body { flex: 1; min-width: 0; }
.toast-title { font-size: 0.7rem; font-weight: 700; color: #fbbf24; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.15rem; }
.toast-label { font-size: 0.95rem; font-weight: 600; color: #f1f5f9; margin-bottom: 0.25rem; }
.toast-countdown { font-size: 1.1rem; font-weight: 700; color: #fbbf24; font-variant-numeric: tabular-nums; }
.toast-dismiss { background: none; border: none; color: #64748b; cursor: pointer; font-size: 1rem; padding: 0; flex-shrink: 0; line-height: 1; }
.toast-dismiss:hover { color: #f1f5f9; }

.toast-enter-active { transition: all 0.3s ease; }
.toast-leave-active { transition: all 0.3s ease; }
.toast-enter-from { opacity: 0; transform: translateX(100%); }
.toast-leave-to { opacity: 0; transform: translateX(100%); }
</style>
