<!-- pages/Anjungan/AntrianKlinik/[id].vue -->
<template>
  <div class="tv-display-container">
    <!-- Header -->
    <div class="tv-header">
      <div class="tv-header-left">
        <div class="hospital-logo">
          <img 
            src="/Rumah_Sakit_Umum_Daerah_Dr._Saiful_Anwar.webp" 
            alt="RSUD Logo" 
            class="header-logo"
            width="64"
            height="64"
            style="width: 64px; height: 64px; object-fit: contain;"
          />
        </div>
        <div class="header-text">
          <h1 class="display-title">ANTRIAN KLINIK</h1>
          <p class="hospital-name">RSUD dr. Saiful Anwar Provinsi Jawa Timur</p>
          <p v-if="screenData" class="screen-info">{{ screenData.namaScreen }} - {{ screenData.nomorScreen }}</p>
        </div>
      </div>
      <div class="tv-header-right">
        <div class="current-time">{{ currentTime }}</div>
        <div class="current-date">{{ currentDate }}</div>
      </div>
    </div>

    <!-- Hero Section - Sedang Dipanggil -->
    <div v-if="currentCalledQueue" class="hero-queue" :class="{ 'hero-pending': currentCalledQueue.status === 'pending' }">
      <div class="hero-content">
        <div class="hero-label">
          <v-icon size="32" color="white">mdi-bell-ring</v-icon>
          {{ currentCalledQueue.status === 'pending' ? 'PENDING' : 'SEDANG DIPANGGIL' }}
        </div>
        <div class="hero-number">
          {{ currentCalledQueue.noAntrian.split(" |")[0] }}
        </div>
        <div class="hero-clinic">
          <v-icon size="28" color="white" class="mr-2">mdi-hospital-building</v-icon>
          {{ currentCalledQueue.klinik }}
        </div>
      </div>
    </div>

    <!-- Clinic Grid 3x3 -->
    <div class="clinic-grid">
      <div
        v-for="clinic in displayedClinics"
        :key="clinic.name"
        class="clinic-card"
      >
        <!-- Clinic Header -->
        <div class="clinic-header">
          <div class="clinic-name">{{ clinic.name }}</div>
          <div class="queue-count">
            <v-icon size="18" color="white">mdi-account-multiple</v-icon>
            <span class="count-number">{{ clinic.totalQueues }}</span>
          </div>
        </div>

        <!-- Queue Display -->
        <div class="queue-display">
          <!-- Current Queue -->
          <div v-if="clinic.currentQueue" class="current-queue-section">
            <div class="queue-status-label" :class="{ 'status-pending': clinic.currentQueue.status === 'pending' }">
              {{ clinic.currentQueue.status === 'pending' ? 'PENDING' : 'SEKARANG' }}
            </div>
            <div class="queue-number-large" :class="{ 'queue-pending': clinic.currentQueue.status === 'pending' }">
              {{ clinic.currentQueue.noAntrian.split(" |")[0] }}
            </div>
          </div>

          <!-- Next Queues -->
          <div v-if="clinic.nextQueues.length > 0" class="next-queues-section">
            <div class="next-label">SELANJUTNYA</div>
            <div class="next-numbers-grid">
              <div
                v-for="queue in clinic.nextQueues.slice(0, 3)"
                :key="queue.no"
                class="next-number-badge"
                :class="{ 'badge-pending': queue.status === 'pending' }"
              >
                {{ queue.noAntrian.split(" |")[0] }}
              </div>
            </div>
          </div>

          <!-- Empty State -->
          <div
            v-if="!clinic.currentQueue && clinic.nextQueues.length === 0"
            class="empty-queue"
          >
            <v-icon size="40" color="grey-lighten-3">mdi-minus-circle-outline</v-icon>
            <div class="empty-text">Tidak Ada Antrian</div>
          </div>
          
          <!-- Pending Queues (jika ada yang pending tapi tidak di current atau next) -->
          <div v-if="clinic.pendingQueues && clinic.pendingQueues.length > 0" class="pending-queues-section">
            <div class="pending-label">PENDING</div>
            <div class="pending-numbers-grid">
              <div
                v-for="queue in clinic.pendingQueues"
                :key="queue.no"
                class="pending-number-badge"
              >
                {{ queue.noAntrian.split(" |")[0] }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Footer Stats -->
    <div class="tv-footer">
      <div class="footer-stats">
        <div class="stat-item">
          <v-icon size="32" color="white" class="stat-icon">mdi-format-list-numbered</v-icon>
          <div class="stat-content">
            <div class="stat-value">{{ statistics.total }}</div>
            <div class="stat-label">Total Antrian</div>
          </div>
        </div>
        <div class="stat-divider"></div>
        <div class="stat-item">
          <v-icon size="32" color="white" class="stat-icon">mdi-clock-outline</v-icon>
          <div class="stat-content">
            <div class="stat-value">{{ statistics.waiting }}</div>
            <div class="stat-label">Menunggu</div>
          </div>
        </div>
        <div class="stat-divider"></div>
        <div class="stat-item">
          <v-icon size="32" color="white" class="stat-icon">mdi-account-check</v-icon>
          <div class="stat-content">
            <div class="stat-value">{{ statistics.active }}</div>
            <div class="stat-label">Sedang Dilayani</div>
          </div>
        </div>
      </div>
      <div class="footer-message">
        <v-icon size="24" color="white" class="mr-2">mdi-information</v-icon>
        Harap perhatikan nomor antrian Anda di layar
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from "vue";
import { useQueueStore } from "@/stores/queueStore";
import { useScreenStore } from "@/stores/screenStore";
import { useMasterStore } from "@/stores/masterStore";

definePageMeta({
  layout: false,
});

const queueStore = useQueueStore();
const screenStore = useScreenStore();
const masterStore = useMasterStore();

const route = useRoute();

const screenId = computed(() => {
  const id = route.params.id;
  // Handle both string and array cases
  const idValue = Array.isArray(id) ? id[0] : id;
  const parsed = parseInt(idValue);
  return isNaN(parsed) ? null : parsed;
});

const screenData = computed(() => {
  const id = screenId.value;
  if (!id) return null;

  // Utamakan getter store (getScreenById)
  const fromGetter = typeof screenStore.getScreenById === 'function'
    ? screenStore.getScreenById(id)
    : null;
  if (fromGetter?.value) {
    return fromGetter.value;
  }

  // Fallback: baca langsung dari state mentah
  const list =
    screenStore.screenItems?.value ||
    screenStore.screenItems ||
    [];

  if (!Array.isArray(list)) return null;

  return list.find((s) => Number(s.id) === Number(id)) || null;
});

const currentTime = ref("");
const currentDate = ref("");
let timeInterval = null;
let refreshInterval = null;

const klinikPatients = computed(() => {
  // Ambil pasien dengan processStage "klinik" (sudah check-in di loket)
  const klinikStagePatients = queueStore.getPatientsByStage("klinik").value.all;
  
  // Juga ambil pasien dengan status "pending" yang processStage-nya masih "loket"
  // Ini adalah pasien yang di-pending di AdminLoket dan harus kembali ke kolom klinik
  const pendingFromLoket = queueStore.getPatientsByStage("loket").value.all
    .filter(p => p.status === "pending");
  
  // Gabungkan dan pastikan tidak ada duplikat
  const allPatients = [...klinikStagePatients];
  pendingFromLoket.forEach(pendingPatient => {
    const exists = allPatients.find(p => p.no === pendingPatient.no);
    if (!exists) {
      allPatients.push(pendingPatient);
    }
  });
  
  return allPatients;
});

// Get kliniks based on screen configuration
const screenKliniks = computed(() => {
  if (!screenData.value) return [];
  
  return screenData.value.klinik
    .map(kode => {
      const klinikData = masterStore.getKlinikByKode(kode);
      return klinikData ? { kode: klinikData.kode, name: klinikData.nama } : null;
    })
    .filter(Boolean)
    .slice(0, 9); // Max 9 kliniks for 3x3 grid
});

const displayedClinics = computed(() => {
  if (!screenData.value || screenKliniks.value.length === 0) {
    return [];
  }

  return screenKliniks.value.map((klinik) => {
    const queues = klinikPatients.value
      .filter((p) => p.klinik === klinik.name)
      .sort((a, b) => {
        const statusPriority = {
          "di-loket": 1,
          waiting: 2,
          terlambat: 3,
          pending: 4,
        };

        const priorityDiff =
          (statusPriority[a.status] || 99) - (statusPriority[b.status] || 99);
        if (priorityDiff !== 0) return priorityDiff;

        const timeA = a.jamPanggil.split(":").map(Number);
        const timeB = b.jamPanggil.split(":").map(Number);
        return timeA[0] * 60 + timeA[1] - (timeB[0] * 60 + timeB[1]);
      });

    // Current queue: prioritaskan di-loket, lalu waiting, lalu pending (dengan card merah)
    const currentQueue =
      queues.find((q) => q.status === "di-loket") ||
      queues.find((q) => q.status === "anjungan") ||
      queues.find((q) => q.status === "pending") ||
      null;

    // Next queues: tampilkan semua yang bukan current queue, termasuk pending
    const nextQueues = queues.filter(
      (q) =>
        q.no !== currentQueue?.no &&
        (q.status === "anjungan" || q.status === "di-loket" || q.status === "pending")
    );

    // Pending queues: pasien dengan status pending yang tidak di current atau next
    const pendingQueues = queues.filter(
      (q) =>
        q.status === "pending" &&
        q.no !== currentQueue?.no &&
        !nextQueues.find(nq => nq.no === q.no)
    );

    return {
      name: klinik.name,
      currentQueue: currentQueue,
      nextQueues: nextQueues,
      pendingQueues: pendingQueues,
      totalQueues: queues.length,
    };
  });
});

const currentCalledQueue = computed(() => {
  if (!screenData.value) return null;
  
  const screenKlinikNames = screenKliniks.value.map(k => k.name);
  // Prioritaskan pasien yang sedang dipanggil (di-loket), lalu pending
  const calledQueues = klinikPatients.value
    .filter((p) => 
      (p.status === "di-loket" || p.status === "pending") && 
      screenKlinikNames.includes(p.klinik)
    )
    .sort((a, b) => {
      // Prioritaskan di-loket dulu, lalu pending
      if (a.status === "di-loket" && b.status !== "di-loket") return -1;
      if (a.status !== "di-loket" && b.status === "di-loket") return 1;
      // Jika sama, sort by createdAt
      return new Date(b.createdAt) - new Date(a.createdAt);
    });

  return calledQueues[0] || null;
});

const statistics = computed(() => {
  if (!screenData.value) {
    return { total: 0, waiting: 0, active: 0 };
  }
  
  const screenKlinikNames = screenKliniks.value.map(k => k.name);
  const all = klinikPatients.value.filter(p => screenKlinikNames.includes(p.klinik));
  
  return {
    total: all.length,
    anjungan: all.filter((p) => p.status === "anjungan").length,
    active: all.filter((p) => p.status === "di-loket").length,
  };
});

const updateTime = () => {
  const now = new Date();
  // Format jam dengan titik dua (HH:MM:SS)
  const timeString = now.toLocaleTimeString("id-ID", {
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
  });
  currentTime.value = timeString.replace(/\./g, ':');
  currentDate.value = now.toLocaleDateString("id-ID", {
    weekday: "long",
    year: "numeric",
    month: "long",
    day: "numeric",
  });
};

onMounted(() => {
  // Redirect to index if screen not found
  if (!screenData.value) {
    // redirect ke list jika id tidak valid
    navigateTo('/anjungan/antrianklinik');
    return;
  }
  
  updateTime();
  timeInterval = setInterval(updateTime, 1000);

  // Initialize and connect WebSocket (Centralized)
  const anjunganClientId = `anjungan-klinik-${screenId.value}`;
  queueStore.initWebSocket(anjunganClientId);

  // Register interest in each clinic on this screen for scoped WebSocket refreshes
  screenKliniks.value.forEach(k => {
    queueStore.registerClinicInterest(k.kode);
  });

  onUnmounted(() => {
    if (timeInterval) clearInterval(timeInterval);
    // Unregister clinic interests
    screenKliniks.value.forEach(k => {
      queueStore.unregisterClinicInterest(k.kode);
    });
  });
});
</script>

<style scoped lang="scss">
.tv-display-container {
  background: var(--color-neutral-300);
  min-height: 100vh;
  max-width: 1920px;
  max-height: 1080px;
  width: 100vw;
  height: 100vh;
  padding: 24px;
  font-family: 'Inter', 'Roboto', sans-serif;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}

/* ========== HEADER ========== */
.tv-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%);
  border-radius: 16px;
  padding: 24px 40px;
  margin-bottom: 20px;
  box-shadow: 0 8px 24px rgba(255, 155, 27, 0.3);
}

