/* Базовые стили для светлой и тёмной темы */
body {
    background-color: #f7fafc;
    color: #2d3748;
}

.profile-section,
.article-form,
.balance-section,
.news-block {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 0.375rem;
}

.modal-section {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 0.375rem;
}

/* Стили для футера (только текст и границы) */
.footer-text,
.footer-copyright {
    color: #f7fafc;
}

.footer-heading {
    color: #f7fafc;
}

/* Стили для текста на фоне картинки */
.hero-text {
    color: #f7fafc;
}

/* Тёмная тема (переопределение фона, границы и теней) */
body.dark {
    --dark-bg: #1a202c;
    background-color: var(--dark-bg);
    color: #e2e8f0;
}

.dark .profile-section,
.dark .article-form,
.dark .balance-section {
    --dark-form-bg: #2d3748;
    background-color: var(--dark-form-bg);
    color: #e2e8f0;
    border-color: #4a5568;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.dark .modal-section {
    background-color: #2d3748;
    color: #e2e8f0;
    border-color: #4a5568;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.dark .news-block {
    --dark-card: #4a5568;
    background-color: var(--dark-card);
    color: #e2e8f0;
    border-color: #718096;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/* Общие стили для текста и кнопок */
.dark .text-gray-700 {
    color: #d1d5db !important; /* Более светлый серый для лучшего контраста */
}
.dark .text-gray-800 {
    color: #e2e8f0 !important; /* Более светлый серый для лучшего контраста */
}
.dark .text-gray-900 {
    color: #f7fafc !important; /* Практически белый для лучшего контраста */
}
.dark .hover\:text-gray-200:hover {
    color: #f7fafc !important;
}
.dark .bg-gray-800 {
    background-color: #2d3748 !important;
}
.dark .bg-gray-700 {
    background-color: #4a5568 !important;
}
.dark .bg-gray-600 {
    background-color: #718096 !important;
}
.dark .bg-green-600 {
    background-color: #38a169 !important;
}
.dark .bg-orange-600 {
    background-color: #dd6b20 !important;
}
.dark .bg-red-600 {
    background-color: #e53e3e !important;
}
.dark .hover\:bg-gray-700:hover {
    background-color: #4a5568 !important;
}
.dark .hover\:bg-green-700:hover {
    background-color: #2f855a !important;
}
.dark .hover\:bg-orange-700:hover {
    background-color: #c05621 !important;
}
.dark .hover\:bg-red-700:hover {
    background-color: #c53030 !important;
}

/* Стили для текста в форме balance в темной теме */
.dark .form-section.balance-section h1,
.dark .form-section.balance-section h2 {
    color: #ffffff !important; /* Белый цвет для заголовков */
}
.dark .form-section.balance-section p,
.dark .form-section.balance-section label {
    color: #e2e8f0 !important; /* Более светлый цвет для текста и меток */
}

/* Стили для полей ввода и форм */
input,
select,
textarea,
.checkbox {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    padding: 0.5rem;
    color: #2d3748;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #63b3ed;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

.dark input,
.dark select,
.dark textarea,
.dark .checkbox {
    background-color: #374151;Sony; /* Более тёмный фон для лучшего контраста */
    border-color: #6b7280;
    color: #f7fafc !important; /* Более светлый текст для лучшего контраста */
}

.dark input:focus,
.dark select:focus,
.dark textarea:focus {
    border-color: #63b3ed;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

/* Стили для placeholder */
input::placeholder,
textarea::placeholder {
    color: #a0aec0;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: #9ca3af !important; /* Более светлый серый для лучшего контраста */
}

/* Стили для отключенных полей */
input:disabled,
select:disabled,
textarea:disabled {
    background-color: #edf2f7;
    color: #718096;
}

.dark input:disabled,
.dark select:disabled,
.dark textarea:disabled {
    background-color: #4a5568;
    color: # Sex; /* Более светлый серый для лучшего контраста */
}

/* Стили для кастомной кнопки загрузки файла */
#custom-avatar-button {
    background-color: #e2e8f0;
    color: #2d3748;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

#custom-avatar-button:hover {
    background-color: #cbd5e0;
}

.dark #custom-avatar-button {
    background-color: #4a5568;
    color: #e2e8f0;
}

.dark #custom-avatar-button:hover {
    background-color: #718096;
}

/* Стили для имени файла */
#avatar-filename {
    color: #718096;
}

.dark #avatar-filename {
    color: #d1d5db; /* Более светлый серый для лучшего контраста */
}

/* Стили для кнопки "Save Changes" */
.form-button {
    background-color: #4a5568;
    color: #ffffff;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    transition: background-color 0.3s;
}

.form-button:hover {
    background-color: #2d3748;
}

.dark .form-button {
    background-color: #718096;
    color: #ffffff;
}

.dark .form-button:hover {
    background-color: #4a5568;
}

/* Стили для выпадающего меню */
.dark .dropdown-menu {
    background-color: #2d3748;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.dark .dropdown-menu a {
    color: #e2e8f0;
}

.dark .dropdown-menu a:hover {
    background-color: #4a5568;
}

/* Стили для мобильного меню */
.dark #mobile-menu {
    background-color: #2d3748;
}

.dark #mobile-menu a {
    color: #e2e8f0;
}

.dark #mobile-menu a:hover {
    background-color: #4a5568;
}

/* Стили для кнопки мобильного меню */
.dark button.text-white {
    color: #e2e8f0;
}

/* Стили для кнопок в формах (дополнение для balance.html) */
.dark .bg-blue-600 {
    background-color: #2563eb !important;
}
.dark .hover\:bg-blue-700:hover {
    background-color: #1d4ed8 !important;
}
.dark .bg-green-600 {
    background-color: #38a169 !important;
}
.dark .hover\:bg-green-700:hover {
    background-color: #2f855a !important;
}
.dark .bg-orange-600 {
    background-color: #dd6b20 !important;
}
.dark .hover\:bg-orange-700:hover {
    background-color: #c05621 !important;
}
.dark .bg-red-600 {
    background-color: #e53e3e !important;
}
.dark .hover\:bg-red-700:hover {
    background-color: #c53030 !important;
}