Index: petify-frontend/src/views/ClinicApplicationView.vue
===================================================================
--- petify-frontend/src/views/ClinicApplicationView.vue	(revision fa32d0f462d925f109df1a21025f904e56606f8b)
+++ 	(revision )
@@ -1,352 +1,0 @@
-<template>
-  <main class="application-page">
-    <section class="application-hero">
-      <div class="container hero-inner">
-        <div class="hero-copy">
-          <p class="eyebrow">Petify clinics</p>
-          <h1>Apply as a vet clinic</h1>
-          <p>
-            Send your clinic details to the Petify admins. Once approved, your clinic can manage appointments,
-            availability, cancellations, and client visit outcomes from the clinic dashboard.
-          </p>
-        </div>
-        <div class="review-note">
-          <span class="note-label">Admin review</span>
-          <strong>Applications start as pending</strong>
-          <p>Admins can approve or deny them from the Clinics tab.</p>
-        </div>
-      </div>
-    </section>
-
-    <section class="container application-body">
-      <div class="form-shell">
-        <div class="form-heading">
-          <h2>Clinic information</h2>
-          <p>Use details patients can recognize. Email or phone is required.</p>
-        </div>
-
-        <form class="application-form" @submit.prevent="submit">
-          <div class="form-grid">
-            <div class="form-group wide">
-              <label for="clinicName">Clinic name *</label>
-              <input
-                id="clinicName"
-                v-model.trim="form.name"
-                class="form-control"
-                type="text"
-                placeholder="Happy Paws Clinic"
-                required
-              />
-            </div>
-
-            <div class="form-group">
-              <label for="clinicEmail">Email</label>
-              <input
-                id="clinicEmail"
-                v-model.trim="form.email"
-                class="form-control"
-                type="email"
-                placeholder="clinic@example.com"
-              />
-            </div>
-
-            <div class="form-group">
-              <label for="clinicPhone">Phone</label>
-              <input
-                id="clinicPhone"
-                v-model.trim="form.phone"
-                class="form-control"
-                type="tel"
-                placeholder="+389 70 000 000"
-              />
-            </div>
-
-            <div class="form-group">
-              <label for="clinicCity">City *</label>
-              <input
-                id="clinicCity"
-                v-model.trim="form.city"
-                class="form-control"
-                type="text"
-                placeholder="Skopje"
-                required
-              />
-            </div>
-
-            <div class="form-group">
-              <label for="clinicAddress">Address *</label>
-              <input
-                id="clinicAddress"
-                v-model.trim="form.address"
-                class="form-control"
-                type="text"
-                placeholder="Partizanska 12"
-                required
-              />
-            </div>
-          </div>
-
-          <div v-if="errorMessage" class="alert alert-danger">
-            {{ errorMessage }}
-          </div>
-
-          <div v-if="successMessage" class="alert alert-success">
-            {{ successMessage }}
-          </div>
-
-          <div class="form-actions">
-            <button class="btn btn-primary" type="submit" :disabled="isSubmitting">
-              <span v-if="isSubmitting" class="spinner-border spinner-border-sm me-2"></span>
-              {{ isSubmitting ? 'Submitting...' : 'Submit application' }}
-            </button>
-            <button class="btn btn-outline-secondary" type="button" :disabled="isSubmitting" @click="resetForm">
-              Reset
-            </button>
-          </div>
-        </form>
-      </div>
-    </section>
-  </main>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { submitClinicApplication } from '../api/clinicApplications'
-
-const emptyForm = {
-  name: '',
-  email: '',
-  phone: '',
-  city: '',
-  address: '',
-}
-
-const form = ref({ ...emptyForm })
-const isSubmitting = ref(false)
-const errorMessage = ref('')
-const successMessage = ref('')
-
-function validateForm(): string {
-  if (!form.value.name.trim()) return 'Clinic name is required'
-  if (!form.value.city.trim()) return 'City is required'
-  if (!form.value.address.trim()) return 'Address is required'
-  if (!form.value.email.trim() && !form.value.phone.trim()) return 'Email or phone is required'
-  return ''
-}
-
-async function submit() {
-  const validationError = validateForm()
-  if (validationError) {
-    errorMessage.value = validationError
-    successMessage.value = ''
-    return
-  }
-
-  try {
-    isSubmitting.value = true
-    errorMessage.value = ''
-    successMessage.value = ''
-    const application = await submitClinicApplication(form.value)
-    successMessage.value = `Application submitted. Your status is ${application.status || 'PENDING'}.`
-    form.value = { ...emptyForm }
-  } catch (error) {
-    errorMessage.value = error instanceof Error ? error.message : 'Failed to submit application'
-  } finally {
-    isSubmitting.value = false
-  }
-}
-
-function resetForm() {
-  form.value = { ...emptyForm }
-  errorMessage.value = ''
-  successMessage.value = ''
-}
-</script>
-
-<style scoped>
-.application-page {
-  min-height: calc(100vh - 72px);
-  background: #f7f5f2;
-  color: #1f2933;
-}
-
-.application-hero {
-  background:
-    linear-gradient(135deg, rgba(31, 41, 51, 0.82), rgba(60, 78, 88, 0.68)),
-    url('https://images.unsplash.com/photo-1628009368231-7bb7cfcb0def?auto=format&fit=crop&w=1800&q=80');
-  background-position: center;
-  background-size: cover;
-  color: #ffffff;
-}
-
-.hero-inner {
-  min-height: 360px;
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 320px;
-  gap: 32px;
-  align-items: end;
-  padding-top: 72px;
-  padding-bottom: 46px;
-}
-
-.hero-copy {
-  max-width: 720px;
-}
-
-.eyebrow {
-  margin: 0 0 10px;
-  font-size: 0.78rem;
-  font-weight: 800;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: #fed7aa;
-}
-
-.hero-copy h1 {
-  margin: 0;
-  font-size: clamp(2.35rem, 5vw, 4.7rem);
-  line-height: 0.95;
-  font-weight: 850;
-}
-
-.hero-copy p {
-  margin: 20px 0 0;
-  max-width: 620px;
-  color: rgba(255, 255, 255, 0.9);
-  font-size: 1.04rem;
-  line-height: 1.65;
-}
-
-.review-note {
-  align-self: end;
-  padding: 18px;
-  border: 1px solid rgba(255, 255, 255, 0.24);
-  background: rgba(255, 255, 255, 0.11);
-  backdrop-filter: blur(12px);
-  border-radius: 8px;
-}
-
-.note-label {
-  display: inline-block;
-  margin-bottom: 10px;
-  color: #fed7aa;
-  font-size: 0.78rem;
-  font-weight: 800;
-  text-transform: uppercase;
-}
-
-.review-note strong {
-  display: block;
-  font-size: 1.05rem;
-}
-
-.review-note p {
-  margin: 8px 0 0;
-  color: rgba(255, 255, 255, 0.82);
-}
-
-.application-body {
-  padding-top: 34px;
-  padding-bottom: 64px;
-}
-
-.form-shell {
-  max-width: 940px;
-  margin: 0 auto;
-  background: #ffffff;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  box-shadow: 0 18px 40px rgba(31, 41, 51, 0.08);
-  padding: 28px;
-}
-
-.form-heading {
-  display: flex;
-  justify-content: space-between;
-  gap: 24px;
-  border-bottom: 1px solid #edf0f2;
-  padding-bottom: 18px;
-  margin-bottom: 22px;
-}
-
-.form-heading h2 {
-  margin: 0;
-  font-size: 1.45rem;
-  font-weight: 800;
-}
-
-.form-heading p {
-  max-width: 340px;
-  margin: 0;
-  color: #667085;
-}
-
-.form-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 18px;
-}
-
-.form-group.wide {
-  grid-column: 1 / -1;
-}
-
-.form-group label {
-  display: block;
-  margin-bottom: 7px;
-  color: #344054;
-  font-weight: 700;
-  font-size: 0.92rem;
-}
-
-.form-control {
-  min-height: 46px;
-  border-radius: 8px;
-}
-
-.alert {
-  margin-top: 18px;
-}
-
-.form-actions {
-  display: flex;
-  gap: 12px;
-  margin-top: 22px;
-}
-
-.btn {
-  border-radius: 8px;
-  font-weight: 700;
-}
-
-.btn-primary {
-  background: #f97316;
-  border-color: #f97316;
-}
-
-.btn-primary:hover {
-  background: #ea580c;
-  border-color: #ea580c;
-}
-
-@media (max-width: 768px) {
-  .hero-inner {
-    grid-template-columns: 1fr;
-    min-height: auto;
-    padding-top: 48px;
-  }
-
-  .review-note {
-    max-width: 420px;
-  }
-
-  .form-heading,
-  .form-actions {
-    flex-direction: column;
-  }
-
-  .form-grid {
-    grid-template-columns: 1fr;
-  }
-}
-</style>