@import "components/tom-select";
@import "components/pagy";
@import "mailer";

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

* {
  @apply box-border tabular-nums;
}

@layer components {
  /* 入力 */
  input[type="date"],
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  select,
  textarea {
    @apply block shadow rounded-md border border-gray-200 outline-none px-3 py-2 w-full;
  }

  select {
    @apply pr-8;
  }

  textarea {
    @apply min-h-40;
  }

  .label {
    @apply block font-bold text-gray-700;
  }

  /* チェックボックス */
  .checkbox {
    @apply flex items-center gap-2;
    input {
      @apply w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2;
    }
  }

  /* 入力必須 */
  .required::after {
    @apply content-['必須'] bg-red-500 text-xs text-white py-0.5 px-1 rounded-md ml-2;
  }

  /* ボタン */
  .btn-primary {
    @apply shadow text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm py-3 px-5 focus:outline-none;
  }

  .btn-white {
    @apply shadow text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm py-3 px-5;
  }

  .btn-danger {
    @apply shadow focus:outline-none text-white bg-red-500 hover:bg-red-600 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-3;
  }

  .btn-cancel {
    @apply shadow focus:outline-none text-white bg-gray-300 hover:bg-gray-200 focus:ring-4 focus:ring-gray-100 font-medium rounded-lg text-sm px-5 py-3;
  }

  .btn-icon {
    @apply shadow px-3 py-1.5 text-xs font-bold text-white rounded;
  }

  .action {
    @apply flex justify-center gap-5;
  }

  /* リンク */
  .link {
    @apply text-blue-600 dark:text-blue-500 hover:underline;
  }

  .link_destroy {
    @apply flex items-center gap-2 text-red-700 hover:text-red-500;
  }

  table {
    @apply w-full text-sm text-left text-gray-500;
  }
  th {
    @apply px-6 py-3 text-gray-700 whitespace-nowrap;
  }
  td {
    @apply px-6 py-3 leading-6;
  }

  /* 一覧テーブル */
  div.table-index {
    @apply w-full overflow-x-auto rounded-lg shadow-md;
  }
  div.table-index tr {
    @apply border-b hover:bg-gray-50;
  }
  div.table-index th {
    @apply bg-gray-50;
  }
  div.table-index td {
    @apply whitespace-nowrap;
  }

  /* 詳細テーブル */
  div.table-show {
    @apply mb-10 border rounded-lg shadow-sm;
  }
  div.table-show table {
    @apply block sm:table;
  }
  div.table-show tbody {
    @apply block w-full;
  }
  div.table-show tr {
    @apply block w-full border-b;
  }
  div.table-show th {
    @apply block w-full font-bold bg-gray-50 text-sm sm:w-[16.25rem] sm:table-cell;
  }
  div.table-show td {
    @apply block w-full whitespace-normal min-h-12 sm:table-cell sm:w-auto;
  }

  /* レスポンシブテーブル */
  table.table-responsive {
    th {
      @apply px-6 py-1 block w-full;
    }
    td {
      @apply block w-full;
    }
  }

}

/* フォームエラー */
.field_with_errors {
  @apply contents;
}

.field_with_errors label {
  @apply p-1 text-red-400 rounded-lg;
}

.field_with_errors input {
  @apply border-2 border-red-500;
}

.field_with_errors select {
  @apply border-2 border-red-500;
}

/* アラート */
.flash_type-alert {
  @apply text-red-800 border-red-200 bg-red-50;
}

