/* Additional utility classes */
.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Header responsive styles */
@media (max-width: 640px) {
    .header-container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    .header-title {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    
    .header-logo {
        width: 2rem;
        height: 2rem;
    }
    
    .header-user-info {
        min-width: 0;
        flex-shrink: 1;
    }
    
    .header-logout-btn {
        min-width: 2.5rem;
        padding: 0.5rem;
    }
}

/* Tablet responsive styles */
@media (min-width: 641px) and (max-width: 1024px) {
    .header-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .header-title {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
}

/* Ensure header doesn't overflow on very small screens */
@media (max-width: 480px) {
    .header-container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    .header-title {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
    
    .header-logo {
        width: 1.75rem;
        height: 1.75rem;
    }
    
    .header-logout-btn {
        min-width: 2rem;
        padding: 0.375rem;
    }
}

/* Form focus states */
.focus\:ring-purple-500:focus {
    --tw-ring-color: rgba(139, 92, 246, var(--tw-ring-opacity));
    --tw-ring-opacity: 0.5;
    box-shadow: 0 0 0 2px var(--tw-ring-color);
}

.focus\:border-purple-500:focus {
    border-color: #8B5CF6;
}

/* Hover states */
.hover\:opacity-90:hover {
    opacity: 0.9;
}

.hover\:text-gray-200:hover {
    color: #E5E7EB;
}

.hover\:text-purple-500:hover {
    color: #8B5CF6;
}

/* Alert animations */
.animate-fade-in-down {
    animation: fadeInDown 0.3s ease-out;
}

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

/* Alert positions */
.fixed {
    position: fixed;
}

.top-4 {
    top: 1rem;
}

.right-4 {
    right: 1rem;
}

.z-50 {
    z-index: 50;
}

/* Alert colors */
.bg-green-50 {
    background-color: #F0FDF4;
}

.bg-red-50 {
    background-color: #FEF2F2;
}

.border-green-400 {
    border-color: #34D399;
}

.border-red-400 {
    border-color: #F87171;
}
.text-gray-50 {
    color:#6b7280;
}

.text-green-400 {
    color: #34D399;
}
.text-orange-500 {
    color: #F59E0B;
}

.text-red-400 {
    color: #F87171;
}

.text-green-700 {
    color: #047857;
}

.text-red-700 {
    color: #B91C1C;
}

/* Alert hover states */
.hover\:text-green-500:hover {
    color: #10B981;
}

.hover\:text-red-500:hover {
    color: #EF4444;
}
body {
    font-family: 'Noto Sans JP', sans-serif;
}
.gradient-bg {
    background:  #183ae0;
}
.card-shadow {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.hover-scale {
    transition: transform 0.2s ease-in-out;
}
.hover-scale:hover {
    transform: scale(1.02);
}
.synergy-bar {
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
}
.notification-dot {
    animation: pulse 2s infinite;
}

@media (min-width: 768px) {
    .sidebar-fixed {
        width: 256px !important;
        min-width: 256px !important;
        max-width: 256px !important;
        flex-shrink: 0 !important;
    }
}

/* Prevent horizontal scrolling issues */
.main-content {
    min-width: 0;
    width: calc(100% - 256px);
}

@media (max-width: 767px) {
    .main-content {
        width: 100%;
    }
}


.card-shadow {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.hover-scale {
    transition: transform 0.2s ease-in-out;
}
.hover-scale:hover {
    transform: scale(1.02);
}
.notification-dot {
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.form-section {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    transition: border-color 0.2s ease;
}
.form-section:hover {
    border-color:rgb(26, 71, 219);
}