/* Тёмная тема */

/* ===== Базовые стили ===== */
html.dark body {
    background-color: #0f172a;
    color: #e2e8f0;
}

html.dark .bg-white {
    background-color: #243043  !important;
}

html.dark .bg-gray-50,
html.dark .bg-slate-50 {
    background-color: #1e293b !important;
}

html.dark .bg-gray-100,
html.dark .bg-slate-100 {
    background-color: #334155 !important;
}

html.dark .bg-gray-200,
html.dark .bg-slate-200 {
    background-color: #475569 !important;
}

html.dark .bg-slate-800 {
    background-color: #243043  !important;
}

html.dark .bg-slate-900 {
    background-color: #0f172a !important;
}

/* ===== Brand цвета ===== */
html.dark .bg-brand-50 {
    background-color: rgba(190, 24, 93, 0.1) !important;
}

html.dark .bg-brand-100 {
    background-color: #F9C0C0 !important;
}

html.dark .bg-brand-300 {
    background-color: #ff9a9a !important;
}

html.dark .bg-brand-400 {
    background-color: #f16b6b !important;
}

html.dark .bg-brand-500 {
    background-color: #ee5d5d !important;
}

html.dark .bg-brand-600 {
    background-color: #f54747 !important;
}

html.dark .bg-brand-700 {
    background-color: #e32d2d !important;
}

html.dark .bg-brand-800 {
    background-color: #D33052 !important;
}

html.dark .bg-brand-900 {
    background-color: #CE0202 !important;
}

html.dark .bg-brand-900\/30 {
    background-color: rgba(206, 2, 2, 0.3) !important;
}

html.dark .text-brand-700 {
    color: #fca5a5 !important;
}

html.dark .text-brand-300 {
    color: #ff9a9a !important;
}

html.dark .text-brand-400 {
    color: #f16b6b !important;
}

html.dark .text-brand-500 {
    color: #ee5d5d !important;
}

html.dark .text-brand-600 {
    color: #f54747 !important;
}

html.dark .text-brand-900 {
    color: #CE0202 !important;
}

html.dark .border-brand-100 {
    border-color: #F9C0C0 !important;
}

html.dark .border-brand-400 {
    border-color: #f16b6b !important;
}

html.dark .border-brand-500 {
    border-color: #ee5d5d !important;
}

html.dark .border-brand-700 {
    border-color: #e32d2d !important;
}

html.dark .border-brand-800 {
    border-color: #D33052 !important;
}

html.dark .ring-brand-700 {
    --tw-ring-color: #e32d2d !important;
}

html.dark .ring-brand-100 {
    --tw-ring-color: #F9C0C0 !important;
}

/* ===== Текст ===== */
html.dark .text-gray-900,
html.dark .text-slate-900 {
    color: #f8fafc !important;
}

html.dark .text-gray-800,
html.dark .text-slate-800 {
    color: #f1f5f9 !important;
}

html.dark .text-gray-700,
html.dark .text-slate-700 {
    color: #cbd5e1 !important;
}

html.dark .text-gray-600,
html.dark .text-slate-600 {
    color: #94a3b8 !important;
}

html.dark .text-gray-500,
html.dark .text-slate-500 {
    color: #64748b !important;
}

html.dark .text-gray-400,
html.dark .text-slate-400 {
    color: #475569 !important;
}

html.dark .text-gray-300,
html.dark .text-slate-300 {
    color: #cbd5e1 !important;
}

html.dark .text-gray-200,
html.dark .text-slate-200 {
    color: #e2e8f0 !important;
}

html.dark .text-gray-100,
html.dark .text-slate-100 {
    color: #f1f5f9 !important;
}

/* ===== Границы ===== */
html.dark .border-gray-200,
html.dark .border-slate-200 {
    border-color: #334155 !important;
}

html.dark .border-gray-300,
html.dark .border-slate-300 {
    border-color: #475569 !important;
}

html.dark .border-gray-100,
html.dark .border-slate-100 {
    border-color: #334155 !important;
}

