/* Browser Support and Vendor Prefixes for Vue/Inertia Application */
/* This file provides vendor prefixes and fallbacks for cross-browser compatibility */
/* Supports: Chrome 60+, Firefox 55+, Safari 12+, Edge 79+ */

/* Import shared browser support from Laravel application */
@import url('../../../../laravel/public/css/shared/browser-support.css');

/* Vue/Inertia specific browser support enhancements */

/* Vue Transition Browser Support */
.vue-transition-enter-active,
.vue-transition-leave-active {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.vue-transition-enter-from,
.vue-transition-leave-to {
  opacity: 0;
  -webkit-transform: translateY(-10px);
  -moz-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  -o-transform: translateY(-10px);
  transform: translateY(-10px);
}

/* Vue Router Transition Support */
.router-transition-enter-active,
.router-transition-leave-active {
  -webkit-transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out, -moz-transform 0.3s ease-in-out;
  -ms-transition: opacity 0.3s ease-in-out, -ms-transform 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out, -o-transform 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.router-transition-enter-from {
  opacity: 0;
  -webkit-transform: translateX(30px);
  -moz-transform: translateX(30px);
  -ms-transform: translateX(30px);
  -o-transform: translateX(30px);
  transform: translateX(30px);
}

.router-transition-leave-to {
  opacity: 0;
  -webkit-transform: translateX(-30px);
  -moz-transform: translateX(-30px);
  -ms-transform: translateX(-30px);
  -o-transform: translateX(-30px);
  transform: translateX(-30px);
}

/* Inertia.js Loading States with Browser Support */
.inertia-loading {
  opacity: 0.6;
  pointer-events: none;
  -webkit-transition: opacity 0.15s ease-in-out;
  -moz-transition: opacity 0.15s ease-in-out;
  -ms-transition: opacity 0.15s ease-in-out;
  -o-transition: opacity 0.15s ease-in-out;
  transition: opacity 0.15s ease-in-out;
}

/* Vue Component Animation Keyframes with Vendor Prefixes */
@-webkit-keyframes vue-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@-moz-keyframes vue-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@-ms-keyframes vue-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@-o-keyframes vue-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes vue-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@-webkit-keyframes vue-slide-up {
  from {
    opacity: 0;
    -webkit-transform: translateY(20px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@-moz-keyframes vue-slide-up {
  from {
    opacity: 0;
    -moz-transform: translateY(20px);
  }
  to {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}

@-ms-keyframes vue-slide-up {
  from {
    opacity: 0;
    -ms-transform: translateY(20px);
  }
  to {
    opacity: 1;
    -ms-transform: translateY(0);
  }
}

@-o-keyframes vue-slide-up {
  from {
    opacity: 0;
    -o-transform: translateY(20px);
  }
  to {
    opacity: 1;
    -o-transform: translateY(0);
  }
}

@keyframes vue-slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@-webkit-keyframes vue-scale-in {
  from {
    opacity: 0;
    -webkit-transform: scale(0.9);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
  }
}

@-moz-keyframes vue-scale-in {
  from {
    opacity: 0;
    -moz-transform: scale(0.9);
  }
  to {
    opacity: 1;
    -moz-transform: scale(1);
  }
}

@-ms-keyframes vue-scale-in {
  from {
    opacity: 0;
    -ms-transform: scale(0.9);
  }
  to {
    opacity: 1;
    -ms-transform: scale(1);
  }
}

@-o-keyframes vue-scale-in {
  from {
    opacity: 0;
    -o-transform: scale(0.9);
  }
  to {
    opacity: 1;
    -o-transform: scale(1);
  }
}

@keyframes vue-scale-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Vue Animation Classes with Browser Support */
.vue-fade-in {
  -webkit-animation: vue-fade-in 0.3s ease-in-out;
  -moz-animation: vue-fade-in 0.3s ease-in-out;
  -ms-animation: vue-fade-in 0.3s ease-in-out;
  -o-animation: vue-fade-in 0.3s ease-in-out;
  animation: vue-fade-in 0.3s ease-in-out;
}

.vue-slide-up {
  -webkit-animation: vue-slide-up 0.3s ease-in-out;
  -moz-animation: vue-slide-up 0.3s ease-in-out;
  -ms-animation: vue-slide-up 0.3s ease-in-out;
  -o-animation: vue-slide-up 0.3s ease-in-out;
  animation: vue-slide-up 0.3s ease-in-out;
}

.vue-scale-in {
  -webkit-animation: vue-scale-in 0.3s ease-in-out;
  -moz-animation: vue-scale-in 0.3s ease-in-out;
  -ms-animation: vue-scale-in 0.3s ease-in-out;
  -o-animation: vue-scale-in 0.3s ease-in-out;
  animation: vue-scale-in 0.3s ease-in-out;
}

/* Vue Component Specific Browser Support */
.v-theme-aware {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--border-light);
  -webkit-transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
  -moz-transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
  -ms-transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
  -o-transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.v-theme-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-light);
  -webkit-border-radius: var(--radius-md);
  -moz-border-radius: var(--radius-md);
  border-radius: var(--radius-md);
  -webkit-box-shadow: var(--shadow-sm);
  -moz-box-shadow: var(--shadow-sm);
  box-shadow: var(--shadow-sm);
  -webkit-transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
  -moz-transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
  -ms-transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
  -o-transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.v-theme-input {
  background-color: var(--bg-input);
  border: 1px solid var(--border-medium);
  color: var(--text-primary);
  -webkit-transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
  -moz-transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
  -ms-transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
  -o-transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.v-theme-input:focus {
  border-color: var(--border-focus);
  outline: none;
  -webkit-box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
  -moz-box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

/* Vue Scoped Style Browser Support Helpers */
.vue-scoped-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.vue-scoped-grid {
  display: -ms-grid;
  display: grid;
}

/* Fallback for Vue components in IE 11 */
@supports not (display: grid) {
  .vue-scoped-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}

/* Vue Component Transform Support */
.vue-transform {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}

/* Vue Component Filter Support */
.vue-filter-blur {
  -webkit-filter: blur(5px);
  filter: blur(5px);
}

.vue-backdrop-blur {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Fallback for Vue components without backdrop-filter support */
@supports not (backdrop-filter: blur(10px)) {
  .vue-backdrop-blur {
    background-color: rgba(255, 255, 255, 0.8);
  }
  
  [data-theme="dark"] .vue-backdrop-blur {
    background-color: rgba(0, 0, 0, 0.8);
  }
}

/* Vue Component User Select Support */
.vue-select-none {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Vue Component Appearance Support */
.vue-appearance-none {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Vue Component Sticky Support */
.vue-sticky {
  position: -webkit-sticky;
  position: sticky;
}

/* Fallback for Vue components without sticky support */
@supports not (position: sticky) {
  .vue-sticky {
    position: relative;
  }
}

/* Vue Component Aspect Ratio Support */
.vue-aspect-square {
  aspect-ratio: 1 / 1;
}

.vue-aspect-video {
  aspect-ratio: 16 / 9;
}

/* Fallback for Vue components without aspect-ratio support */
@supports not (aspect-ratio: 1 / 1) {
  .vue-aspect-square {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
  }
  
  .vue-aspect-square > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .vue-aspect-video {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
  }
  
  .vue-aspect-video > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/* Vue Component Gap Support */
.vue-gap-4 {
  gap: 1rem;
}

/* Fallback for Vue components without gap support */
@supports not (gap: 1rem) {
  .vue-gap-4.vue-scoped-flex > * + * {
    margin-left: 1rem;
  }
  
  .vue-gap-4.vue-scoped-flex.flex-column > * + * {
    margin-left: 0;
    margin-top: 1rem;
  }
}

/* Vue Component Object Fit Support */
.vue-object-cover {
  -o-object-fit: cover;
  object-fit: cover;
}

.vue-object-contain {
  -o-object-fit: contain;
  object-fit: contain;
}

/* Fallback for Vue components without object-fit support */
@supports not (object-fit: cover) {
  .vue-object-cover {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .vue-object-contain {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
}

/* Vue Component Scroll Snap Support */
.vue-scroll-snap-x {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.vue-scroll-snap-start {
  scroll-snap-align: start;
}

/* Fallback for Vue components without scroll snap support */
@supports not (scroll-snap-type: x mandatory) {
  .vue-scroll-snap-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Vue Component Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .vue-transition-enter-active,
  .vue-transition-leave-active,
  .router-transition-enter-active,
  .router-transition-leave-active {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
  }
  
  .vue-fade-in,
  .vue-slide-up,
  .vue-scale-in {
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -ms-animation: none !important;
    -o-animation: none !important;
    animation: none !important;
  }
  
  .inertia-loading {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
  }
}

/* Vue Component High Contrast Support */
@media (prefers-contrast: high) {
  .v-theme-card,
  .v-theme-input {
    border-width: 2px;
  }
  
  .v-theme-input:focus {
    outline: 2px solid;
    outline-offset: 2px;
  }
}

/* Vue Component Forced Colors Support */
@media (forced-colors: active) {
  .v-theme-aware,
  .v-theme-card,
  .v-theme-input {
    forced-color-adjust: auto;
  }
}

/* Vue Component Print Support */
@media print {
  .vue-transition-enter-active,
  .vue-transition-leave-active,
  .router-transition-enter-active,
  .router-transition-leave-active {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
  }
  
  .vue-fade-in,
  .vue-slide-up,
  .vue-scale-in {
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -ms-animation: none !important;
    -o-animation: none !important;
    animation: none !important;
  }
  
  .vue-print-hidden {
    display: none !important;
  }
  
  .vue-print-visible {
    display: block !important;
  }
}