.tv-header-left {
  display: flex;
  align-items: center;
  gap: 24px;
}

.hospital-logo {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  padding: 4px;
}

.display-title {
  font-size: 48px;
  font-weight: 800;
  margin: 0;
  letter-spacing: 3px;
  color: var(--color-neutral-100);
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.hospital-name {
  font-size: 20px;
  font-weight: 600;
  margin: 6px 0 0 0;
  color: var(--color-neutral-100);
  opacity: 0.95;
}

.screen-info {
  font-size: 16px;
  font-weight: 500;
  margin: 4px 0 0 0;
  color: var(--color-neutral-100);
  opacity: 0.85;
}

.tv-header-right {
  text-align: right;
}

.current-time {
  font-size: 56px;
  font-weight: 900;
  line-height: 1;
  color: var(--color-neutral-100);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  letter-spacing: 2px;
  font-variant-numeric: tabular-nums; /* Prevent digit shifting */
}

.current-date {
  font-size: 18px;
  opacity: 0.95;
  margin-top: 8px;
  color: var(--color-neutral-100);
  font-weight: 500;
}

/* ========== HERO SECTION ========== */
.hero-queue {
  background: linear-gradient(135deg, var(--color-danger-600) 0%, var(--color-danger-700) 100%);
  border-radius: 20px;
  padding: 32px;
  margin-bottom: 20px;
  box-shadow: 0 12px 32px rgba(224, 21, 7, 0.35);
}

.hero-queue.hero-pending {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  box-shadow: 0 12px 32px rgba(220, 38, 38, 0.5);
  animation: pending-pulse 2s ease-in-out infinite;
}

@keyframes pending-pulse {
  0%, 100% {
    box-shadow: 0 12px 32px rgba(220, 38, 38, 0.5);
  }
  50% {
    box-shadow: 0 12px 48px rgba(220, 38, 38, 0.7);
  }
}

.hero-content {
  text-align: center;
  color: var(--color-neutral-100);
}

.hero-label {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 12px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.hero-number {
  font-size: 140px;
  font-weight: 900;
  line-height: 1;
  margin: 16px 0;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  letter-spacing: 8px;
  font-variant-numeric: tabular-nums; /* Stable digits */
}

.hero-clinic {
  font-size: 36px;
  font-weight: 700;
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 1px;
}

/* ========== CLINIC GRID ========== */
.clinic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
  flex: 1;
}

.clinic-card {
  background: var(--color-neutral-100);
  border-radius: 16px;
  border: 2px solid var(--color-neutral-500);
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  min-height: 240px;
}

.clinic-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 3px solid var(--color-primary-600);
  margin-bottom: 16px;
}

