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

input[type=text],
input[type=number] {
  @apply mt-1 block rounded-md border-gray-300 shadow-sm cursor-pointer
         focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50;

  .field_with_errors &,
  .with-errors & {
    @apply border-red-300 text-red-900 placeholder-red-300
           focus:outline-none focus:ring-1 focus:ring-red-500 focus:border-red-500;
  }
}

select {
  @apply mt-1 block pl-3 pr-10 py-2 border-gray-300 rounded-md
         focus:outline-none focus:ring-indigo-500 focus:border-indigo-500;

  .field_with_errors &,
  .with-errors & {
    @apply border-red-300 text-red-900 placeholder-red-300
           focus:outline-none focus:ring-1 focus:ring-red-500 focus:border-red-500;
  }
}

form.button_to { @apply inline; }

.top-section {
  @apply bg-white overflow-hidden shadow border-b border-gray-200 sm:rounded-lg my-8;

  &.top-section-padded { @apply px-8 py-4; }
}

.table-list {
  @apply min-w-full sm:table sm:divide-y sm:divide-gray-200 sm:border-collapse;

  & .thead {
    @apply bg-gray-50 sm:table-header-group;

    & .row { @apply flex flex-row sm:table-row; }
    & .row > * {
      @apply text-xs font-medium text-gray-500 uppercase tracking-wider
             px-6 py-3
             sm:table-cell sm:text-left;
    }
  }

  & .tbody {
    @apply flex flex-col bg-white sm:table-row-group divide-y divide-gray-200;

    & .row,
    & > turbo-frame {
      @apply flex flex-col gap-2 py-4 sm:table-row;

      & > form { @apply flex flex-col gap-4 sm:contents; }

      & > :not(form),
      & > form > * { @apply sm:table-cell px-6 sm:py-4 whitespace-nowrap text-sm text-gray-500; }
      & > .highlight { @apply font-medium text-gray-900; }

      & .actions { @apply flex flex-nowrap gap-2 sm:justify-end; }
      & .actions * { @apply grow sm:grow-0; }

      & input[type=text],
      & input[type=number] { @apply sm:-my-4; }
    }
  }
}

.button {
  @apply inline-flex justify-center bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm font-medium text-gray-700 cursor-pointer
         hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500;
}

.button-secondary-danger {
  @apply inline-flex justify-center bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm font-medium text-red-600 cursor-pointer
         hover:bg-gray-50 hover:border-red-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500;
}

.button-submit {
  @apply inline-flex justify-center py-2 px-4 border border-transparent shadow-sm font-medium rounded-md text-white bg-indigo-600 cursor-pointer
         hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500;
}

form.single-line {
  @apply flex flex-col gap-4 sm:flex-row sm:flex-nowrap sm:items-center;
}

.simple_form.horizontal {
  & .input { @apply grid grid-cols-3 gap-4 items-center py-5; }
  & .input { @apply border-b border-gray-200; }
  & .input .field { @apply col-span-2; }
  & .input .error { @apply mt-2 italic text-sm text-red-500; }
  & .input .hint { @apply mt-2 text-sm text-gray-600; }

  & .buttons {
    @apply pt-5 flex justify-end;
  }

  & .buttons button[type=submit] {
    @apply ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600
           hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500;
  }
  & .buttons a.button,
  & .buttons button[type=button] {
    @apply bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700
           hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
= require_tree .