/* Дополнительные стили поверх Tailwind */

.form-input {
    display: block;
    width: 100%;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    color: #334155;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}

/* Тёмная тема для полей ввода */
.dark .form-input {
    background: #1f2937;
    border-color: #374151;
    color: #e5e7eb;
}

.dark .form-input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .25);
}

/* Цветовые пикеры */
.form-color {
    display: block;
    width: 100%;
    height: 2.75rem;
    padding: 0.25rem;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    cursor: pointer;
}

.dark .form-color {
    border-color: #374151;
    background: #1f2937;
}

.form-file {
    display: block;
    width: 100%;
    font-size: 0.875rem;
    color: #64748b;
}

.card {
    background: #ffffff;
    border-radius: 1rem;
    border: 1px solid #f1f5f9;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}

.dark .card {
    background: #1f2937;
    border-color: #374151;
}

.badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Навбар: значение по умолчанию (когда кастомная тема не активна).
   Кастомная тема переопределяет это через .navbar в <style> (идёт позже),
   а тёмный режим побеждает за счёт специфичности .dark .navbar. */
.navbar {
    background-color: rgba(255, 255, 255, 0.8);
}

.dark .navbar {
    background-color: rgba(17, 24, 39, 0.85);
}

/* ========================================================= */
/* Тёмная тема: глобальные переопределения светлых утилит    */
/* Позволяет всем старым шаблонам автоматически темнеть.      */
/* ========================================================= */
.dark body {
    background-color: #111827; /* gray-900 */
    color: #e5e7eb;            /* gray-200 */
}

/* Текст */
.dark .text-slate-800,
.dark .text-gray-800 { color: #f3f4f6; }
.dark .text-slate-700,
.dark .text-gray-700 { color: #e5e7eb; }
.dark .text-slate-600,
.dark .text-gray-600 { color: #d1d5db; }
.dark .text-slate-500,
.dark .text-gray-500 { color: #9ca3af; }
.dark .text-slate-400,
.dark .text-gray-400 { color: #6b7280; }

/* Фоны */
.dark .bg-slate-50,
.dark .bg-gray-50 { background-color: #1f2937; }
.dark .bg-slate-100,
.dark .bg-gray-100 { background-color: #374151; }
.dark .bg-white { background-color: #1f2937; }
.dark .bg-white\/80 { background-color: rgba(17, 24, 39, .85); }

/* Границы и разделители */
.dark .border-slate-100,
.dark .border-gray-100 { border-color: #374151; }
.dark .border-slate-200,
.dark .border-gray-200 { border-color: #4b5563; }
.dark .border-slate-300,
.dark .border-gray-300 { border-color: #4b5563; }
.dark .divide-slate-50 > :not([hidden]) ~ :not([hidden]) { border-color: #374151; }
.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #374151; }

/* Наведения */
.dark .hover\:bg-slate-50:hover { background-color: #374151; }
.dark .hover\:bg-slate-100:hover { background-color: #374151; }
.dark .hover\:text-slate-600:hover { color: #e5e7eb; }
.dark .hover\:text-slate-700:hover { color: #f3f4f6; }

/* Тёмные кнопки/бейджи */
.dark .bg-slate-800 { background-color: #374151; }
.dark .hover\:bg-slate-900:hover { background-color: #4b5563; }

/* Светлые бейджи статусов в тёмной теме */
.dark .bg-emerald-50 { background-color: rgba(6, 78, 59, .4); }
.dark .text-emerald-700 { color: #6ee7b7; }
.dark .bg-brand-50 { background-color: rgba(49, 46, 129, .4); }
.dark .text-brand-700 { color: #a5b4fc; }
.dark .bg-amber-50 { background-color: rgba(120, 53, 15, .4); }
.dark .text-amber-700 { color: #fcd34d; }
.dark .bg-red-50 { background-color: rgba(127, 29, 29, .4); }
.dark .text-red-700 { color: #fca5a5; }
.dark .bg-brand-100 { background-color: rgba(49, 46, 129, .5); }
.dark .text-brand-600 { color: #a5b4fc; }