/* 柏の葉キッズラボ運動能力評価システム - カスタムスタイル */

/* 基本スタイル */
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ホバーエフェクト強化 */
.hover-lift:hover {
    transform: translateY(-2px);
    transition: transform 0.2s ease-in-out;
}

/* カスタムボタンスタイル */
.btn-primary {
    @apply bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

.btn-secondary {
    @apply bg-gray-600 hover:bg-gray-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

.btn-success {
    @apply bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

.btn-warning {
    @apply bg-yellow-600 hover:bg-yellow-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

.btn-danger {
    @apply bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

/* レーダーチャート用スタイル */
.chart-container {
    position: relative;
    height: 400px;
    width: 400px;
    margin: 0 auto;
}

/* フォームスタイル強化 */
.form-group label {
    @apply block text-sm font-medium text-gray-700 mb-1;
}

.form-control {
    @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200;
}

.form-control:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* カードスタイル */
.card {
    @apply bg-white rounded-lg shadow-md p-6;
}

.card-header {
    @apply border-b border-gray-200 pb-4 mb-4;
}

.card-title {
    @apply text-xl font-semibold text-gray-800;
}

.card-body {
    @apply space-y-4;
}

/* アラートスタイル */
.alert {
    @apply p-4 rounded-lg border;
}

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

.alert-error {
    @apply bg-red-50 border-red-200 text-red-800;
}

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

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

/* スピナー */
.spinner {
    @apply inline-block w-4 h-4 border-2 border-white border-t-transparent rounded-full;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 運動動作アイコンのカラーリング */
.movement-icon-running { color: #ef4444; }
.movement-icon-jumping { color: #f97316; }
.movement-icon-throwing { color: #eab308; }
.movement-icon-catching { color: #22c55e; }
.movement-icon-dribbling { color: #3b82f6; }
.movement-icon-rolling { color: #6366f1; }
.movement-icon-balance { color: #a855f7; }

/* モバイル対応 */
@media (max-width: 768px) {
    .chart-container {
        height: 300px;
        width: 300px;
    }
    
    .grid-mobile-single {
        grid-template-columns: 1fr;
    }
    
    .text-mobile-sm {
        font-size: 0.875rem;
    }
    
    .p-mobile-4 {
        padding: 1rem;
    }
}

/* プリント用スタイル */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-break {
        page-break-after: always;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.4;
    }
    
    .chart-container {
        max-width: 100%;
        height: auto;
    }
}

/* レスポンシブ強化 */
@media (min-width: 640px) {
    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    
    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* 入力フィールドの状態表示 */
.form-control.is-valid {
    @apply border-green-400 focus:ring-green-500;
}

.form-control.is-invalid {
    @apply border-red-400 focus:ring-red-500;
}

/* ラジオボタンのカスタムスタイル */
.radio-custom {
    @apply text-blue-600 focus:ring-blue-500 focus:ring-2;
}

.radio-custom:checked {
    @apply bg-blue-600 border-blue-600;
}

/* チェックボックスのカスタムスタイル */
.checkbox-custom {
    @apply text-blue-600 focus:ring-blue-500 focus:ring-2 rounded;
}

.checkbox-custom:checked {
    @apply bg-blue-600 border-blue-600;
}

/* セレクトボックスのカスタムスタイル */
.select-custom {
    @apply appearance-none bg-white bg-no-repeat;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-size: 1.5em 1.5em;
}

/* ツールチップ */
.tooltip {
    @apply relative;
}

.tooltip::before {
    content: attr(data-tooltip);
    @apply absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 text-xs text-white bg-gray-800 rounded opacity-0 pointer-events-none transition-opacity duration-200;
}

.tooltip:hover::before {
    @apply opacity-100;
}

/* ローディング状態 */
.loading {
    @apply opacity-50 pointer-events-none;
}

.loading::after {
    content: '';
    @apply absolute inset-0 flex items-center justify-center;
    background: rgba(255, 255, 255, 0.8);
}

.loading::after {
    content: '読み込み中...';
    @apply text-gray-600 font-medium;
}

/* タブボタンのスタイル */
.tab-button {
    @apply py-2 px-4 text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap border-b-2 border-transparent transition-colors duration-200;
}

.tab-button.active {
    @apply text-blue-600 border-blue-500;
}

/* テキスト切り取り */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 運動能力評価レベルタブのスタイル */
.movement-level-tab {
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    user-select: none;
}

.movement-level-tab:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.movement-level-tab.active {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    font-weight: 600;
}

.movement-level-details {
    min-height: 120px;
    transition: all 0.3s ease-in-out;
}

.movement-level-content {
    transition: opacity 0.2s ease-in-out;
}

.movement-level-content.hidden {
    opacity: 0;
}

.movement-level-content.block {
    opacity: 1;
}

/* レベル色分け */
.movement-level-tab[data-level="1"] {
    border-left: 4px solid #ef4444;
}

.movement-level-tab[data-level="2"] {
    border-left: 4px solid #f97316;
}

.movement-level-tab[data-level="3"] {
    border-left: 4px solid #eab308;
}

.movement-level-tab[data-level="4"] {
    border-left: 4px solid #22c55e;
}

.movement-level-tab[data-level="5"] {
    border-left: 4px solid #3b82f6;
}

/* レベルバッジ色分け */
.level-1-badge {
    @apply bg-red-100 text-red-800;
}

.level-2-badge {
    @apply bg-orange-100 text-orange-800;
}

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

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

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