/* Custom Blue Theme with Batik Korpri Background */

/* Override Tailwind purple classes with blue */
.text-purple-600,
.text-purple-700,
.text-purple-900 {
    color: #2563eb !important;
    /* Blue-600 */
}

.hover\:text-purple-600:hover,
.hover\:text-purple-700:hover {
    color: #1e40af !important;
    /* Blue-700 */
}

.bg-purple-600,
.bg-purple-700 {
    background-color: #2563eb !important;
    /* Blue-600 */
}

.hover\:bg-purple-600:hover,
.hover\:bg-purple-700:hover {
    background-color: #1e40af !important;
    /* Blue-700 */
}

.border-purple-500,
.border-purple-600 {
    border-color: #3b82f6 !important;
    /* Blue-500 */
}

.ring-purple-500 {
    --tw-ring-color: #3b82f6 !important;
    /* Blue-500 */
}

.focus\:border-purple-500:focus,
.focus\:ring-purple-500:focus {
    border-color: #3b82f6 !important;
    --tw-ring-color: #3b82f6 !important;
}

.from-purple-600,
.from-purple-50 {
    --tw-gradient-from: #3b82f6 !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(59, 130, 246, 0)) !important;
}

.to-pink-600,
.to-pink-500 {
    --tw-gradient-to: #60a5fa !important;
    /* Blue-400 */
}

.bg-purple-50 {
    background-color: #eff6ff !important;
    /* Blue-50 */
}

.bg-purple-100 {
    background-color: #dbeafe !important;
    /* Blue-100 */
}

.hover\:border-purple-500:hover,
.hover\:bg-purple-50:hover {
    border-color: #3b82f6 !important;
    background-color: #eff6ff !important;
}

/* Card with glass effect */
.card-glass {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(30, 64, 175, 0.15);
}

/* Custom blue gradient backgrounds */
.gradient-blue {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #60a5fa 100%);
}

/* Smooth transitions */
* {
    transition-duration: 200ms;
}

/* Button hover effects */
button,
.btn {
    transition: all 0.3s ease;
}

button:hover,
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.3);
}

/* Input focus effects */
input:focus,
textarea:focus,
select:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Professional look - reduce rounded corners slightly */
.rounded-2xl {
    border-radius: 1rem !important;
}

.rounded-xl {
    border-radius: 0.75rem !important;
}

/* Better spacing for cards */
.card-shadow {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Professional colors for badges */
.badge-success {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    color: white;
    padding: 0.25rem 1rem;
    border-radius: 9999px;
    font-weight: 600;
}

.badge-primary {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    color: white;
    padding: 0.25rem 1rem;
    border-radius: 9999px;
    font-weight: 600;
}

/* Text with blue gradient */
.text-gradient-blue {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Border color overrides */
.border-purple-200 {
    border-color: #bfdbfe !important;
    /* Blue-200 */
}

.border-l-4.border-purple-500 {
    border-left-color: #3b82f6 !important;
}

/* Additional color fixes */
.text-purple-800 {
    color: #1e40af !important;
}

.bg-yellow-400 {
    background-color: #fbbf24 !important;
}

/* Ensure batik pattern visibility in specific areas */
.pattern-overlay {
    position: relative;
}

.pattern-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../img/Batik-korpri-terbaru.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.05;
    z-index: -1;
    pointer-events: none;
}
/* Horizontal Scroll - Hide Scrollbar */
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;  /* Chrome, Safari and Opera */
}

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

/* Smooth scroll behavior */
.overflow-x-auto {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Card hover effect enhancement for horizontal cards */
.hover-scale {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-scale:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(30, 64, 175, 0.2);
}