/* Developer Account Page Styles */

/* Card styling */
.account-card {
    @apply bg-white rounded-xl shadow-md overflow-hidden border border-gray-100 transition-all duration-300;
}
.account-card:hover {
    @apply shadow-lg border-gray-200;
}

/* Section headers */
.section-header {
    @apply flex items-center space-x-2 mb-4 pb-2 border-b border-gray-100;
}
.section-header h3 {
    @apply text-xl font-bold text-gray-800;
}
.section-header svg {
    @apply w-5 h-5 text-green-500;
}

/* Tab styling */
.tab-container {
    @apply flex border-b border-gray-200 mb-6;
}
.tab {
    @apply px-4 py-2 text-sm font-medium text-gray-500 border-b-2 border-transparent cursor-pointer;
}
.tab:hover {
    @apply text-gray-700 border-gray-300;
}
.tab.active {
    @apply text-green-600 border-green-500;
}

/* Avatar container */
.avatar-container {
    @apply relative mx-auto w-24 h-24 rounded-full overflow-hidden border-4 border-white shadow-md mb-4;
}
.avatar-overlay {
    @apply absolute inset-0 bg-black bg-opacity-0 flex items-center justify-center transition-all duration-300;
}
.avatar-overlay:hover {
    @apply bg-opacity-50;
}
.avatar-overlay-text {
    @apply text-white opacity-0 transition-opacity duration-300 text-sm font-medium;
}
.avatar-overlay:hover .avatar-overlay-text {
    @apply opacity-100;
}

/* Stats card */
.stat-card {
    @apply bg-white rounded-lg shadow-sm p-4 border border-gray-100 transition-all duration-300;
}
.stat-card:hover {
    @apply shadow-md border-gray-200 transform -translate-y-1;
}
.stat-value {
    @apply text-2xl font-bold text-gray-800;
}
.stat-label {
    @apply text-sm text-gray-500;
}

/* Form improvements */
.form-input {
    @apply rounded-lg border-gray-300 focus:ring-green-500 focus:border-green-500 transition-all duration-300;
}
.form-input:focus {
    @apply shadow-sm;
}
.form-label {
    @apply text-sm font-medium text-gray-700 mb-1;
}
.form-hint {
    @apply mt-1 text-xs text-gray-500;
}

/* Button styling */
.btn-primary {
    @apply inline-flex items-center justify-center px-5 py-2.5 bg-gradient-to-r from-green-500 to-green-600 text-white text-sm font-semibold rounded-lg transition-all duration-300 shadow-sm border border-green-600;
}
.btn-primary:hover {
    @apply from-green-600 to-green-700 shadow-md transform -translate-y-0.5 border-green-700;
}
.btn-primary:focus {
    @apply outline-none ring-2 ring-green-500 ring-offset-2;
}
.btn-primary:active {
    @apply from-green-700 to-green-800 transform translate-y-0 shadow-inner;
}

.btn-secondary {
    @apply inline-flex items-center justify-center px-5 py-2.5 bg-white text-gray-700 text-sm font-semibold rounded-lg border border-gray-300 transition-all duration-300 shadow-sm;
}
.btn-secondary:hover {
    @apply bg-gray-50 shadow-md transform -translate-y-0.5 border-gray-400 text-gray-800;
}
.btn-secondary:focus {
    @apply outline-none ring-2 ring-gray-300 ring-offset-2;
}
.btn-secondary:active {
    @apply bg-gray-100 transform translate-y-0 shadow-inner;
}

/* Button sizes */
.btn-lg {
    @apply px-6 py-3 text-base;
}
.btn-sm {
    @apply px-3 py-1.5 text-xs;
}

/* Button variants */
.btn-success {
    @apply bg-gradient-to-r from-green-500 to-green-600 text-white border-green-600;
}
.btn-success:hover {
    @apply from-green-600 to-green-700 border-green-700;
}
.btn-success:focus {
    @apply ring-green-500;
}

.btn-info {
    @apply bg-gradient-to-r from-blue-500 to-blue-600 text-white border-blue-600;
}
.btn-info:hover {
    @apply from-blue-600 to-blue-700 border-blue-700;
}
.btn-info:focus {
    @apply ring-blue-500;
}

/* Button with icon */
.btn-icon {
    @apply relative pl-10;
}
.btn-icon svg {
    @apply absolute left-3 top-1/2 transform -translate-y-1/2;
}

/* Info table styling */
.info-table {
    @apply w-full divide-y divide-gray-200 rounded-lg overflow-hidden border border-gray-200;
}
.info-row {
    @apply transition-colors duration-200;
}
.info-row:nth-child(odd) {
    @apply bg-gray-50;
}
.info-row:hover {
    @apply bg-gray-100;
}
.info-label {
    @apply px-4 py-3 text-sm font-medium text-gray-500;
}
.info-value {
    @apply px-4 py-3 text-sm text-gray-900;
}

/* Badge styling */
.badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}
.badge-success {
    @apply bg-green-100 text-green-800;
}
.badge-warning {
    @apply bg-yellow-100 text-yellow-800;
}
.badge-danger {
    @apply bg-red-100 text-red-800;
}
.badge-info {
    @apply bg-blue-100 text-blue-800;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.animate-fade-in {
    animation: fadeIn 0.5s ease-in-out;
}