/**
 * Safari Compatibility CSS
 * Global fixes for Safari browser compatibility issues
 * This file should be included in all templates that need cross-browser compatibility
 */

/* Safari Box Model Fix */
*, *::before, *::after {
    box-sizing: border-box;
    -webkit-box-sizing: border-box; /* Safari prefix */
    -moz-box-sizing: border-box; /* Firefox prefix */
}

/* Safari Form Control Fixes */
.form-control {
    -webkit-appearance: none; /* Remove Safari default styling */
    -moz-appearance: none; /* Remove Firefox default styling */
    appearance: none; /* Standard property */
    border: 1px solid #e9ecef; /* Safari fallback border */
    border-radius: 6px; /* Consistent border radius */
    -webkit-border-radius: 6px; /* Safari prefix */
    -moz-border-radius: 6px; /* Firefox prefix */
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(90, 103, 216, 0.1);
    -webkit-box-shadow: 0 0 0 3px rgba(90, 103, 216, 0.1); /* Safari prefix */
    -moz-box-shadow: 0 0 0 3px rgba(90, 103, 216, 0.1); /* Firefox prefix */
    transform: translateY(-1px);
    -webkit-transform: translateY(-1px); /* Safari prefix */
    -moz-transform: translateY(-1px); /* Firefox prefix */
}

/* Safari Button Fixes */
.btn {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease; /* Safari prefix */
    -moz-transition: all 0.2s ease; /* Firefox prefix */
}

.btn:hover {
    transform: translateY(-1px);
    -webkit-transform: translateY(-1px); /* Safari prefix */
    -moz-transform: translateY(-1px); /* Firefox prefix */
}

/* Safari Grid Layout Fallbacks */
.form-row {
    display: grid;
    display: -ms-grid; /* IE Grid */
}

/* Safari Grid fallback using flexbox */
@supports not (display: grid) {
    .form-row {
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        gap: 20px;
    }
    
    .form-row > * {
        flex: 1;
        -webkit-flex: 1;
        min-width: 200px;
    }
    
    .form-row.two-columns > * {
        flex: 0 0 calc(50% - 10px);
        -webkit-flex: 0 0 calc(50% - 10px);
    }
    
    .form-row.three-columns > * {
        flex: 0 0 calc(33.333% - 14px);
        -webkit-flex: 0 0 calc(33.333% - 14px);
    }
}

/* Enhanced Grid Support with Safari prefixes */
.form-row.two-columns {
    grid-template-columns: 1fr 1fr;
    -ms-grid-columns: 1fr 20px 1fr; /* IE Grid */
}

.form-row.three-columns {
    grid-template-columns: 1fr 1fr 1fr;
    -ms-grid-columns: 1fr 20px 1fr 20px 1fr; /* IE Grid */
}

.invoice-item-fields {
    grid-template-columns: 80px 60px 2fr 80px 100px 40px;
    -ms-grid-columns: 80px 12px 60px 12px 2fr 12px 80px 12px 100px 12px 40px;
}

.invoice-item-fields.no-vat {
    grid-template-columns: 80px 60px 2fr 100px 40px;
    -ms-grid-columns: 80px 12px 60px 12px 2fr 12px 100px 12px 40px;
}

/* Safari Select Styling */
select.form-control {
    background-image: url("data:image/svg+xml;charset=utf8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23666' d='m2 0-2 2h4zm0 5 2-2h-4z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 12px;
    padding-right: 40px;
}

/* Safari Input Type Fixes */
input[type="number"].form-control,
input[type="email"].form-control,
input[type="tel"].form-control,
input[type="url"].form-control,
input[type="date"].form-control,
input[type="time"].form-control {
    -webkit-appearance: none;
    -moz-appearance: textfield; /* Firefox number input fix */
}

/* Remove spinner from number inputs in Safari/Chrome */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Safari Textarea Fixes */
textarea.form-control {
    resize: vertical;
    -webkit-resize: vertical;
}

/* Safari Mobile Fixes */
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    /* High DPI fixes for Safari iOS */
    .form-control {
        font-size: 16px; /* Prevent zoom on iOS */
        -webkit-text-size-adjust: 100%;
    }
}

/* Safari iOS specific fixes */
@supports (-webkit-touch-callout: none) {
    .form-control {
        border-radius: 8px; /* Slightly larger radius for iOS */
        -webkit-border-radius: 8px;
    }
    
    .btn {
        border-radius: 8px;
        -webkit-border-radius: 8px;
    }
}

/* Safari Focus Ring Fix */
.form-control:focus,
.btn:focus {
    outline: none;
    -webkit-focus-ring-color: transparent;
}

/* Safari Animation Performance */
.btn,
.form-control {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
}

/* Safari Card/Section Styling */
.form-section {
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* Safari Responsive Fixes */
@media (max-width: 768px) {
    .form-row.two-columns,
    .form-row.three-columns {
        grid-template-columns: 1fr;
        -ms-grid-columns: 1fr;
    }
    
    /* Flexbox fallback for mobile */
    @supports not (display: grid) {
        .form-row.two-columns > *,
        .form-row.three-columns > * {
            flex: 1 1 100%;
            -webkit-flex: 1 1 100%;
            min-width: unset;
        }
    }
    
    .invoice-item-fields {
        grid-template-columns: 1fr;
        -ms-grid-columns: 1fr;
        gap: 12px;
        grid-gap: 12px; /* Safari fallback */
    }
}

@media (max-width: 1024px) {
    .invoice-item-fields {
        grid-template-columns: 80px 60px 2fr 80px 100px 40px;
        -ms-grid-columns: 80px 12px 60px 12px 2fr 12px 80px 12px 100px 12px 40px;
        gap: 12px;
        grid-gap: 12px; /* Safari fallback */
    }
    
    .invoice-item-fields.no-vat {
        grid-template-columns: 80px 60px 2fr 100px 40px;
        -ms-grid-columns: 80px 12px 60px 12px 2fr 12px 100px 12px 40px;
    }
}