/**
 * MotoMaintenance - カスタムスタイル
 * デザインシステム
 */

/* ======================
   CSS Variables (カラーパレット)
   ====================== */
:root {
    /* Primary Colors */
    --primary: #1565c0;
    --primary-light: #1976d2;
    --primary-dark: #0d47a1;

    /* Accent Colors */
    --accent: #ff8f00;
    --accent-light: #ffa726;

    /* Category Colors (彩度を抑えた版) */
    --cat-initial: #ef6c00;
    --cat-daily: #2e7d32;
    --cat-custom: #7b1fa2;
    --cat-running: #1565c0;

    /* Neutral Colors */
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-500: #6c757d;
    --gray-600: #555;
    --gray-800: #343a40;

    /* Semantic Colors */
    --success: #2e7d32;
    --danger: #c62828;
    --info: #0277bd;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-full: 50%;
}

/* ======================
   Base Typography
   ====================== */
body {
    font-size: 16px;
    line-height: 1.6;
    color: var(--gray-800);
}

h5 {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--gray-800);
}

h6 {
    font-size: 1.125rem;
    font-weight: 600;
}

.card-title {
    font-size: 1.1rem;
    font-weight: 600;
}

/* ======================
   コントラスト改善
   ====================== */
.text-muted {
    color: var(--gray-600) !important;
}

/* ======================
   Button Styles
   ====================== */
.btn {
    border-radius: var(--radius-md);
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
}

.btn-outline-primary:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    transform: translateY(-2px);
}

.btn-outline-secondary:hover {
    transform: translateY(-2px);
}

/* ボタン内アイコンサイズ統一 */
.btn .material-icons {
    font-size: 20px;
    vertical-align: middle;
    line-height: 1;
}

/* ======================
   Card Styles
   ====================== */
.card {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease;
}

.card:hover {
    box-shadow: var(--shadow-md);
}

/* バイク選択カード */
.bike-card {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: none;
    border-radius: var(--radius-lg);
    background: white;
}

.bike-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.bike-card:active {
    transform: scale(0.98);
}

.bike-icon {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: var(--radius-full);
    background: var(--gray-100);
    padding: 8px;
}

/* ======================
   Form Styles
   ====================== */
.form-control {
    border-radius: var(--radius-md);
    border-color: var(--gray-200);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.15);
}

.form-label {
    font-weight: 500;
    color: var(--gray-800);
    margin-bottom: var(--space-sm);
}

.input-group-text {
    background-color: var(--gray-100);
    border-color: var(--gray-200);
    color: var(--gray-600);
}

/* 給油入力フォーム */
.fuel-form .form-control {
    font-size: 1.5rem;
    padding: var(--space-md);
    text-align: center;
}

.fuel-form .form-label {
    font-size: 1.1rem;
    font-weight: 500;
}

.fuel-form .btn-primary {
    font-size: 1.25rem;
    padding: var(--space-md) var(--space-xl);
}

/* ======================
   燃費表示
   ====================== */
.fuel-efficiency {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary);
}

.fuel-efficiency-unit {
    font-size: 1rem;
    color: var(--gray-600);
    font-weight: 500;
}

/* ======================
   前回ODO表示
   ====================== */
.last-odo {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    border-left: 4px solid var(--primary);
}

/* ======================
   成功メッセージ
   ====================== */
.success-message {
    animation: fadeInUp 0.4s ease-out;
}

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

/* ======================
   カテゴリカラー（彩度を抑えた版）
   ====================== */
.category-initial {
    border-left: 4px solid var(--cat-initial);
    background: linear-gradient(90deg, rgba(239, 108, 0, 0.05) 0%, transparent 100%);
}

.category-daily {
    border-left: 4px solid var(--cat-daily);
    background: linear-gradient(90deg, rgba(46, 125, 50, 0.05) 0%, transparent 100%);
}

.category-custom {
    border-left: 4px solid var(--cat-custom);
    background: linear-gradient(90deg, rgba(123, 31, 162, 0.05) 0%, transparent 100%);
}

.category-running_cost {
    border-left: 4px solid var(--cat-running);
    background: linear-gradient(90deg, rgba(21, 101, 192, 0.05) 0%, transparent 100%);
}

/* ======================
   Table Styles
   ====================== */
.table {
    --bs-table-bg: transparent;
}

.table > thead {
    background-color: var(--gray-100);
}

.table > thead > tr > th {
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    padding: var(--space-md);
    border-bottom: 2px solid var(--gray-200);
}

.table > tbody > tr > td {
    padding: var(--space-md);
    vertical-align: middle;
}

.table-hover > tbody > tr:hover {
    background-color: rgba(25, 118, 210, 0.04);
}

/* ======================
   Navigation
   ====================== */
.navbar {
    box-shadow: var(--shadow-sm);
}

.navbar-brand {
    font-weight: 600;
}

/* ======================
   Alert Improvements
   ====================== */
.alert {
    border: none;
    border-radius: var(--radius-md);
}

.alert-success {
    background-color: rgba(46, 125, 50, 0.1);
    color: var(--success);
}

.alert-info {
    background-color: rgba(2, 119, 189, 0.1);
    color: var(--info);
}

/* ======================
   Stats Page
   ====================== */
.stat-card {
    text-align: center;
    padding: var(--space-lg);
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
}

.stat-label {
    font-size: 0.875rem;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ======================
   Spacing Utilities
   ====================== */
.section-title {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--gray-200);
}

/* ======================
   モバイル最適化
   ====================== */
@media (max-width: 576px) {
    body {
        font-size: 15px;
    }

    h5 {
        font-size: 1.25rem;
    }

    .bike-icon {
        width: 64px;
        height: 64px;
    }

    .fuel-form .form-control {
        font-size: 1.25rem;
    }

    .navbar-brand {
        font-size: 1rem;
    }

    .fuel-efficiency {
        font-size: 2rem;
    }

    .btn .material-icons {
        font-size: 18px;
    }

    .table > thead > tr > th,
    .table > tbody > tr > td {
        padding: var(--space-sm);
        font-size: 0.875rem;
    }
}

/* ======================
   Print Styles
   ====================== */
@media print {
    .btn, .navbar, .no-print {
        display: none !important;
    }

    .card {
        box-shadow: none;
        border: 1px solid var(--gray-200);
    }
}