/* Dakshar Website - Professional Enterprise Design */

/* Grid Pattern Background */
.bg-grid-pattern {
    background-image: 
        linear-gradient(to right, rgba(255,255,255,0.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 40px 40px;
    /* Ensure pattern is visible */
    background-color: transparent;
}

/* ===== ANIMATIONS ===== */
@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

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

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(37, 99, 235, 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(37, 99, 235, 0.5);
    }
}

/* ===== BASE STYLES ===== */
html {
    scroll-behavior: smooth;
}

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

/* ===== FLASH MESSAGES ===== */
.flash-message {
    animation: slideDown 0.3s ease-out;
    @apply rounded-xl border-l-4;
}

/* ===== BUTTONS ===== */
.btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    /* Fallback solid color */
    background-color: #2563eb;
    @apply text-white px-4 py-2.5 sm:px-6 sm:py-3 rounded-xl font-bold shadow-lg hover:shadow-xl transition-all transform hover:scale-105 active:scale-95 text-sm sm:text-base;
    min-height: 44px; /* Touch-friendly minimum size */
    /* Ensure gradient is applied */
    background-image: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
    background-color: #1e40af;
    background-image: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
}

.btn-orange {
    background: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
    /* Fallback solid color */
    background-color: #f97316;
    @apply text-white px-4 py-2.5 sm:px-6 sm:py-3 rounded-xl font-bold shadow-lg hover:shadow-xl transition-all transform hover:scale-105 active:scale-95 text-sm sm:text-base;
    min-height: 44px; /* Touch-friendly minimum size */
    /* Ensure gradient is applied */
    background-image: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
}

.btn-orange:hover {
    background: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
    background-color: #ea580c;
    background-image: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
}

.btn-secondary {
    @apply bg-gray-100 text-gray-800 px-4 py-2.5 sm:px-6 sm:py-3 rounded-xl font-semibold hover:bg-gray-200 transition-all border-2 border-transparent hover:border-gray-300 text-sm sm:text-base;
    min-height: 44px;
}

.btn-outline {
    @apply border-2 border-blue-600 text-blue-600 px-4 py-2.5 sm:px-6 sm:py-3 rounded-xl font-semibold hover:bg-blue-50 transition-all text-sm sm:text-base;
    min-height: 44px;
}

.btn-white {
    background-color: #ffffff;
    background: #ffffff;
    @apply text-gray-900 px-4 py-2.5 sm:px-6 sm:py-3 rounded-xl font-bold shadow-lg hover:shadow-xl transition-all transform hover:scale-105 active:scale-95 text-sm sm:text-base;
    min-height: 44px;
    border: 2px solid transparent;
}

.btn-white:hover {
    background-color: #f9fafb;
    background: #f9fafb;
}

