/* Custom CSS for Legal Clarity */

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #42646f;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #334a52;
}

/* Custom animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

/* Custom button styles */
.btn-primary {
    @apply bg-primary hover:bg-[#334a52] text-white px-6 py-3 rounded-lg font-semibold transition-colors duration-200;
}

.btn-secondary {
    @apply bg-secondary hover:bg-[#7a9aa3] text-white px-6 py-3 rounded-lg font-semibold transition-colors duration-200;
}

.btn-outline {
    @apply border-2 border-primary text-primary hover:bg-primary hover:text-white px-6 py-3 rounded-lg font-semibold transition-colors duration-200;
}

/* Custom card styles */
.card {
    @apply bg-white rounded-lg shadow-md border border-gray-200;
}

.card-header {
    @apply px-6 py-4 border-b border-gray-200;
}

.card-content {
    @apply px-6 py-4;
}

.card-footer {
    @apply px-6 py-4 border-t border-gray-200;
}

/* Custom form styles */
.form-input {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 mb-2;
}

.form-error {
    @apply text-red-600 text-sm mt-1;
}

/* Custom loading spinner */
.spinner {
    @apply animate-spin rounded-full h-8 w-8 border-b-2 border-primary;
}

/* Custom toast styles */
.toast {
    @apply fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg max-w-sm;
}

.toast-success {
    @apply bg-green-500 text-white;
}

.toast-error {
    @apply bg-red-500 text-white;
}

.toast-warning {
    @apply bg-yellow-500 text-white;
}

.toast-info {
    @apply bg-blue-500 text-white;
}

/* Unfold Admin Dark Mode Form Input Fixes */
/* Fix form input visibility in dark mode - multiple selectors for compatibility */
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="number"],
.dark input[type="url"],
.dark input[type="tel"],
.dark input[type="search"],
.dark textarea,
.dark select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] textarea,
[data-theme="dark"] select,
.dark-mode input[type="text"],
.dark-mode input[type="email"],
.dark-mode input[type="password"],
.dark-mode input[type="number"],
.dark-mode input[type="url"],
.dark-mode input[type="tel"],
.dark-mode input[type="search"],
.dark-mode textarea,
.dark-mode select {
    background-color: gray !important;
    border-color: #374151 !important;
    color: #F9FAFB !important;
}

.dark input[type="text"]:focus,
.dark input[type="email"]:focus,
.dark input[type="password"]:focus,
.dark input[type="number"]:focus,
.dark input[type="url"]:focus,
.dark input[type="tel"]:focus,
.dark input[type="search"]:focus,
.dark textarea:focus,
.dark select:focus,
[data-theme="dark"] input[type="text"]:focus,
[data-theme="dark"] input[type="email"]:focus,
[data-theme="dark"] input[type="password"]:focus,
[data-theme="dark"] input[type="number"]:focus,
[data-theme="dark"] input[type="url"]:focus,
[data-theme="dark"] input[type="tel"]:focus,
[data-theme="dark"] input[type="search"]:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus,
.dark-mode input[type="text"]:focus,
.dark-mode input[type="email"]:focus,
.dark-mode input[type="password"]:focus,
.dark-mode input[type="number"]:focus,
.dark-mode input[type="url"]:focus,
.dark-mode input[type="tel"]:focus,
.dark-mode input[type="search"]:focus,
.dark-mode textarea:focus,
.dark-mode select:focus {
    background-color: #374151 !important;
    border-color: #6B7280 !important;
    color: #F9FAFB !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Fix placeholder text visibility */
.dark input::placeholder,
.dark textarea::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder,
.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: #9CA3AF !important;
}

/* Fix form labels in dark mode */
.dark .form-row label,
.dark .field-box label,
[data-theme="dark"] .form-row label,
[data-theme="dark"] .field-box label,
.dark-mode .form-row label,
.dark-mode .field-box label {
    color: #E5E7EB !important;
}

/* Fix help text in dark mode */
.dark .help,
.dark .helptext,
[data-theme="dark"] .help,
[data-theme="dark"] .helptext,
.dark-mode .help,
.dark-mode .helptext {
    color: #9CA3AF !important;
}

/* Fix form field containers */
.dark .form-row,
.dark .field-box,
[data-theme="dark"] .form-row,
[data-theme="dark"] .field-box,
.dark-mode .form-row,
.dark-mode .field-box {
    background-color: transparent !important;
}

/* Fix checkbox and radio button visibility */
.dark input[type="checkbox"],
.dark input[type="radio"],
[data-theme="dark"] input[type="checkbox"],
[data-theme="dark"] input[type="radio"],
.dark-mode input[type="checkbox"],
.dark-mode input[type="radio"] {
    background-color: #374151 !important;
    border-color: #4B5563 !important;
}

.dark input[type="checkbox"]:checked,
.dark input[type="radio"]:checked,
[data-theme="dark"] input[type="checkbox"]:checked,
[data-theme="dark"] input[type="radio"]:checked,
.dark-mode input[type="checkbox"]:checked,
.dark-mode input[type="radio"]:checked {
    background-color: #3B82F6 !important;
    border-color: #3B82F6 !important;
}

/* Fix file input styling */
.dark input[type="file"],
[data-theme="dark"] input[type="file"],
.dark-mode input[type="file"] {
    background-color: #1F2937 !important;
    border-color: #374151 !important;
    color: #F9FAFB !important;
}

/* Fix date and time inputs */
.dark input[type="date"],
.dark input[type="time"],
.dark input[type="datetime-local"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="datetime-local"],
.dark-mode input[type="date"],
.dark-mode input[type="time"],
.dark-mode input[type="datetime-local"] {
    background-color: #1F2937 !important;
    border-color: #374151 !important;
    color: #F9FAFB !important;
}

/* Additional Unfold-specific selectors */
body[data-theme="dark"] input,
body[data-theme="dark"] textarea,
body[data-theme="dark"] select {
    background-color: #1F2937 !important;
    border-color: #374151 !important;
    color: #F9FAFB !important;
}

body[data-theme="dark"] input:focus,
body[data-theme="dark"] textarea:focus,
body[data-theme="dark"] select:focus {
    background-color: #374151 !important;
    border-color: #6B7280 !important;
    color: #F9FAFB !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}