html.dark .border-gray-700,
html.dark .border-slate-700 {
    border-color: #475569 !important;
}

html.dark .border-gray-600,
html.dark .border-slate-600 {
    border-color: #475569 !important;
}

html.dark .bg-slate-700 {
    background-color: #334155 !important;
}

html.dark .divide-gray-200 > * + *,
html.dark .divide-slate-200 > * + * {
    border-color: #334155 !important;
}

html.dark .divide-gray-100 > * + *,
html.dark .divide-slate-100 > * + * {
    border-color: #334155 !important;
}

html.dark .divide-gray-700 > * + *,
html.dark .divide-slate-700 > * + * {
    border-color: #475569 !important;
}

/* ===== Карточки статистики ===== */
html.dark .stat-card {
    background-color: #1e293b;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

html.dark .stat-card-label {
    color: #94a3b8;
}

html.dark .stat-card-value {
    color: #f8fafc;
}

html.dark .stat-card-icon {
    background-color: #334155;
}

/* ===== Таблицы ===== */
html.dark .table-container {
    background-color: #1e293b;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

html.dark .table thead {
    background-color: #0f172a;
    border-color: #334155;
}

html.dark .table th {
    color: #94a3b8;
}

html.dark .table td {
    color: #e2e8f0;
    border-color: #334155;
}

html.dark .table tbody tr:hover {
    background-color: #0f172a;
}

html.dark .table tbody tr:nth-child(even) {
    background-color: #1e293b;
}

html.dark .table tbody tr:nth-child(even):hover {
    background-color: #0f172a;
}

/* ===== Фильтры и блоки ===== */
html.dark .shadow {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}

html.dark .shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
}

html.dark .shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}

html.dark .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3) !important;
}

html.dark .shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3) !important;
}

html.dark .shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4) !important;
}

html.dark .shadow-inner {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3) !important;
}

html.dark .shadow-none {
    box-shadow: none !important;
}

html.dark .rounded-lg {
    border-color: #334155;
}

/* ===== Кнопки ===== */
html.dark .btn-secondary {
    background-color: #334155;
    color: #f1f5f9;
}

html.dark .btn-secondary:hover {
    background-color: #475569;
}

html.dark .btn-outline {
    border-color: #475569;
    color: #cbd5e1;
}

html.dark .btn-outline:hover {
    background-color: #334155;
}

html.dark .btn-icon {
    color: #94a3b8;
}

html.dark .btn-icon:hover {
    background-color: #334155;
    color: #f1f5f9;
}

/* ===== Навигация ===== */
html.dark .nav-link {
    color: #cbd5e1;
}

html.dark .nav-link:hover {
    color: #f87171;
}

html.dark .mobile-link {
    color: #cbd5e1;
}

html.dark .mobile-link:hover {
    color: #f87171;
    background-color: #1e293b;
}

/* ===== Dropdown ===== */
html.dark .dropdown-menu {
    background-color: #1e293b;
    border-color: #334155;
}

html.dark .dropdown-item {
    color: #cbd5e1;
}

html.dark .dropdown-item:hover {
    background-color: #334155;
}

/* ===== Формы ===== */
html.dark .form-input,
html.dark .form-select,
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="number"],
html.dark input[type="tel"],
html.dark input[type="url"],
html.dark textarea {
    background-color: #0f172a;
    border-color: #334155;
    color: #f8fafc;
}

html.dark .form-input:focus,
html.dark .form-select:focus,
html.dark input[type="text"]:focus,
html.dark input[type="email"]:focus,
html.dark input[type="password"]:focus,
html.dark input[type="number"]:focus,
html.dark input[type="tel"]:focus,
html.dark input[type="url"]:focus,
html.dark textarea:focus {
    border-color: #f87171;
    outline: 2px solid rgba(248, 113, 113, 0.2);
}

html.dark .form-input::placeholder,
html.dark textarea::placeholder {
    color: #64748b;
}

