/*
 * This is a manifest file that'll be compiled into application.css.
 * Custom component styles using Tailwind's @apply directive
 */

/* ボタンコンポーネント */
.btn {
  @apply px-4 py-2 rounded-lg font-medium text-sm transition-all duration-200 inline-block text-center cursor-pointer;
}

.btn-primary {
  @apply bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
}

.btn-secondary {
  @apply bg-gray-200 text-gray-900 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2;
}

.btn-danger {
  @apply bg-red-600 text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2;
}

.btn-success {
  @apply bg-green-600 text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2;
}

.btn-sm {
  @apply px-3 py-1.5 text-xs;
}

.btn-lg {
  @apply px-6 py-3 text-base;
}

.btn-outline {
  @apply bg-transparent border-2;
}

.btn-outline.btn-primary {
  @apply border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white;
}

.btn-outline.btn-secondary {
  @apply border-gray-300 text-gray-700 hover:bg-gray-300 hover:text-gray-900;
}

/* フォームコンポーネント */
.form-group {
  @apply mb-4;
}

.form-label {
  @apply block text-sm font-medium text-gray-700 mb-2;
}

.form-input {
  @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors;
}

.form-select {
  @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white transition-colors;
}

.form-textarea {
  @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-vertical transition-colors;
}

.form-error {
  @apply text-red-600 text-sm mt-1;
}

.form-help {
  @apply text-gray-500 text-sm mt-1;
}

/* カードコンポーネント */
.card {
  @apply bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden;
}

.card-header {
  @apply px-4 py-3 border-b border-gray-200 bg-gray-50;
}

.card-body {
  @apply p-4;
}

.card-footer {
  @apply px-4 py-3 border-t border-gray-200 bg-gray-50;
}

/* アラートコンポーネント */
.alert {
  @apply p-4 rounded-lg border-l-4;
}

.alert-success {
  @apply bg-green-50 border-green-400 text-green-800;
}

.alert-danger {
  @apply bg-red-50 border-red-400 text-red-800;
}

.alert-warning {
  @apply bg-yellow-50 border-yellow-400 text-yellow-800;
}

.alert-info {
  @apply bg-blue-50 border-blue-400 text-blue-800;
}

/* バッジコンポーネント */
.badge {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-primary {
  @apply bg-blue-100 text-blue-800;
}

.badge-success {
  @apply bg-green-100 text-green-800;
}

.badge-danger {
  @apply bg-red-100 text-red-800;
}

.badge-warning {
  @apply bg-yellow-100 text-yellow-800;
}

.badge-gray {
  @apply bg-gray-100 text-gray-800;
}

/* ドロップダウンコンポーネント */
.dropdown {
  @apply relative inline-block text-left;
}

.dropdown-menu {
  @apply absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none;
}

.dropdown-item {
  @apply block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 transition-colors;
}

/* テーブルコンポーネント */
.table {
  @apply min-w-full divide-y divide-gray-200;
}

.table thead {
  @apply bg-gray-50;
}

.table th {
  @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
}

.table td {
  @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
}

.table tbody tr:nth-child(even) {
  @apply bg-gray-50;
}

/* テキスト配置の強制 */
/* .text-left {
  text-align: left !important;
}

.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
} */

/* レスポンシブユーティリティ */
.container {
  @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

.container-sm {
  @apply max-w-3xl mx-auto px-4 sm:px-6;
}

/* フレックスユーティリティ */
.flex-center {
  @apply flex items-center justify-center;
}

.flex-between {
  @apply flex items-center justify-between;
}

/* テキストユーティリティ */
.text-truncate {
  @apply truncate;
}

/* スペーシングユーティリティ */
.space-y-4 > * + * {
  @apply mt-4;
}

.space-y-6 > * + * {
  @apply mt-6;
}

/* ホバーエフェクト */
.hover-lift {
  @apply transition-transform duration-200 hover:-translate-y-1;
}

.hover-shadow {
  @apply transition-shadow duration-200 hover:shadow-lg;
}