/* Общие стили для таблиц */
.table-base {
  @apply min-w-full border border-gray-200 dark:border-darkblack-400 rounded-lg overflow-hidden;
}

.table-base thead {
  @apply bg-gray-100 dark:bg-darkblack-600;
}

.table-base th {
  @apply px-4 py-2 text-left text-sm font-semibold text-bgray-700 dark:text-bgray-200;
}

.table-base td {
  @apply px-4 py-2 text-sm text-bgray-900 dark:text-bgray-50;
}

.table-base tbody tr {
  @apply border-t border-gray-200 dark:border-darkblack-400;
}

.table-base tbody tr:hover {
  @apply bg-gray-50 dark:bg-darkblack-600;
}

/* DataTables элементы */
.dataTables_wrapper .dataTables_filter input {
  @apply border border-gray-300 rounded-lg px-3 py-1 text-sm focus:ring-2 focus:ring-cyan-400;
}

.dataTables_wrapper .dataTables_length select {
  @apply border border-gray-300 rounded-lg px-2 py-1 text-sm;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  @apply border border-gray-300 rounded-md px-2 py-1 mx-1 text-sm text-bgray-700 bg-white;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  @apply bg-cyan-500 text-white border-cyan-500;
}

.aspect-4-3 {
  position: relative;
  width: 100%;
  padding-top: 75%; /* 3/4 = 0.75 → 75% */
  overflow: hidden;
  border-radius: 8px; /* как rounded-md */
}

.aspect-4-3 img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* обрезает лишнее, не растягивает */
  border-radius: 8px;
}
.aspect-16-9 {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 9/16 */
  overflow: hidden;
  border-radius: 8px;
}

.aspect-16-9 img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}