@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .flash-message {
    @apply mb-4 p-4 rounded shadow-lg;
  }

  .flash-message.notice {
    @apply bg-green-100 text-green-800 border border-green-300;
  }

  .flash-message.alert {
    @apply bg-red-100 text-red-800 border border-red-300;
  }

  /* DataTables customization */
  select[name="datatable_length"].border.px-3.py-2.rounded-lg.border-gray-200,
  select[name="datatable_length"].border.px-3.py-2.rounded-lg.border-gray-600 {
    @apply !h-6 !text-xs !py-0 !px-2 !bg-white !w-12;
  }

  .pagination a.relative.inline-flex.justify-center.items-center.space-x-2.border.px-4.py-2 {
    @apply !h-6 !text-xs !py-0 !px-2 !bg-white;
  }

  .dt-search input.border.px-3.py-2.rounded-lg.border-gray-200,
  .dt-search input.border.px-3.py-2.rounded-lg.border-gray-600 {
    @apply !h-6 !text-xs !py-0 !px-2 !bg-white;
  }

  .dt-search label,
  .dataTables_length label,
  .dataTables_filter label,
  .dataTables_info {
    @apply !text-xs !leading-6 !h-6;
  }

  .dataTables_filter {
    @apply !ml-auto;
  }

  /* DataTable header text size */
  .datatable-table thead th {
    @apply !text-xs !font-semibold;
  }

  /* Dark mode */
  .dark select[name="datatable_length"].border.px-3.py-2.rounded-lg.border-gray-200,
  .dark select[name="datatable_length"].border.px-3.py-2.rounded-lg.border-gray-600 {
    @apply !h-6 !text-xs !py-0 !px-2 !bg-gray-800 !w-12 !text-gray-200;
  }

  .dark .pagination a.relative.inline-flex.justify-center.items-center.space-x-2.border.px-4.py-2 {
    @apply !h-6 !text-xs !py-0 !px-2 !bg-gray-800 !text-gray-200;
  }

  .dark .dt-search input.border.px-3.py-2.rounded-lg.border-gray-200,
  .dark .dt-search input.border.px-3.py-2.rounded-lg.border-gray-600 {
    @apply !h-6 !text-xs !py-0 !px-2 !bg-gray-800 !text-gray-200;
  }

  .dark .dataTables_paginate .paginate_button.current {
    @apply !bg-gray-700;
  }

  .dark .dataTables_paginate .paginate_button:hover:not(.current) {
    @apply !bg-gray-700;
  }

  .dark .dataTables_paginate .paginate_button.disabled {
    @apply !text-gray-500;
  }

  .dark .dataTables_info,
  .dark .dataTables_length label,
  .dark .dataTables_filter label {
    @apply !text-gray-200;
  }

  /* Team logos: colour in light, white in dark */
  .team-logo__white {
    @apply hidden;
  }
  .dark .team-logo__colour {
    @apply hidden;
  }
  .dark .team-logo__white {
    @apply block;
  }
}