/* ===== Date Input ===== */
html.dark input[type="date"],
html.dark input[type="datetime-local"] {
    background-color: #0f172a;
    border-color: #334155;
    color: #f8fafc;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
}

html.dark input[type="date"]:focus,
html.dark input[type="datetime-local"]:focus {
    border-color: #f87171;
    outline: 2px solid rgba(248, 113, 113, 0.2);
}

/* ===== Checkbox ===== */

/* Скрываем стандартный checkbox */
html.dark input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #475569;
    border-radius: 0.25rem;
    background-color: #0f172a;
    cursor: pointer;
    transition: all 0.2s;
    vertical-align: middle;
    margin: 0;
}

/* Hover эффект */
html.dark input[type="checkbox"]:hover {
    border-color: #64748b;
}

/* Checked состояние */
html.dark input[type="checkbox"]:checked {
    background-color: #f87171;
    border-color: #f87171;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    background-size: 70%;
    background-position: center;
    background-repeat: no-repeat;
}

/* Focus состояние */
html.dark input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.3);
    border-color: #f87171;
}

/* Disabled состояние */
html.dark input[type="checkbox"]:disabled {
    background-color: #1e293b;
    border-color: #334155;
    cursor: not-allowed;
    opacity: 0.5;
}

/* Checkbox с индентом для label */
html.dark input[type="checkbox"] + label {
    cursor: pointer;
}

/* ===== Select ===== */

html.dark select {
    appearance: none;
    -webkit-appearance: none;
    background-color: #0f172a;
    border-color: #334155;
    color: #f8fafc;
    padding: 0.5rem 2.5rem 0.5rem 0.75rem;
    border-radius: 0.375rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    cursor: pointer;
    transition: all 0.2s;
}

html.dark select:hover {
    border-color: #475569;
}

html.dark select:focus {
    border-color: #f87171;
    outline: none;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.3);
}

html.dark select:disabled {
    background-color: #1e293b;
    border-color: #334155;
    color: #64748b;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Options в select */
html.dark select option {
    background-color: #1e293b;
    color: #f8fafc;
    padding: 0.5rem;
}

html.dark select option:hover {
    background-color: #334155;
}

html.dark select option:checked {
    background-color: #475569;
    color: #f8fafc;
    font-weight: 500;
}

/* ===== Checkbox - Светлая тема ===== */

:not(.dark) input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #d1d5db;
    border-radius: 0.25rem;
    background-color: #ffffff;
    cursor: pointer;
    transition: all 0.2s;
    vertical-align: middle;
    margin: 0;
}

:not(.dark) input[type="checkbox"]:hover {
    border-color: #9ca3af;
}

:not(.dark) input[type="checkbox"]:checked {
    background-color: #ee5d5d;
    border-color: #ee5d5d;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    background-size: 70%;
    background-position: center;
    background-repeat: no-repeat;
}

:not(.dark) input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(238, 93, 93, 0.2);
    border-color: #ee5d5d;
}

:not(.dark) input[type="checkbox"]:disabled {
    background-color: #f3f4f6;
    border-color: #d1d5db;
    cursor: not-allowed;
    opacity: 0.5;
}

/* ===== Select - Светлая тема ===== */

:not(.dark) select {
    appearance: none;
    -webkit-appearance: none;
    background-color: #ffffff;
    border-color: #d1d5db;
    color: #1f2937;
    padding: 0.5rem 2.5rem 0.5rem 0.75rem;
    border-radius: 0.375rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    cursor: pointer;
    transition: all 0.2s;
}

:not(.dark) select:hover {
    border-color: #9ca3af;
}

:not(.dark) select:focus {
    border-color: #ee5d5d;
    outline: none;
    box-shadow: 0 0 0 3px rgba(238, 93, 93, 0.2);
}

:not(.dark) select:disabled {
    background-color: #f3f4f6;
    border-color: #e5e7eb;
    color: #6b7280;
    cursor: not-allowed;
}

:not(.dark) select option {
    background-color: #ffffff;
    color: #1f2937;
    padding: 0.5rem;
}