.clinic-name {
  font-size: 24px;
  font-weight: 800;
  color: var(--color-neutral-900);
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.2;
  flex: 1;
}

.queue-count {
  background: var(--color-secondary-600);
  color: var(--color-neutral-100);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(6, 99, 199, 0.3);
}

.count-number {
  font-size: 20px;
  font-weight: 800;
}

/* ========== QUEUE DISPLAY ========== */
.queue-display {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.current-queue-section {
  text-align: center;
}

.queue-status-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-success-600);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.queue-status-label.status-pending {
  color: var(--color-danger-600);
  animation: pending-blink 1.5s ease-in-out infinite;
}

@keyframes pending-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.queue-number-large {
  font-size: 80px;
  font-weight: 900;
  color: var(--color-neutral-900);
  line-height: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  letter-spacing: 4px;
  font-variant-numeric: tabular-nums; /* Stable digits */
}

.queue-number-large.queue-pending {
  color: var(--color-danger-600);
  text-shadow: 0 2px 8px rgba(220, 38, 38, 0.4);
}

.next-queues-section {
  text-align: center;
  margin-top: 8px;
}

.next-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-neutral-700);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.next-numbers-grid {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.next-number-badge {
  background: var(--color-secondary-600);
  color: var(--color-neutral-100);
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 22px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(6, 99, 199, 0.25);
  min-width: 60px;
  text-align: center;
  font-variant-numeric: tabular-nums; /* Stable digits */
}

.next-number-badge.badge-pending {
  background: var(--color-danger-600);
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4);
  border: 2px solid var(--color-danger-700);
}