.flash_type-notice {
  @apply text-blue-800 border-blue-200 bg-blue-50;
}
/* pagy */
@layer components {
  .pagy-info {
    @apply mt-10 text-right text-gray-400;
  }

  .pagy-nav {
    @apply my-4 justify-center;
  }

  .pagy-nav,
  .pagy-nav-js {
    @apply flex space-x-2;
  }

  .pagy-nav .page a,
  .pagy-nav .page.active,
  .pagy-nav .page.prev.disabled,
  .pagy-nav .page.next.disabled,
  .pagy-nav-js .page a,
  .pagy-nav-js .page.active,
  .pagy-nav-js .page.prev.disabled,
  .pagy-nav-js .page.next.disabled {
    @apply block rounded-lg px-3 py-1 text-sm text-gray-500 font-semibold bg-gray-200 shadow-md;
    &:hover{
      @apply bg-gray-300;
    }
    &:active{
      @apply bg-gray-400 text-white;
    }
  }

  .pagy-nav .page.prev.disabled,
  .pagy-nav .page.next.disabled,
  .pagy-nav-js .page.prev.disabled,
  .pagy-nav-js .page.next.disabled {
    @apply text-gray-400 cursor-default;
    &:hover {
      @apply text-gray-400 bg-gray-200;
    }
    &:active {
      @apply text-gray-400 bg-gray-200;
    }
  }

  .pagy-nav .page.active,
  .pagy-nav-js .page.active {
    @apply text-white cursor-default bg-gray-400;
    &:hover {
      @apply text-white bg-gray-400;
    }
    &:active {
      @apply bg-gray-400 text-white;
    }
  }


  .pagy-combo-nav-js {
    @apply flex max-w-max rounded-full px-3 py-1 text-sm text-gray-500 font-semibold bg-gray-200 shadow-md;
  }

  .pagy-combo-nav-js .pagy-combo-input {
    @apply bg-white px-2 rounded-sm
  }

  .pagy-combo-nav-js .page.prev,
  .pagy-combo-nav-js .page.next {
    &:hover {
      @apply text-gray-800;
    }
    &:active {
      @apply text-gray-800;
    }
  }

  .pagy-combo-nav-js .page.prev.disabled,
  .pagy-combo-nav-js .page.next.disabled {
    @apply text-gray-400 cursor-default;
  }
}
/* tom-select css */
@import "https://cdn.jsdelivr.net/npm/tom-select/dist/css/tom-select.css";

div.ts-control {
  @apply shadow rounded-md border border-gray-200 outline-none px-3 py-2 w-full;

  input {
    @apply min-w-24 w-fit text-base !leading-6;
  }
}

/* 選択項目 */
div.ts-control > div.item {
  @apply rounded-md text-nowrap relative;

  a.remove {
    @apply block rounded-md content-center;
  }
}

div.ts-wrapper.single div.item {
  @apply !p-0 text-base !leading-6;
  a.remove {
    @apply h-full;
  }
}

div.ts-wrapper.multi div.item {
  @apply !p-2;
  a.remove {
    @apply h-[calc(100%+1rem)];
  }
}

/* ドロップダウン */
div.ts-dropdown {
  @apply rounded-md border border-solid border-t border-gray-200;

  div.ts-dropdown-content {
    @apply leading-6;
  }
}

div.ts-dropdown [data-selectable].option:first-child {
  @apply rounded-t-md;
}

div.ts-dropdown [data-selectable].option:last-child {
  @apply rounded-b-md;
}

.ts-dropdown .create:hover
.ts-dropdown .option:hover,
.ts-dropdown .option.active {
    @apply bg-blue-600 text-white dark:text-white;
}
.mailtemplate {
  box-sizing: border-box;
  background-color: #fff;
  margin: 0;
  padding: 0;
}

.mailtemplate .container {
  box-sizing: border-box;
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  background-color: #fff;
}

.mailtemplate .main {
  box-sizing: border-box;
  padding: 2rem 0;
}

.mailtemplate .footer {
  box-sizing: border-box;
  margin-top: 2rem;
  padding: 2rem 1.5rem;
  /* background-color: #f3f4f6; */
  border-top: solid 1px;
  font-size: 14px;
}

.mailtemplate .btn {
  display: inline-block;
  border-radius: 5px;
  padding: 1rem 1.5rem;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background-color: #3b82f6;
}

.mailtemplate .mt-5 {
  margin-top: 1.25rem;
}

.mailtemplate .mt-10 {
  margin-top: 2.5rem;
}
/*
 * 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.
 *


 */