/**
 * Component-specific styles for TailAdmin v2.2
 * These styles complement the base TailAdmin styles
 */

/* Custom scrollbar */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
}

.dark .custom-scrollbar {
  scrollbar-color: #475467 transparent;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #475467;
}

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

/* No scrollbar utility */
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Preloader */
.preloader {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999999;
  display: flex;
  height: 100vh;
  width: 100vw;
  align-items: center;
  justify-content: center;
  background-color: white;
}

.dark .preloader {
  background-color: black;
}

/* Sidebar styles */
.sidebar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sidebar::-webkit-scrollbar {
  display: none;
}

/* Table styles for DataTables */
.dataTables_wrapper {
  @apply w-full;
}

.dataTables_wrapper .dataTables_filter {
  @apply mb-4;
}

.dataTables_wrapper .dataTables_filter input {
  @apply h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:border-turquoise-300 focus:ring-3 focus:ring-turquoise-500/10 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30;
}

.dataTables_wrapper .dataTables_length select {
  @apply h-11 rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 focus:border-turquoise-300 focus:ring-3 focus:ring-turquoise-500/10 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-white/90;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  @apply px-3 py-2 mx-1 rounded-lg border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  @apply bg-turquoise-500 text-white border-turquoise-500 hover:bg-turquoise-600;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  @apply opacity-50 cursor-not-allowed;
}

/* Chart container styles */
.chart-container {
  position: relative;
  height: 100%;
  width: 100%;
}

/* Form validation styles */
.form-error {
  @apply mt-1 text-sm text-error-600 dark:text-error-400;
}

.form-success {
  @apply mt-1 text-sm text-success-600 dark:text-success-400;
}

/* Loading spinner */
.spinner {
  @apply inline-block h-4 w-4 animate-spin rounded-full border-2 border-solid border-current border-r-transparent;
}

/* -------------------------------------------------------------------------- */
/* Tailwind utility shims (theme safety)                                       */
/* -------------------------------------------------------------------------- */
/* Some views use Tailwind gradient utility classes, but the shipped Tailwind
 * bundle is minimal and may not include all of them.
 * When a gradient background class is missing, components can render with a
 * plain white background while still using `text-white`, causing unreadable
 * text in light mode.
 *
 * These shims add only the specific utilities we currently rely on in views.
 */

.bg-gradient-to-br {
  --tw-gradient-position: to bottom right in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
}

.to-blue-600 {
  --tw-gradient-to: var(--color-blue-600);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.from-green-500 {
  --tw-gradient-from: var(--color-green-500);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.to-green-600 {
  --tw-gradient-to: var(--color-green-600);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.from-purple-500 {
  --tw-gradient-from: var(--color-purple-500);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

/* -------------------------------------------------------------------------- */
/* Browser-preview style patches (scoped, minimal)                             */
/* -------------------------------------------------------------------------- */
/* Change 10: button.hover:text-dark-900 color -> rgba(52, 64, 84, 1) */
button.hover\:text-dark-900 {
  color: rgba(52, 64, 84, 1);
}

/* Change 11: svg.w-5 color -> rgba(52, 64, 84, 1) (scoped to header buttons) */
header .header-button svg.w-5 {
  color: rgba(52, 64, 84, 1);
}

/* Change 12/13/14: form grid tweaks (scoped to user create/edit grids) */
.user-form-grid {
  background-clip: unset;
  -webkit-background-clip: unset;
  color: rgba(31, 41, 55, 1);
}