.empty-queue {
  text-align: center;
  padding: 24px 0;
}

.empty-text {
  font-size: 16px;
  color: var(--color-neutral-600);
  margin-top: 12px;
  font-weight: 600;
}

/* ========== PENDING QUEUES SECTION ========== */
.pending-queues-section {
  text-align: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 2px solid var(--color-danger-200);
}

.pending-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-danger-600);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pending-numbers-grid {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.pending-number-badge {
  background: var(--color-danger-600);
  color: var(--color-neutral-100);
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 22px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4);
  border: 2px solid var(--color-danger-700);
  min-width: 60px;
  text-align: center;
  animation: pending-badge-pulse 2s ease-in-out infinite;
  font-variant-numeric: tabular-nums; /* Stable digits */
}

@keyframes pending-badge-pulse {
  0%, 100% {
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4);
  }
  50% {
    box-shadow: 0 2px 12px rgba(220, 38, 38, 0.6);
  }
}

/* ========== FOOTER ========== */
.tv-footer {
  background: linear-gradient(135deg, var(--color-secondary-600) 0%, var(--color-secondary-700) 100%);
  border-radius: 16px;
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 8px 24px rgba(0, 83, 173, 0.3);
}

.footer-stats {
  display: flex;
  align-items: center;
  gap: 32px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  opacity: 0.9;
}

