.bg-gradient-to-b {
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.from-blue-100 {
    --tw-gradient-from: #dbeafe;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(219 234 254 / 0));
}

.to-blue-200 {
    --tw-gradient-to: #bfdbfe;
}

.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-blue-500 {
    --tw-gradient-from: #3b82f6;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(59 130 246 / 0));
}

.to-blue-600 {
    --tw-gradient-to: #2563eb;
}

@media (max-width: 640px) {
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
    }
    
    table {
        font-size: 0.875rem;
    }
    
    th, td {
        white-space: nowrap;
        padding: 0.5rem 0.75rem;
    }
} 

/* BoatRace App - カスタムスタイル */

/* フェードインアニメーション */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.3s ease-out;
}

/* カスタムスクロールバー */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* フォーカスリング統一 */
.focus-ring:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    border-color: #3b82f6;
}

/* ホバーエフェクト */
.hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* カード共通スタイル */
.card {
    @apply bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
    @apply shadow-md;
    transform: translateY(-1px);
}

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

.card-title {
    @apply text-lg font-semibold text-gray-900;
}

.card-content {
    @apply px-6 py-4;
}

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

/* ボタンコンポーネント */
.btn {
    @apply inline-flex items-center justify-center font-medium rounded-md transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
}

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

.btn-secondary {
    @apply bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500;
}

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

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

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

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

.btn-md {
    @apply px-4 py-2 text-base;
}

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

/* フォームコンポーネント */
.form-input {
    @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500;
}

.form-select {
    @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500;
}

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

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

/* テーブルスタイル */
.table-responsive {
    @apply overflow-x-auto shadow ring-1 ring-black ring-opacity-5 rounded-lg;
}

.table {
    @apply min-w-full divide-y divide-gray-200;
}

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

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

.table-body {
    @apply bg-white divide-y divide-gray-200;
}

.table-row {
    @apply hover:bg-gray-50 transition-colors duration-150;
}

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

/* アラート・通知 */
.alert {
    @apply border-l-4 p-4 rounded-r-lg shadow-sm mb-4;
}

.alert-success {
    @apply bg-green-100 border-green-400 text-green-700;
}

.alert-error {
    @apply bg-red-100 border-red-400 text-red-700;
}

.alert-warning {
    @apply bg-yellow-100 border-yellow-400 text-yellow-700;
}

.alert-info {
    @apply bg-blue-100 border-blue-400 text-blue-700;
}

/* ローディングスピナー */
.spinner {
    @apply border-4 border-gray-200 border-t-blue-600 rounded-full animate-spin;
}

.spinner-sm {
    @apply w-4 h-4;
}

.spinner-md {
    @apply w-8 h-8;
}

.spinner-lg {
    @apply w-12 h-12;
}

/* バッジ・ラベル */
.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-warning {
    @apply bg-yellow-100 text-yellow-800;
}

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

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

/* ステータス表示 */
.status-online {
    @apply w-2 h-2 bg-green-400 rounded-full;
}

.status-offline {
    @apply w-2 h-2 bg-red-400 rounded-full;
}

.status-warning {
    @apply w-2 h-2 bg-yellow-400 rounded-full;
}

/* ナビゲーション */
.nav-link {
    @apply text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200;
}

.nav-link.active {
    @apply text-blue-600 bg-blue-50;
}

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

.dropdown-menu {
    @apply absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200;
}

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

/* モーダル */
.modal-backdrop {
    @apply fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity;
}

.modal-content {
    @apply inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle;
}

/* ページネーション */
.pagination {
    @apply flex justify-center mt-6;
}

.pagination-list {
    @apply inline-flex -space-x-px;
}

.pagination-item {
    @apply px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 transition-colors duration-150;
}

.pagination-item.active {
    @apply text-blue-600 border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700;
}

.pagination-item:first-child {
    @apply rounded-l-lg;
}

.pagination-item:last-child {
    @apply rounded-r-lg;
}

/* ユーティリティクラス */
.text-gradient {
    @apply bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent;
}

.bg-gradient-primary {
    @apply bg-gradient-to-r from-blue-500 to-blue-600;
}

.bg-gradient-success {
    @apply bg-gradient-to-r from-green-500 to-green-600;
}

.bg-gradient-warning {
    @apply bg-gradient-to-r from-yellow-500 to-orange-500;
}

.bg-gradient-danger {
    @apply bg-gradient-to-r from-red-500 to-red-600;
}

/* レスポンシブ調整 */
@media (max-width: 640px) {
    .table-responsive {
        @apply text-xs;
    }
    
    .card-content {
        @apply px-4 py-3;
    }
    
    .btn-md {
        @apply px-3 py-1.5 text-sm;
    }
}

/* プリント用スタイル */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        @apply text-black bg-white;
    }
    
    .card {
        @apply shadow-none border border-gray-300;
        page-break-inside: avoid;
    }
}

/* ダークモード対応（将来の拡張用） */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #1f2937;
        --bg-secondary: #374151;
        --text-primary: #f9fafb;
        --text-secondary: #d1d5db;
    }
}

/* カスタムアニメーション */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-in-right {
    animation: slideInRight 0.3s ease-out;
}

.slide-in-left {
    animation: slideInLeft 0.3s ease-out;
}

/* 特殊効果 */
.glass-effect {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.8);
}

.shadow-glow {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

/* フォーカス可視性向上 */
.focus-visible:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* 選択範囲のスタイル */
::selection {
    background: rgba(59, 130, 246, 0.2);
    color: inherit;
}