.uk-plate {
    letter-spacing: 2px;
    text-transform: uppercase;
}

.uk-plate-wrapper {
    display: flex;
    align-items: center;
    background: #ffd100;
    border: 2px solid #d1d5db; /* gray-300 */
    border-radius: 12px;
    overflow: hidden;
}

.uk-plate-band {
    background: #003399; /* UK blue */
    color: #ffffff;
    width: 52px;
    min-width: 52px;
    height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border-right: 2px solid rgba(255,255,255,0.2);
}

.uk-plate-band .uk-stars {
    font-size: 10px;
    letter-spacing: 2px;
    opacity: 0.9;
}

.uk-plate-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    padding: 10px 14px;
    font-weight: 800;
    font-size: 18px;
    color: #111827; /* gray-900 */
}

.uk-plate-input::placeholder {
    color: #6b7280; /* gray-500 */
}

.uk-plate-input:focus {
    outline: none;
}
/* Custom styles for the client app */

/* Primary color variables */
:root {
    --primary-color: #00a9ea;
    --primary-dark: #0088cc;
    --primary-light: #33b8ed;
}

/* Modern typography */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
}

/* Mobile-first responsive design */
@media (max-width: 768px) {
    .container {
        padding: 1rem;
    }
    
    .grid-cols-1 {
        grid-template-columns: 1fr;
    }
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom animations */
.fade-in {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Job status badges */
.status-badge {
    @apply rounded-xl text-sm font-semibold;
}

.status-pending {
    @apply bg-amber-50 text-amber-700 border border-amber-200;
}

.status-in-progress {
    @apply bg-[#00a9ea]/10 text-[#00a9ea] border border-[#00a9ea]/20;
}

.status-completed {
    @apply bg-emerald-50 text-emerald-700 border border-emerald-200;
}

.status-quoted {
    @apply bg-violet-50 text-violet-700 border border-violet-200;
}

/* Loading spinner */
.spinner {
    border: 2px solid #f3f3f3;
    border-top: 2px solid var(--primary-color);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Photo preview */
.photo-preview {
    @apply w-20 h-20 object-cover rounded-lg border border-gray-300;
}

/* Form validation */
.error {
    @apply border-red-500 bg-red-50;
}

.error-message {
    @apply text-red-500 text-sm mt-2 font-medium;
}

/* Success message */
.success {
    @apply bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded;
}

/* Notification styles */
.notification {
    @apply fixed top-6 right-6 p-6 rounded-2xl shadow-2xl z-50 border backdrop-blur-sm;
}

.notification-success {
    @apply bg-emerald-500 text-white border-emerald-600;
}

.notification-error {
    @apply bg-red-500 text-white border-red-600;
}

.notification-info {
    @apply bg-[#00a9ea] text-white border-[#0088cc];
}

/* Modern card styles */
.modern-card {
    @apply bg-white rounded-xl shadow-lg border border-gray-100 hover:shadow-xl transition-all duration-300;
}

/* Modern button styles */
.btn-primary {
    @apply bg-gradient-to-r from-[#00a9ea] to-[#0088cc] text-white px-6 py-3 rounded-xl font-semibold hover:shadow-lg transition-all duration-300 transform hover:-translate-y-0.5;
}

.btn-secondary {
    @apply bg-gray-100 text-gray-700 px-6 py-3 rounded-xl font-semibold hover:bg-gray-200 transition-colors;
}

/* Choice chips */
.choice-chip {
    @apply w-full text-center px-4 py-3 rounded-2xl border-2 border-gray-200 font-semibold text-gray-700 hover:border-[#00a9ea] transition-colors;
}

.choice-chip.active {
    @apply border-[#00a9ea] bg-[#00a9ea]/10 text-[#00a9ea];
}

/* Filter chips */
.filter-chip {
    @apply px-3 py-2 rounded-xl border border-gray-200 text-gray-700 text-sm hover:bg-gray-50 transition-colors;
}

.filter-chip.active {
    @apply bg-[#00a9ea]/10 text-[#00a9ea] border-[#00a9ea]/20;
}

/* Skeleton loading */
.skeleton {
    @apply animate-pulse bg-gray-200 rounded;
}

.skeleton-card {
    @apply modern-card p-6;
}

.skeleton-line {
    height: 12px;
}

/* Quick Action Tiles */
.quick-action-tile {
    @apply p-6 rounded-2xl border-2 border-gray-200 text-center transition-all duration-300 hover:border-[#00a9ea] hover:shadow-lg hover:-translate-y-1 cursor-pointer bg-white;
}

.quick-action-tile:hover {
    @apply border-[#00a9ea] shadow-lg transform -translate-y-1;
}