/* GCWA-UAE Custom Styles */

:root {
    --primary-green: #16a34a;
    --primary-emerald: #047857;
    --secondary-gold: #f59e0b;
    --dark-charcoal: #1e293b;
    --light-white: #ffffff;
}

/* Smooth transitions */
* {
    @apply transition-all duration-300;
}

/* Typography */
body {
    @apply font-sans;
    font-feature-settings: "kern" 1;
}

h1, h2, h3, h4, h5, h6 {
    @apply font-bold tracking-tight;
}

/* Button Styles */
.btn {
    @apply px-4 py-2 rounded-lg font-semibold transition-all duration-300;
}

.btn-primary {
    @apply bg-gradient-to-r from-green-600 to-emerald-700 text-white hover:from-green-700 hover:to-emerald-800;
}

.btn-secondary {
    @apply bg-slate-200 dark:bg-slate-700 text-slate-900 dark:text-white hover:bg-slate-300 dark:hover:bg-slate-600;
}

.btn-outline {
    @apply border-2 border-green-600 text-green-600 hover:bg-green-50 dark:hover:bg-slate-900;
}

/* Card Styles */
.card {
    @apply bg-white dark:bg-slate-800 rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow;
}

.card-hover {
    @apply card hover:scale-105 transition-transform;
}

/* Section Spacing */
.section-padding {
    @apply py-20;
}

/* Gradient Text */
.gradient-text {
    @apply bg-gradient-to-r from-green-600 to-emerald-700 bg-clip-text text-transparent;
}

/* Hero Section */
.hero {
    @apply min-h-screen bg-gradient-to-br from-green-700 to-emerald-700 text-white;
}

/* Dark Mode Enhancements */
@media (prefers-color-scheme: dark) {
    .glass-effect {
        @apply bg-white/10 backdrop-blur-md border border-white/20;
    }
}

@media (prefers-color-scheme: light) {
    .glass-effect {
        @apply bg-white/40 backdrop-blur-md border border-white/60;
    }
}

/* Loading Animation */
.animate-pulse-slow {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes shimmer {
    0%, 100% {
        background-position: -1000px 0;
    }
    50% {
        background-position: 1000px 0;
    }
}

.animate-shimmer {
    animation: shimmer 2s infinite;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    background-size: 1000px 100%;
}

/* Counter Animation */
.counter {
    @apply font-bold;
}

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

/* Line Clamp Utility */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Hover Effects */
.hover-lift {
    @apply hover:shadow-2xl hover:-translate-y-2;
}

.hover-scale {
    @apply hover:scale-105;
}

/* Focus States */
input:focus, textarea:focus, select:focus {
    @apply ring-2 ring-green-600 ring-offset-0 dark:ring-offset-0;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    @apply w-2;
}

::-webkit-scrollbar-track {
    @apply bg-slate-100 dark:bg-slate-800;
}

::-webkit-scrollbar-thumb {
    @apply bg-green-600 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-green-700;
}

/* Responsive Images */
img {
    @apply w-full h-auto;
}

/* Form Elements */
input, textarea, select {
    @apply border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white rounded-lg;
}

/* Alert Styles */
.alert {
    @apply px-4 py-3 rounded-lg;
}

.alert-success {
    @apply bg-green-50 dark:bg-green-900 border border-green-200 dark:border-green-700 text-green-700 dark:text-green-200;
}

.alert-error {
    @apply bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-700 text-red-700 dark:text-red-200;
}

.alert-warning {
    @apply bg-yellow-50 dark:bg-yellow-900 border border-yellow-200 dark:border-yellow-700 text-yellow-700 dark:text-yellow-200;
}

.alert-info {
    @apply bg-blue-50 dark:bg-blue-900 border border-blue-200 dark:border-blue-700 text-blue-700 dark:text-blue-200;
}

/* Tables */
table {
    @apply w-full border-collapse;
}

th {
    @apply bg-slate-100 dark:bg-slate-700 px-4 py-2 text-left font-semibold border-b border-slate-200 dark:border-slate-600;
}

td {
    @apply px-4 py-2 border-b border-slate-200 dark:border-slate-700;
}

tr:hover {
    @apply bg-slate-50 dark:bg-slate-700;
}

/* Badge Styles */
.badge {
    @apply inline-block px-3 py-1 rounded-full text-sm font-semibold;
}

.badge-success {
    @apply bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200;
}

.badge-warning {
    @apply bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200;
}

.badge-danger {
    @apply bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200;
}

/* Modal Backdrop */
.modal-backdrop {
    @apply fixed inset-0 bg-black/50 dark:bg-black/70 flex items-center justify-center z-50;
}

.modal {
    @apply bg-white dark:bg-slate-800 rounded-lg shadow-2xl max-w-md w-full mx-4;
}

/* Tooltip */
.tooltip {
    @apply absolute hidden bg-slate-900 text-white text-sm px-3 py-2 rounded-lg whitespace-nowrap z-10;
}

.tooltip-show {
    @apply block;
}

/* Breakpoint specific utilities */
@media (max-width: 640px) {
    .sm-hide {
        @apply hidden;
    }
}

@media (min-width: 768px) {
    .md-show {
        @apply block;
    }
}

/* Print Styles */
@media print {
    .no-print {
        @apply hidden;
    }
}

/* Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Custom Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeInUp {
    animation: fadeInUp 0.5s ease-out;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-slideInRight {
    animation: slideInRight 0.5s ease-out;
}

/* Responsive Grid */
.responsive-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
}

.responsive-grid-2 {
    @apply grid grid-cols-1 md:grid-cols-2 gap-6;
}