.stat-content {
  text-align: left;
}

.stat-value {
  font-size: 40px;
  font-weight: 900;
  line-height: 1;
  color: var(--color-neutral-100);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  font-variant-numeric: tabular-nums; /* Stable digits */
}

.stat-label {
  font-size: 14px;
  opacity: 0.95;
  margin-top: 4px;
  color: var(--color-neutral-100);
  font-weight: 600;
}

.stat-divider {
  width: 2px;
  height: 50px;
  background: rgba(255, 255, 255, 0.3);
}

.footer-message {
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  color: var(--color-neutral-100);
  opacity: 0.95;
}

/* ========== OPTIMIZATIONS FOR 1920x1080 ========== */
@media (min-width: 1920px) and (min-height: 1080px) {
  .tv-display-container {
    width: 1920px;
    height: 1080px;
    padding: 24px;
  }
}

/* ========== LARGE SCREENS (> 1920px) ========== */
@media (min-width: 2560px) {
  .tv-display-container {
    width: 1920px;
    height: 1080px;
  }
  
  .tv-header {
    padding: 28px 44px;
  }
  
  .display-title {
    font-size: 52px;
  }
  
  .hero-number {
    font-size: 160px;
  }
  
  .queue-number-large {
    font-size: 90px;
  }
}

/* ========== MEDIUM SCREENS (1366px - 1920px) ========== */
@media (max-width: 1920px) and (min-width: 1367px) {
  .tv-display-container {
    padding: 20px;
  }

  .tv-header {
    padding: 20px 32px;
  }

  .display-title {
    font-size: 42px;
  }

  .hospital-name {
    font-size: 18px;
  }

  .current-time {
    font-size: 48px;
  }

  .hero-number {
    font-size: 120px;
  }

  .hero-clinic {
    font-size: 32px;
  }

  .clinic-grid {
    gap: 14px;
  }

  .clinic-card {
    min-height: 220px;
    padding: 18px;
  }

  .clinic-name {
    font-size: 22px;
  }

  .queue-number-large {
    font-size: 72px;
  }

  .next-number-badge {
    font-size: 20px;
    padding: 6px 14px;
  }
}

/* ========== SMALL SCREENS (1024px - 1366px) ========== */
@media (max-width: 1366px) {
  .tv-display-container {
    padding: 16px;
  }

  .tv-header {
    padding: 16px 24px;
  }

  .hospital-logo .v-icon {
    font-size: 48px !important;
  }

  .display-title {
    font-size: 36px;
    letter-spacing: 2px;
  }

  .hospital-name {
    font-size: 16px;
  }

  .current-time {
    font-size: 40px;
  }

  .current-date {
    font-size: 14px;
  }

  .hero-queue {
    padding: 24px;
  }

  .hero-label {
    font-size: 24px;
  }

  .hero-label .v-icon {
    font-size: 28px !important;
  }

  .hero-number {
    font-size: 100px;
    letter-spacing: 6px;
  }

  .hero-clinic {
    font-size: 28px;
  }

  .hero-clinic .v-icon {
    font-size: 24px !important;
  }

  .clinic-grid {
    gap: 12px;
  }

  .clinic-card {
    padding: 16px;
    min-height: 200px;
  }

  .clinic-header {
    padding-bottom: 12px;
    margin-bottom: 12px;
  }

  .clinic-name {
    font-size: 20px;
  }

  .queue-count {
    padding: 5px 12px;
    font-size: 16px;
  }

  .count-number {
    font-size: 18px;
  }

  .queue-status-label {
    font-size: 14px;
  }

  .queue-number-large {
    font-size: 64px;
    letter-spacing: 3px;
  }

  .next-label {
    font-size: 12px;
  }

  .next-number-badge {
    font-size: 18px;
    padding: 6px 12px;
    min-width: 50px;
  }

  .empty-text {
    font-size: 14px;
  }

  .tv-footer {
    padding: 16px 32px;
  }

  .footer-stats {
    gap: 24px;
  }

  .stat-item {
    gap: 12px;
  }

  .stat-icon {
    font-size: 28px !important;
  }

  .stat-value {
    font-size: 36px;
  }

  .stat-label {
    font-size: 13px;
  }

  .stat-divider {
    height: 40px;
  }

  .footer-message {
    font-size: 18px;
  }

  .footer-message .v-icon {
    font-size: 20px !important;
  }
}