:not(.dark) select option:hover {
    background-color: #f9fafb;
}

:not(.dark) select option:checked {
    background-color: #fef2f2;
    color: #1f2937;
    font-weight: 500;
}

/* ===== Календарь при выборе даты - Темная тема ===== */

/* Основной контейнер календаря (Chrome, Safari, Edge) */
html.dark ::-webkit-calendar-picker {
    background-color: #1e293b;
}

/* Шапка календаря (месяц/год) */
html.dark ::-webkit-datetime-edit-month-field,
html.dark ::-webkit-datetime-edit-year-field,
html.dark ::-webkit-datetime-edit-day-field {
    color: #f8fafc;
    background: transparent;
    padding: 2px;
}

/* Подсветка при наведении на поля даты */
html.dark ::-webkit-datetime-edit-month-field:hover,
html.dark ::-webkit-datetime-edit-year-field:hover,
html.dark ::-webkit-datetime-edit-day-field:hover {
    background-color: #334155;
    border-radius: 3px;
}

/* Выделенное поле */
html.dark ::-webkit-datetime-edit-month-field:focus,
html.dark ::-webkit-datetime-edit-year-field:focus,
html.dark ::-webkit-datetime-edit-day-field:focus {
    background-color: #475569;
    border-radius: 3px;
    color: #f8fafc;
}

/* Разделители (двоеточие для времени) */
html.dark ::-webkit-datetime-edit-text {
    color: #94a3b8;
    padding: 0 2px;
}

/* Поле ввода времени (часы/минуты) */
html.dark ::-webkit-datetime-edit-hour-field,
html.dark ::-webkit-datetime-edit-minute-field,
html.dark ::-webkit-datetime-edit-second-field {
    color: #f8fafc;
    background: transparent;
    padding: 2px;
}

html.dark ::-webkit-datetime-edit-hour-field:hover,
html.dark ::-webkit-datetime-edit-minute-field:hover {
    background-color: #334155;
    border-radius: 3px;
}

