/* Dark Mode Styles */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Dark mode toggle styles */
.dark-mode-toggle {
  @apply p-2 rounded-md text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:focus:ring-offset-gray-800;
}

/* Quill Editor Dark Mode Styles */
.quill-dark .ql-toolbar {
  @apply bg-gray-700 border-gray-600;
}

.quill-dark .ql-toolbar .ql-stroke {
  @apply stroke-gray-300;
}

.quill-dark .ql-toolbar .ql-fill {
  @apply fill-gray-300;
}

.quill-dark .ql-toolbar .ql-picker {
  @apply text-gray-300;
}

.quill-dark .ql-toolbar .ql-picker-options {
  @apply bg-gray-700 border-gray-600;
}

.quill-dark .ql-container {
  @apply bg-gray-800 border-gray-600 text-white;
}

.quill-dark .ql-editor.ql-blank::before {
  @apply text-gray-400;
}

/* Dark mode transition */
.dark-transition {
  @apply transition-colors duration-200 ease-in-out;
}

/* Ensure proper contrast in dark mode */
.dark .text-gray-600 {
  @apply text-gray-300;
}

.dark .text-gray-700 {
  @apply text-gray-200;
}

.dark .text-gray-800 {
  @apply text-gray-100;
}

.dark .text-gray-900 {
  @apply text-white;
}

/* Ensure proper focus states in dark mode */
.dark .focus\:ring-offset-2:focus {
  @apply focus:ring-offset-gray-800;
}

/* Ensure proper border colors in dark mode */
.dark .border-gray-200 {
  @apply border-gray-700;
}

.dark .border-gray-300 {
  @apply border-gray-600;
}

/* Ensure proper background colors in dark mode */
.dark .bg-white {
  @apply bg-gray-800;
}

.dark .bg-gray-50 {
  @apply bg-gray-700;
}

.dark .bg-gray-100 {
  @apply bg-gray-700;
}

/* Ensure proper hover states in dark mode */
.dark .hover\:bg-gray-50:hover {
  @apply hover:bg-gray-700;
}

.dark .hover\:bg-gray-100:hover {
  @apply hover:bg-gray-600;
}

/* Ensure proper shadow in dark mode */
.dark .shadow-sm {
  @apply shadow-gray-900;
}

.dark .shadow-md {
  @apply shadow-gray-900;
}

.dark .shadow-lg {
  @apply shadow-gray-900;
}

/* Ensure proper form element styling in dark mode */
.dark input,
.dark select,
.dark textarea {
  @apply bg-gray-700 border-gray-600 text-white;
}

.dark input:focus,
.dark select:focus,
.dark textarea:focus {
  @apply border-primary-500 ring-primary-500;
}

/* Ensure proper button styling in dark mode */
.dark .btn-primary {
  @apply bg-primary-700 hover:bg-primary-800;
}

.dark .btn-secondary {
  @apply bg-gray-700 hover:bg-gray-600 text-white;
}

.dark .btn-danger {
  @apply bg-red-700 hover:bg-red-800;
}

/* Ensure proper card styling in dark mode */
.dark .card {
  @apply bg-gray-800 border-gray-700;
}

.dark .card-header {
  @apply border-gray-700;
}

.dark .card-footer {
  @apply bg-gray-700 border-gray-700;
}

/* Ensure proper table styling in dark mode */
.dark .table th {
  @apply bg-gray-800 border-gray-700;
}

.dark .table td {
  @apply border-gray-700;
}

.dark .table tr:hover {
  @apply bg-gray-700;
}

/* Ensure proper alert styling in dark mode */
.dark .alert-success {
  @apply bg-green-900 text-green-200;
}

.dark .alert-danger {
  @apply bg-red-900 text-red-200;
}

.dark .alert-warning {
  @apply bg-yellow-900 text-yellow-200;
}

.dark .alert-info {
  @apply bg-blue-900 text-blue-200;
}

/* Ensure proper dropdown styling in dark mode */
.dark .dropdown-menu {
  @apply bg-gray-700 border-gray-600;
}

.dark .dropdown-item {
  @apply text-gray-200 hover:bg-gray-600;
}

/* Ensure proper pagination styling in dark mode */
.dark .pagination-item {
  @apply bg-gray-800 border-gray-700 text-gray-300;
}

.dark .pagination-item.active {
  @apply bg-primary-600 text-white;
}

.dark .pagination-item:hover:not(.active) {
  @apply bg-gray-700;
}

/* Ensure proper modal styling in dark mode */
.dark .modal-content {
  @apply bg-gray-800 border-gray-700;
}

.dark .modal-header {
  @apply border-gray-700;
}

.dark .modal-footer {
  @apply border-gray-700;
}

/* Ensure proper nav styling in dark mode */
.dark .nav-link {
  @apply text-gray-300 hover:text-white;
}

.dark .nav-link.active {
  @apply text-white;
}

/* Accessibility improvements for dark mode */
.dark :focus {
  @apply outline-none ring-2 ring-primary-500 ring-offset-2 ring-offset-gray-800;
}

.dark .sr-only {
  @apply absolute w-px h-px p-0 -m-px overflow-hidden;
}