/* ========== TABLET SCREENS (768px - 1024px) ========== */
@media (max-width: 1024px) {
  .tv-display-container {
    padding: 12px;
  }

  .tv-header {
    flex-direction: column;
    gap: 12px;
    text-align: center;
    padding: 16px 20px;
  }

  .tv-header-left {
    flex-direction: column;
    gap: 12px;
  }

  .tv-header-right {
    text-align: center;
  }

  .display-title {
    font-size: 32px;
  }

  .hospital-name {
    font-size: 14px;
  }

  .current-time {
    font-size: 36px;
  }

  .current-date {
    font-size: 12px;
  }

  .hero-queue {
    padding: 20px;
  }

  .hero-label {
    font-size: 20px;
    flex-direction: column;
    gap: 8px;
  }

  .hero-number {
    font-size: 80px;
    letter-spacing: 4px;
  }

  .hero-clinic {
    font-size: 24px;
    flex-direction: column;
    gap: 8px;
  }

  .clinic-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .clinic-card {
    min-height: 180px;
    padding: 14px;
  }

  .clinic-name {
    font-size: 18px;
  }

  .queue-number-large {
    font-size: 56px;
  }

  .next-number-badge {
    font-size: 16px;
    padding: 5px 10px;
  }

  .tv-footer {
    flex-direction: column;
    gap: 16px;
    padding: 16px 20px;
  }

  .footer-stats {
    width: 100%;
    justify-content: space-around;
  }

  .stat-divider {
    height: 30px;
  }
}

/* ========== MOBILE SCREENS (< 768px) ========== */
@media (max-width: 768px) {
  .tv-display-container {
    padding: 10px;
  }

  .tv-header {
    padding: 12px 16px;
  }

  .hospital-logo .v-icon {
    font-size: 40px !important;
  }

  .display-title {
    font-size: 24px;
    letter-spacing: 1px;
  }

  .hospital-name {
    font-size: 12px;
  }

  .current-time {
    font-size: 28px;
  }

  .current-date {
    font-size: 11px;
  }

  .hero-queue {
    padding: 16px;
    margin-bottom: 12px;
  }

  .hero-label {
    font-size: 16px;
  }

  .hero-label .v-icon {
    font-size: 20px !important;
  }

  .hero-number {
    font-size: 60px;
    margin: 12px 0;
  }

  .hero-clinic {
    font-size: 18px;
  }

  .hero-clinic .v-icon {
    font-size: 18px !important;
  }

  .clinic-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 12px;
  }

  .clinic-card {
    min-height: 160px;
    padding: 12px;
  }

  .clinic-header {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom-width: 2px;
  }

  .clinic-name {
    font-size: 16px;
  }

  .queue-count {
    padding: 4px 10px;
    font-size: 14px;
  }

  .queue-count .v-icon {
    font-size: 16px !important;
  }

  .count-number {
    font-size: 16px;
  }

  .queue-status-label {
    font-size: 12px;
  }

  .queue-number-large {
    font-size: 48px;
    letter-spacing: 2px;
  }

  .next-label {
    font-size: 11px;
  }

  .next-numbers-grid {
    gap: 6px;
  }

  .next-number-badge {
    font-size: 14px;
    padding: 4px 8px;
    min-width: 40px;
  }

  .empty-queue .v-icon {
    font-size: 32px !important;
  }

  .empty-text {
    font-size: 12px;
  }

  .tv-footer {
    padding: 12px 16px;
  }

  .footer-stats {
    gap: 16px;
  }

  .stat-item {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .stat-icon {
    font-size: 24px !important;
  }

  .stat-content {
    text-align: center;
  }

  .stat-value {
    font-size: 28px;
  }

  .stat-label {
    font-size: 11px;
  }

  .stat-divider {
    display: none;
  }

  .footer-message {
    font-size: 14px;
    text-align: center;
  }

  .footer-message .v-icon {
    font-size: 18px !important;
  }
}

/* Prevent text selection and improve readability */
* {
  user-select: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>