.btn-white-blue {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #2563eb !important;
    @apply px-4 py-2.5 sm:px-6 sm:py-3 rounded-xl font-bold shadow-lg hover:shadow-xl transition-all transform hover:scale-105 active:scale-95 text-sm sm:text-base;
    min-height: 44px;
    border: 2px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-white-blue:hover {
    background-color: #eff6ff !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

.btn-white-green {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #16a34a !important;
    @apply px-4 py-2.5 sm:px-6 sm:py-3 rounded-xl font-bold shadow-lg hover:shadow-xl transition-all transform hover:scale-105 active:scale-95 text-sm sm:text-base;
    min-height: 44px;
    border: 2px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-white-green:hover {
    background-color: #f0fdf4 !important;
    background: #f0fdf4 !important;
    color: #15803d !important;
}

/* ===== CARDS ===== */
.card {
    @apply bg-white rounded-xl sm:rounded-2xl shadow-dakshar p-4 sm:p-6 md:p-8 transition-all duration-300 hover:shadow-dakshar-lg;
}

.card-hover {
    @apply bg-white rounded-xl sm:rounded-2xl shadow-dakshar p-4 sm:p-6 md:p-8 transition-all duration-300 hover:shadow-dakshar-lg hover:-translate-y-2 cursor-pointer border border-gray-100;
}

.card-feature {
    @apply bg-white rounded-xl sm:rounded-2xl shadow-dakshar p-4 sm:p-6 md:p-8 transition-all duration-300 hover:shadow-dakshar-lg hover:-translate-y-2 border-l-4;
}

.stat-card {
    @apply bg-white rounded-xl sm:rounded-2xl shadow-dakshar p-4 sm:p-6 md:p-8 text-center transition-all duration-300 hover:shadow-dakshar-lg hover:-translate-y-1 border border-gray-100;
}

/* ===== FORMS ===== */
.form-input {
    @apply w-full px-4 py-3 sm:px-5 sm:py-3.5 border-2 border-gray-200 rounded-xl focus:outline-none focus:ring-4 focus:ring-blue-500/20 focus:border-blue-500 transition-all bg-white;
    font-size: 16px; /* Prevents zoom on iOS */
    min-height: 44px; /* Touch-friendly */
}

.form-input:focus {
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.form-label {
    @apply block text-sm font-bold text-gray-700 mb-2 sm:mb-3 tracking-wide;
}

.form-error {
    @apply text-red-600 text-xs sm:text-sm mt-2 font-medium flex items-center;
}

.form-error::before {
    content: "⚠ ";
    margin-right: 4px;
}

textarea.form-input {
    @apply resize-y;
    min-height: 120px;
    width: 100% !important;
    max-width: 100%;
    font-size: 16px; /* Prevents zoom on iOS */
}

textarea.form-input#description {
    min-height: 300px;
    font-size: 1rem;
    line-height: 1.5rem;
    padding: 1rem;
}

@media (min-width: 768px) {
    textarea.form-input#description {
        min-height: 500px;
        font-size: 1.125rem;
        line-height: 1.75rem;
        padding: 1.5rem;
    }
}

/* ===== TYPOGRAPHY ===== */
.gradient-text {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* Fallback for browsers that don't support background-clip */
    color: #2563eb;
}

/* Ensure gradient text is visible in all browsers */
@supports (-webkit-background-clip: text) or (background-clip: text) {
    .gradient-text {
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
}

.gradient-text-orange {
    background: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* Fallback for browsers that don't support background-clip */
    color: #f97316;
}

/* Ensure gradient text is visible in all browsers */
@supports (-webkit-background-clip: text) or (background-clip: text) {
    .gradient-text-orange {
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
}

.heading-1 {
    @apply text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-extrabold leading-tight;
}

.heading-2 {
    @apply text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold;
}

.heading-3 {
    @apply text-xl sm:text-2xl md:text-3xl font-bold;
}

/* ===== LAYOUT ===== */
.section-padding {
    @apply py-12 sm:py-16 md:py-20 lg:py-28 xl:py-32;
}

.container-custom {
    @apply container mx-auto px-4 sm:px-5 md:px-6 lg:px-8 max-w-7xl;
}

.page-header {
    @apply section-padding bg-gradient-to-br from-blue-50 via-white to-orange-50;
    /* Fallback solid color */
    background-color: #f8fafc;
    /* Ensure gradient is visible and doesn't fade */
    background-image: linear-gradient(to bottom right, #dbeafe 0%, #ffffff 50%, #fed7aa 100%);
    background-attachment: fixed;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.page-content {
    @apply section-padding bg-white;
}

/* ===== BADGES & TAGS ===== */
.badge {
    @apply inline-flex items-center px-3 py-1.5 rounded-full text-xs font-semibold;
}

.badge-blue {
    @apply bg-blue-100 text-blue-800;
}

.badge-orange {
    @apply bg-orange-100 text-orange-800;
}

.badge-green {
    @apply bg-green-100 text-green-800;
}

.badge-gray {
    @apply bg-gray-100 text-gray-800;
}

/* ===== STATUS INDICATORS ===== */
.status-badge {
    @apply inline-flex items-center px-3 py-1.5 rounded-full text-xs font-semibold;
}

.status-pending {
    @apply bg-yellow-100 text-yellow-800 border border-yellow-200;
}

.status-in-progress {
    @apply bg-blue-100 text-blue-800 border border-blue-200;
}

.status-completed {
    @apply bg-green-100 text-green-800 border border-green-200;
}

.status-cancelled {
    @apply bg-red-100 text-red-800 border border-red-200;
}

.status-info {
    @apply bg-blue-100 text-blue-800 border border-blue-200;
}

/* Idea Status Badges */
.status-open {
    @apply bg-blue-100 text-blue-800 border border-blue-200;
}

.status-under-review {
    @apply bg-yellow-100 text-yellow-800 border border-yellow-200;
}

.status-approved {
    @apply bg-green-100 text-green-800 border border-green-200;
}

.status-rejected {
    @apply bg-red-100 text-red-800 border border-red-200;
}

.status-implemented {
    @apply bg-purple-100 text-purple-800 border border-purple-200;
}

/* Startup/Student Status Badges */
.status-reviewed {
    @apply bg-blue-100 text-blue-800 border border-blue-200;
}

.status-converted {
    @apply bg-green-100 text-green-800 border border-green-200;
}

/* ===== ANIMATIONS ===== */
.animate-count {
    animation: countUp 0.6s ease-out;
}

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

.animate-slide-up {
    animation: slideUp 0.6s ease-out;
}

/* ===== UTILITIES ===== */
.text-balance {
    text-wrap: balance;
}

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

.glass-effect {
    @apply bg-white/80 backdrop-blur-lg border border-white/20;
    /* Fallback for browsers without backdrop-blur support */
    background-color: rgba(255, 255, 255, 0.9);
}

/* Ensure backdrop-blur has fallback */
@supports not (backdrop-filter: blur(12px)) {
    .backdrop-blur-sm,
    .backdrop-blur-lg {
        background-color: rgba(255, 255, 255, 0.9);
    }
}

/* Fix for semi-transparent backgrounds */
.bg-white\/20 {
    background-color: rgba(255, 255, 255, 0.2);
}

.bg-white\/10 {
    background-color: rgba(255, 255, 255, 0.1);
}

.bg-white\/30 {
    background-color: rgba(255, 255, 255, 0.3);
}

/* Ensure gradients don't fade incorrectly */
.bg-gradient-to-br,
.bg-gradient-to-r,
.bg-gradient-to-b {
    background-attachment: fixed;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* Fix gradient backgrounds to prevent fading on scroll */
section[class*="bg-gradient"] {
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Ensure all gradient sections have fallback colors */
.bg-gradient-to-br.from-purple-600,
.bg-gradient-to-br.from-blue-600,
.bg-gradient-to-br.from-green-600 {
    /* Fallback solid colors */
}

.bg-gradient-to-br.from-purple-600 {
    background-color: #9333ea; /* purple-600 fallback */
}

.bg-gradient-to-br.from-blue-600 {
    background-color: #2563eb; /* blue-600 fallback */
}

.bg-gradient-to-br.from-green-600 {
    background-color: #16a34a; /* green-600 fallback */
}

/* Ensure consistent button colors across all pages */
a[class*="btn-"],
button[class*="btn-"] {
    transition: all 0.3s ease;
}

/* Fix for inline button styles that might override classes */
a.bg-orange-500,
button.bg-orange-500 {
    background-color: #f97316 !important;
    background: linear-gradient(135deg, #f97316 0%, #fb923c 100%) !important;
}

a.bg-orange-500:hover,
button.bg-orange-500:hover {
    background-color: #ea580c !important;
    background: linear-gradient(135deg, #ea580c 0%, #f97316 100%) !important;
}

a.bg-blue-600,
button.bg-blue-600 {
    background-color: #2563eb !important;
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%) !important;
}

a.bg-blue-600:hover,
button.bg-blue-600:hover {
    background-color: #1e40af !important;
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%) !important;
}

/* Fix for text color on gradients */
.text-green-100,
.text-blue-100,
.text-purple-100 {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.hover-lift {
    @apply transition-transform duration-300 hover:-translate-y-1;
}

/* ===== LOADING STATES ===== */
.loading {
    @apply opacity-50 pointer-events-none;
}

.skeleton {
    @apply animate-pulse bg-gray-200 rounded;
}

/* ===== ACCESSIBILITY ===== */
*:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ===== RESPONSIVE UTILITIES ===== */

/* Mobile-first responsive images */
img {
    max-width: 100%;
    height: auto;
}

/* Core Web Vitals Optimizations */

/* LCP (Largest Contentful Paint) Optimization */
img[loading="lazy"] {
    content-visibility: auto;
}

/* Prevent layout shift for images */
img {
    aspect-ratio: attr(width) / attr(height);
}

/* CLS (Cumulative Layout Shift) Prevention */
/* Reserve space for dynamic content */
.reserve-space {
    min-height: 200px;
}

/* FID (First Input Delay) Optimization */
/* Ensure interactive elements are ready */
button, a, input, select, textarea {
    touch-action: manipulation;
}

/* Font loading optimization */
@font-face {
    font-display: swap;
}

/* Critical CSS inline for above-the-fold content */
/* Reduce render-blocking resources */

/* Image lazy loading styles */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

/* Preload critical resources */
.preload-critical {
    font-display: swap;
}

/* Responsive tables */
.table-responsive {
    @apply overflow-x-auto -mx-4 sm:mx-0;
}

.table-responsive table {
    @apply min-w-full;
}

/* Touch-friendly interactive elements */
@media (max-width: 768px) {
    a, button {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Better spacing on mobile */
    .container-custom {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Improved card spacing */
    .card, .card-hover, .card-feature, .stat-card {
        margin-bottom: 1rem;
    }
    
    /* Better form spacing */
    form > * + * {
        margin-top: 1rem;
    }
}

/* Tablet optimizations */
@media (min-width: 640px) and (max-width: 1024px) {
    .container-custom {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* Prevent text size adjustment on iOS */
@media screen and (max-width: 768px) {
    html {
        -webkit-text-size-adjust: 100%;
    }
    
    input, textarea, select {
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
}

/* Improved mobile typography */
@media (max-width: 640px) {
    body {
        font-size: 16px;
        line-height: 1.6;
    }
    
    h1, h2, h3, h4, h5, h6 {
        line-height: 1.2;
    }
    
    p {
        margin-bottom: 1rem;
    }
}

/* Grid improvements for mobile */
@media (max-width: 640px) {
    .grid {
        gap: 1rem;
    }
}

/* Better button spacing on mobile */
@media (max-width: 640px) {
    .flex.gap-3 > *,
    .flex.gap-4 > * {
        margin: 0.25rem;
    }
}