/* カスタムスタイル */

/* ナビゲーションボタン */
.nav-btn {
    @apply px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200 hover:bg-blue-700;
}

.nav-btn.active {
    @apply bg-blue-600 text-white;
}

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

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

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

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

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

/* フォームスタイル */
.form-input {
    @apply border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

.form-select {
    @apply border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white;
}

.form-textarea {
    @apply border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-vertical;
}

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

.form-group {
    @apply mb-4;
}

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

/* テーブルスタイル */
.table-hover tbody tr:hover {
    @apply bg-gray-50;
}

/* ステータスバッジ */
.status-badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.status-active {
    @apply bg-green-100 text-green-800;
}

.status-inactive {
    @apply bg-red-100 text-red-800;
}

.status-pending {
    @apply bg-yellow-100 text-yellow-800;
}

.status-completed {
    @apply bg-blue-100 text-blue-800;
}

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

.status-paid {
    @apply bg-green-100 text-green-800;
}

.status-unpaid {
    @apply bg-red-100 text-red-800;
}

.status-hold {
    @apply bg-orange-100 text-orange-800;
}

/* モダールスタイル */
.modal {
    @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50;
}

.modal-content {
    @apply bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-screen overflow-y-auto;
}

.modal-header {
    @apply flex justify-between items-center p-6 border-b;
}

.modal-body {
    @apply p-6;
}

.modal-footer {
    @apply flex justify-end space-x-3 p-6 border-t bg-gray-50 mt-6;
}

/* プログレスバー */
.progress-bar {
    @apply w-full bg-gray-200 rounded-full h-2.5;
}

.progress-fill {
    @apply bg-blue-600 h-2.5 rounded-full transition-all duration-300;
}

/* 燃料レベルゲージ */
.fuel-gauge {
    @apply relative w-full h-4 bg-gray-200 rounded-full overflow-hidden;
}

.fuel-level {
    @apply h-full rounded-full transition-all duration-300;
}

.fuel-level-high {
    @apply bg-green-500;
}

.fuel-level-medium {
    @apply bg-yellow-500;
}

.fuel-level-low {
    @apply bg-red-500;
}

.fuel-level-critical {
    @apply bg-red-700;
}

/* アラートメッセージ */
.alert {
    @apply p-4 rounded-md;
}

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

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

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

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

/* ローディングスピナー */
.loading {
    @apply fixed inset-0 bg-white bg-opacity-75 flex items-center justify-center z-50;
}

.loading-spinner {
    @apply text-center;
}

/* アニメーション */
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

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

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* レスポンシブテーブル */
@media (max-width: 768px) {
    .table-responsive {
        font-size: 0.875rem;
    }
    
    .table-responsive th,
    .table-responsive td {
        padding: 0.5rem;
    }
}

/* 印刷スタイル */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-only {
        display: block !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.3;
    }
    
    .page-break {
        page-break-after: always;
    }
}

/* フローティングアクションボタン */
.fab {
    @apply fixed bottom-6 right-6 w-14 h-14 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg flex items-center justify-center text-xl transition-all duration-200 z-40;
}

.fab:hover {
    transform: scale(1.1);
}

/* データ可視化 */
.chart-container {
    @apply relative;
    height: 400px;
}

/* 日本語フォント設定 */
body {
    font-feature-settings: "palt";
    -webkit-font-feature-settings: "palt";
}

/* セクション間のスペース */
.view-section {
    @apply animate-pulse;
}

.view-section.active {
    @apply animate-none;
}

/* カードのホバーエフェクト */
.card-hover {
    @apply transition-all duration-200 hover:shadow-lg hover:-translate-y-1;
}

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

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