/**
 * Football Booking - Main Stylesheet
 *
 * This file contains custom styles that extend Tailwind CSS.
 * Most styling is handled by Tailwind utility classes in templates.
 */

/* ================================
   Alpine.js Cloak
   Prevents flash of content before Alpine initializes
   Note: Alpine.js removes the x-cloak attribute after init
   ================================ */

[x-cloak] {
    display: none !important;
}

/* ================================
   Font Awesome Icon Fixes
   Makes FA icons work properly with Tailwind sizing classes
   ================================ */

/* Base styling for all FA icons */
.fa-solid,
.fa-regular,
.fa-brands,
.fa-light,
.fa-thin,
.fa-duotone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1;
}

/* Size mapping: Tailwind w-* classes to font-size
   These work regardless of h-* classes since icons scale uniformly */
i[class*="fa-"].w-3 { font-size: 0.75rem; }
i[class*="fa-"].w-3\.5 { font-size: 0.875rem; }
i[class*="fa-"].w-4 { font-size: 1rem; }
i[class*="fa-"].w-5 { font-size: 1.25rem; }
i[class*="fa-"].w-6 { font-size: 1.5rem; }
i[class*="fa-"].w-7 { font-size: 1.75rem; }
i[class*="fa-"].w-8 { font-size: 2rem; }
i[class*="fa-"].w-10 { font-size: 2.5rem; }
i[class*="fa-"].w-12 { font-size: 3rem; }

/* Responsive variants (md: breakpoint = 768px) */
@media (min-width: 768px) {
    i[class*="fa-"].md\:w-5 { font-size: 1.25rem; }
    i[class*="fa-"].md\:w-6 { font-size: 1.5rem; }
    i[class*="fa-"].md\:w-7 { font-size: 1.75rem; }
    i[class*="fa-"].md\:w-8 { font-size: 2rem; }
}

/* Responsive variants (lg: breakpoint = 1024px) */
@media (min-width: 1024px) {
    i[class*="fa-"].lg\:w-5 { font-size: 1.25rem; }
    i[class*="fa-"].lg\:w-6 { font-size: 1.5rem; }
    i[class*="fa-"].lg\:w-7 { font-size: 1.75rem; }
    i[class*="fa-"].lg\:w-8 { font-size: 2rem; }
}

/* ================================
   Custom Animations
   ================================ */

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

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ================================
   Animation Utilities
   ================================ */

.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

.animate-slide-in {
    animation: slideIn 0.3s ease-out;
}

.animate-spin {
    animation: spin 0.8s linear infinite;
}

/* ================================
   Skeleton Loader
   ================================ */

.skeleton {
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 0.5rem;
}

.dark .skeleton {
    background: linear-gradient(90deg, #182c25 25%, #2d4a3e 50%, #182c25 75%);
    background-size: 200% 100%;
}

/* ================================
   Form Enhancements
   ================================ */

/* Remove default focus outline, use ring instead */
input:focus,
button:focus,
select:focus,
textarea:focus {
    outline: none;
}

/* Custom checkbox styling */
input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

/* ================================
   Toast Notifications
   ================================ */

.toast {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 200;
    min-width: 320px;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    animation: slideIn 0.3s ease;
}

.toast-success {
    background: #dcfce7;
    border-left: 4px solid #22c55e;
    color: #166534;
}

.toast-error {
    background: #fee2e2;
    border-left: 4px solid #ef4444;
    color: #991b1b;
}

.toast-warning {
    background: #fef3c7;
    border-left: 4px solid #f59e0b;
    color: #92400e;
}

.toast-info {
    background: #dbeafe;
    border-left: 4px solid #3b82f6;
    color: #1e40af;
}

/* ================================
   Scrollbar Styling
   ================================ */

/* Hide scrollbar utility */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

.dark ::-webkit-scrollbar-thumb {
    background: #2d4a3e;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #4c9a80;
}