@layer popover-polyfill;

@import "tailwindcss";

@config "../../../tailwind-active_admin.config.js";

@layer components {
  .filters-form {
    @apply grid grid-cols-1 gap-4 md:grid-cols-4;

    .filters-form-buttons {
      @apply col-span-full;
    }
  }

  a {
    @apply cursor-pointer no-underline;
  }

  /* Override ActiveAdmin plugin.js has-many left border style. */
  .formtastic {
    tr.has-many-fields {
      @apply ps-3 border-s-0!;

      td {
        @apply py-2.5!;
      }
    }
  }

  .data-table {
    @apply text-nowrap;
  }

  .data-table :where(td) {
    @apply px-2.5! py-2.5!;
  }

  /*
   * Pin the last index column (row actions) to the right edge while `.paginated-collection-contents`
   * scrolls horizontally, so the menu trigger stays reachable on wide tables.
   */
  .paginated-collection-contents .data-table :where(thead > tr > th:last-child),
  .paginated-collection-contents .data-table :where(tbody > tr > td:last-child) {
    position: sticky;
    right: 0;
    min-width: 3rem;
    /* Edge cue when content scrolls under the pinned column. */
    box-shadow: -6px 0 10px -6px rgb(15 23 42 / 0.12);
  }

  .paginated-collection-contents .data-table :where(thead > tr > th:last-child) {
    z-index: 3;
    @apply bg-gray-50 dark:bg-gray-950;
  }

  .paginated-collection-contents .data-table :where(tbody > tr > td:last-child) {
    z-index: 2;
    @apply bg-white dark:bg-gray-950;
  }

  .attributes-table {
    &:where(tbody > tr > th) {
      @media (width >= 40rem) {
        width: calc(var(--spacing) * 60) !important;
      }
    }
  }

  .attributes-table :where(tbody > tr > th) {
    @apply sm:w-60!;
  }

  /*
   * Destructive actions (delete, explicit destructive buttons): rose palette per project conventions.
   * Covers Turbo/UJS delete links, button_to(..., method: :delete), and .action-item-button--destructive.
   */
  .action-item-button:is([data-turbo-method="delete"], [data-method="delete"]),
  .action-item-button--destructive {
    @apply border-rose-600! bg-white! text-rose-600! hover:bg-rose-50! hover:text-rose-700! focus:ring-rose-500! focus:ring-1! dark:border-rose-500! dark:bg-gray-900! dark:text-rose-400! dark:hover:bg-rose-950/40! dark:hover:text-white! dark:focus:ring-rose-700!;
  }

  .data-table-resource-actions :is(a[data-turbo-method="delete"], a[data-method="delete"]) {
    @apply font-medium! text-rose-600! no-underline! hover:text-rose-700! dark:text-rose-400! dark:hover:text-rose-300!;
  }

  /* Backdrop for the data-confirm replacement dialog (native <dialog>). */
  .data-confirm-dialog::backdrop {
    @apply bg-gray-500/80 dark:bg-gray-900/85 transition-opacity;
  }

  .index-data-table-toolbar {
    @apply flex flex-wrap items-center justify-between gap-3;
  }

  /* Styled form fieldset with visible boundary and clear section title. */
  fieldset.form-grid {
    @apply relative border border-gray-200 rounded-lg bg-gray-50/50 px-5 pt-2 pb-4 mb-5
           dark:border-gray-700 dark:bg-gray-800/30;

    > legend {
      @apply px-2.5 text-sm font-semibold tracking-wide text-gray-600 uppercase
             dark:text-gray-300;
    }

    > ol {
      @apply grid grid-cols-1 md:grid-cols-2 gap-x-6;
    }

    > ol > li.col-full {
      @apply md:col-span-2;
    }
  }
}