/* Стрелочки вверх/вниз для изменения значений */
html.dark ::-webkit-inner-spin-button,
html.dark ::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Календарь в Firefox */
html.dark input[type="date"]::-moz-calendar-popup,
html.dark input[type="datetime-local"]::-moz-calendar-popup {
    background-color: #1e293b;
    color: #f8fafc;
    border: 1px solid #334155;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

/* ===== Календарь при выборе даты - Светлая тема ===== */

:not(.dark) ::-webkit-datetime-edit-month-field,
:not(.dark) ::-webkit-datetime-edit-year-field,
:not(.dark) ::-webkit-datetime-edit-day-field {
    color: #1f2937;
    background: transparent;
    padding: 2px;
}

:not(.dark) ::-webkit-datetime-edit-month-field:hover,
:not(.dark) ::-webkit-datetime-edit-year-field:hover,
:not(.dark) ::-webkit-datetime-edit-day-field:hover {
    background-color: #f3f4f6;
    border-radius: 3px;
}

:not(.dark) ::-webkit-datetime-edit-month-field:focus,
:not(.dark) ::-webkit-datetime-edit-year-field:focus,
:not(.dark) ::-webkit-datetime-edit-day-field:focus {
    background-color: #fee2e2;
    border-radius: 3px;
    color: #ee5d5d;
}

:not(.dark) ::-webkit-datetime-edit-text {
    color: #9ca3af;
    padding: 0 2px;
}

:not(.dark) ::-webkit-datetime-edit-hour-field,
:not(.dark) ::-webkit-datetime-edit-minute-field {
    color: #1f2937;
    background: transparent;
    padding: 2px;
}

/* Стилизация выпадающего календаря через CSS Custom Properties (новые браузеры) */
@supports (color-scheme: dark) {
    html.dark input[type="date"],
    html.dark input[type="datetime-local"] {
        color-scheme: dark;
    }
    
    :not(.dark) input[type="date"],
    :not(.dark) input[type="datetime-local"] {
        color-scheme: light;
    }
}

html.dark .form-label {
    color: #cbd5e1;
}

html.dark select option {
    background-color: #1e293b;
    color: #f8fafc;
}

/* ===== Модальные окна ===== */
html.dark .modal {
    background-color: #1e293b;
}

html.dark .modal-title {
    color: #f8fafc;
}

html.dark .modal-close {
    color: #64748b;
}

html.dark .modal-close:hover {
    color: #94a3b8;
}

html.dark .modal-footer {
    border-color: #334155;
}

html.dark .modal-overlay {
    background-color: rgba(0, 0, 0, 0.7);
}

/* ===== Breadcrumb ===== */
html.dark .breadcrumb-item {
    color: #64748b;
}

html.dark .breadcrumb-item:hover {
    color: #cbd5e1;
}

html.dark .breadcrumb-separator {
    color: #334155;
}

/* ===== Вкладки ===== */
html.dark .tabs {
    border-color: #334155;
}

html.dark .tab {
    color: #64748b;
}

html.dark .tab:hover {
    color: #cbd5e1;
}

html.dark .tab-active {
    color: #f87171;
    border-bottom-color: #f87171;
}

/* ===== Бейджи ===== */
html.dark .badge-success {
    background-color: #064e3b;
    color: #6ee7b7;
}

html.dark .badge-danger {
    background-color: #7f1d1d;
    color: #fca5a5;
}

html.dark .badge-warning {
    background-color: #78350f;
    color: #fcd34d;
}

html.dark .badge-info {
    background-color: #1e3a8a;
    color: #93c5fd;
}

html.dark .badge-secondary {
    background-color: #334155;
    color: #cbd5e1;
}

/* ===== Кнопки действий ===== */
html.dark .action-btn {
    color: #94a3b8;
}

html.dark .action-btn-edit {
    color: #60a5fa;
}

html.dark .action-btn-edit:hover {
    background-color: #1e3a8a;
}

html.dark .action-btn-delete {
    color: #f87171;
}

html.dark .action-btn-delete:hover {
    background-color: #7f1d1d;
}

html.dark .action-btn-success {
    color: #4ade80;
}

html.dark .action-btn-success:hover {
    background-color: #064e3b;
}

html.dark .action-btn-warning {
    color: #fbbf24;
}

html.dark .action-btn-warning:hover {
    background-color: #78350f;
}

html.dark .action-btn-info {
    color: #60a5fa;
}

html.dark .action-btn-info:hover {
    background-color: #1e3a8a;
}

/* ===== Уведомления ===== */
html.dark .alert-success {
    background-color: #064e3b;
    color: #6ee7b7;
}

html.dark .alert-error {
    background-color: #7f1d1d;
    color: #fca5a5;
}

html.dark .alert-warning {
    background-color: #78350f;
    color: #fcd34d;
}

html.dark .alert-info {
    background-color: #1e3a8a;
    color: #93c5fd;
}

/* ===== Специальные блоки ===== */
html.dark .bg-blue-50,
html.dark .bg-slate-50 {
    background-color: #1e3a8a !important;
}

html.dark .bg-red-50 {
    background-color: #7f1d1d !important;
}

html.dark .bg-green-50,
html.dark .bg-green-100,
html.dark .bg-green-900 {
    background-color: #064e3b !important;
}

html.dark .bg-green-200 {
    background-color: #065f46 !important;
}

html.dark .bg-blue-50,
html.dark .bg-blue-100,
html.dark .bg-blue-900 {
    background-color: #1e3a8a !important;
}

html.dark .bg-blue-200 {
    background-color: #1e40af !important;
}

html.dark .bg-yellow-50,
html.dark .bg-yellow-100,
html.dark .bg-yellow-900 {
    background-color: #78350f !important;
}

html.dark .bg-yellow-200 {
    background-color: #92400e !important;
}

html.dark .bg-red-50,
html.dark .bg-red-100,
html.dark .bg-red-900 {
    background-color: #7f1d1d !important;
}

html.dark .bg-red-200 {
    background-color: #991b1b !important;
}

html.dark .bg-purple-50,
html.dark .bg-purple-100,
html.dark .bg-purple-900 {
    background-color: #581c87 !important;
}

html.dark .bg-purple-200 {
    background-color: #6b21a8 !important;
}

html.dark .bg-orange-50,
html.dark .bg-orange-100,
html.dark .bg-orange-900 {
    background-color: #7c2d12 !important;
}

html.dark .bg-orange-200 {
    background-color: #9a3412 !important;
}

html.dark .bg-indigo-50,
html.dark .bg-indigo-100,
html.dark .bg-indigo-900 {
    background-color: #312e81 !important;
}

html.dark .bg-indigo-200 {
    background-color: #3730a3 !important;
}

html.dark .bg-gray-50,
html.dark .bg-gray-100,
html.dark .bg-gray-900 {
    background-color: #1e293b !important;
}

html.dark .bg-gray-200 {
    background-color: #334155 !important;
}

html.dark .text-green-600 {
    color: #4ade80 !important;
}

html.dark .text-green-700 {
    color: #4ade80 !important;
}

html.dark .text-green-800 {
    color: #86efac !important;
}

html.dark .text-green-900 {
    color: #bbf7d0 !important;
}

html.dark .text-green-300 {
    color: #86efac !important;
}

html.dark .text-green-100 {
    color: #dcfce7 !important;
}

html.dark .bg-green-900\/30 {
    background-color: rgba(6, 78, 59, 0.3) !important;
}

html.dark .border-green-700 {
    border-color: #065f46 !important;
}

html.dark .text-blue-600 {
    color: #60a5fa !important;
}

html.dark .text-blue-700 {
    color: #60a5fa !important;
}

html.dark .text-blue-800 {
    color: #93c5fd !important;
}

html.dark .text-blue-900 {
    color: #bfdbfe !important;
}

html.dark .text-blue-300 {
    color: #93c5fd !important;
}

html.dark .text-blue-100 {
    color: #dbeafe !important;
}

html.dark .bg-blue-900\/30 {
    background-color: rgba(30, 58, 138, 0.3) !important;
}

html.dark .border-blue-700 {
    border-color: #1e40af !important;
}

html.dark .text-purple-600 {
    color: #c084fc !important;
}

html.dark .text-purple-700 {
    color: #c084fc !important;
}

html.dark .text-purple-800 {
    color: #d8b4fe !important;
}

html.dark .text-purple-900 {
    color: #e9d5ff !important;
}

html.dark .text-purple-300 {
    color: #d8b4fe !important;
}

html.dark .text-purple-100 {
    color: #f3e8ff !important;
}

html.dark .bg-purple-900\/30 {
    background-color: rgba(88, 28, 135, 0.3) !important;
}

html.dark .border-purple-700 {
    border-color: #581c87 !important;
}

html.dark .text-blue-800 {
    color: #93c5fd !important;
}

html.dark .text-yellow-600 {
    color: #fbbf24 !important;
}

html.dark .text-yellow-800 {
    color: #fde047 !important;
}

html.dark .text-red-600 {
    color: #f87171 !important;
}

html.dark .text-red-800 {
    color: #fca5a5 !important;
}

html.dark .text-purple-600 {
    color: #c084fc !important;
}

html.dark .text-purple-800 {
    color: #d8b4fe !important;
}

html.dark .text-orange-600 {
    color: #fb923c !important;
}

html.dark .text-orange-800 {
    color: #fed7aa !important;
}

html.dark .text-indigo-600 {
    color: #818cf8 !important;
}

html.dark .text-indigo-800 {
    color: #a5b4fc !important;
}

html.dark .text-gray-600 {
    color: #94a3b8 !important;
}

html.dark .text-gray-800 {
    color: #e2e8f0 !important;
}

html.dark .border-blue-200 {
    border-color: #1e40af !important;
}

html.dark .border-red-200 {
    border-color: #991b1b !important;
}

html.dark .border-green-200 {
    border-color: #065f46 !important;
}

html.dark .border-green-800 {
    border-color: #065f46 !important;
}

/* ===== Цвета текста в карточках ===== */
html.dark .text-purple-600 {
    color: #c084fc !important;
}

/* ===== Ховер эффекты ===== */
html.dark .hover\:bg-gray-50:hover {
    background-color: #334155 !important;
}

html.dark .hover\:bg-slate-700:hover {
    background-color: #334155 !important;
}

html.dark .dark\:hover\:bg-slate-700:hover,
html.dark .dark:hover\:bg-slate-700:hover {
    background-color: #334155 !important;
}

html.dark .hover\:bg-brand-50:hover {
    background-color: #7f1d1d !important;
}

html.dark .hover\:bg-green-50:hover {
    background-color: #064e3b !important;
}

html.dark .hover\:bg-blue-50:hover {
    background-color: #1e3a8a !important;
}

html.dark .hover\:bg-gray-700:hover {
    background-color: #475569 !important;
}

/* ===== Таблицы - hover для строк ===== */
html.dark tbody tr:hover,
html.dark tr:hover {
    background-color: #334155 !important;
}

/* ===== Аватарки ===== */
html.dark .text-blue-300 {
    color: #93c5fd !important;
}

/* ===== Scrollbar ===== */
html.dark ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html.dark ::-webkit-scrollbar-track {
    background: #0f172a;
}

html.dark ::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 4px;
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* ===== Selection ===== */
html.dark ::selection {
    background-color: #f87171;
    color: #0f172a;
}

/* ===== Модальные окна в тёмной теме ===== */
html.dark .modal-overlay {
    background-color: rgba(0, 0, 0, 0.75);
}

html.dark code {
    background-color: #334155;
    color: #e2e8f0;
}

html.dark pre {
    background-color: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}

html.dark .prose {
    color: #e2e8f0;
}

html.dark .prose h1,
html.dark .prose h2,
html.dark .prose h3 {
    color: #f8fafc;
}

/* ===== Создание заявки - тёмная тема ===== */
html.dark .step-line {
    background-color: #475569 !important;
}

html.dark .type-card:hover,
html.dark .subtype-card:hover,
html.dark .service-item:hover {
    background-color: rgba(238, 93, 93, 0.15);
}

html.dark .type-card:focus,
html.dark .subtype-card:focus,
html.dark .service-item:focus {
    outline-color: #fca5a5;
}

html.dark #serviceSearch {
    background-color: #1e293b;
    color: #f8fafc;
}

html.dark #serviceSearch::placeholder {
    color: #94a3b8;
}

html.dark .service-item {
    background-color: #1e293b;
}

html.dark .service-item:hover {
    background-color: rgba(238, 93, 93, 0.15);
}

html.dark .step-circle {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

html.dark .type-card,
html.dark .subtype-card {
    background-color: #1e293b;
}

html.dark .type-card:hover .w-10,
html.dark .subtype-card:hover .w-10,
html.dark .service-item:hover .w-10 {
    background-color: #ee5d5d;
}

/* Индикатор шагов - неактивные */
html.dark .step-circle.bg-gray-200 {
    background-color: #475569 !important;
    color: #cbd5e1 !important;
}

/* Специальная форма - фон */
html.dark #specialFormContainer {
    background-color: transparent;
}

html.dark #specialFormContainer .bg-white {
    background-color: #1e293b !important;
}

html.dark #specialFormContainer input,
html.dark #specialFormContainer select,
html.dark #specialFormContainer textarea {
    background-color: #0f172a !important;
    border-color: #475569 !important;
    color: #f8fafc !important;
}

html.dark #specialFormContainer label {
    color: #cbd5e1 !important;
}

html.dark #specialFormContainer .text-gray-700,
html.dark #specialFormContainer .text-gray-600,
html.dark #specialFormContainer .text-gray-900 {
    color: #e2e8f0 !important;
}