/* 1. 色の変数を定義 (ライトモードがデフォルト) */
:root {
    --bg-color: #f0f8ff; /* AliceBlue */
    --text-color: #333;
    --main-bg-color: #fff;
    --main-shadow: 0 2px 4px rgba(0,0,0,0.1);
    --header-link-color: #1e90ff; /* DodgerBlue */
    --article-title-color: #4682b4; /* SteelBlue */
    --em-color: #888;
    --sidebar-bg-color: #f8f9fa; /* Bootstrap's .bg-light */
    --sidebar-text-color: #212529; /* Bootstrap's default text color */
    --border-color: #dee2e6; /* Bootstrap's border color */
    --card-bg-color: #fff;
    --card-title-color: #212529;
}

/* 2. ダークモード用の色の変数を定義 */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #1a202c;
        --text-color: #e2e8f0;
        --main-bg-color: #2d3748;
        --main-shadow: 0 2px 8px rgba(0,0,0,0.4);
        --header-link-color: #63b3ed;
        --article-title-color: #90cdf4;
        --em-color: #a0aec0;
        --sidebar-bg-color: #1c2636;
        --sidebar-text-color: #e2e8f0;
        --border-color: #4a5568;
        --card-bg-color: #384454;
        --card-title-color: #e2e8f0;
    }
}

/* 3. 既存のスタイルで変数を使うように変更 */
body {
    font-family: sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
    background-color: var(--bg-color);
    color: var(--text-color);
}

header h1 a {
    color: var(--header-link-color);
    text-decoration: none;
}

.hero-header {
    position: relative;
    padding: 4rem 2rem;
    margin-bottom: 2rem;
    background-image: linear-gradient(to right, rgba(45, 55, 72, 0.7), rgba(26, 32, 44, 0.7)), url('images/pete_fieldradio_header.jpg');
    background-size: contain;
    background-position: right center;
    background-repeat: no-repeat;
    border-radius: .3rem;
    color: #fff;
}

.hero-header h1 a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}

main {
    max-width: 1200px;
    margin: 0 auto;
    background-color: var(--main-bg-color);
    padding: 20px;
    border-radius: 8px;
    box-shadow: var(--main-shadow);
}

article h2 {
    color: var(--article-title-color);
}

article em {
    color: var(--em-color);
}

/* 記事内の画像をレスポンシブにする */
.post-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.5rem auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 4. Bootstrapのコンポーネントの色を上書き */
.bg-light {
    background-color: var(--sidebar-bg-color) !important; /* importantで強制的に上書き */
    color: var(--sidebar-text-color);
}

.p-4.mb-3.bg-light.rounded h4 {
    color: var(--sidebar-text-color);
}

footer.border-top {
    border-top-color: var(--border-color) !important;
}

.text-muted {
    color: var(--em-color) !important;
}

/* 5. Index page card styles */
.card {
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
}

.card .card-title a {
    color: var(--card-title-color) !important; /* Use important to override .text-dark */
}

/* 6. ダークモード用の追加上書き */
@media (prefers-color-scheme: dark) {
    /* カード本文の文字色 */
    .card .card-text {
        color: var(--text-color);
    }

    /* ページネーションのボタン */
    .page-link {
        background-color: var(--card-bg-color);
        color: var(--header-link-color);
        border-color: var(--border-color);
    }

    .page-link:hover {
        background-color: var(--main-bg-color);
    }

    .page-item.active .page-link {
        background-color: var(--header-link-color);
        border-color: var(--header-link-color);
        color: var(--main-bg-color);
    }

    .page-item.disabled .page-link {
        background-color: var(--card-bg-color);
        color: var(--em-color);
        border-color: var(--border-color);
    }

    /* Admin Page Styles */
    .card-header {
        background-color: var(--main-bg-color);
        border-bottom: 1px solid var(--border-color);
        color: var(--text-color);
    }

    .table {
        --bs-table-bg: var(--card-bg-color) !important;
        --bs-table-striped-bg: var(--main-bg-color) !important;
        --bs-table-striped-color: var(--text-color) !important;
        --bs-table-hover-bg: var(--bg-color) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }

    .table-striped tbody tr:nth-of-type(odd) {
        background-color: rgba(255, 255, 255, 0.05);
    }

    .table-hover tbody tr:hover {
        background-color: rgba(255, 255, 255, 0.075);
    }

    .form-control {
        background-color: var(--bg-color);
        color: var(--text-color);
        border-color: var(--border-color);
    }

    .form-control:focus {
        background-color: var(--bg-color);
        color: var(--text-color);
        border-color: var(--header-link-color);
        box-shadow: 0 0 0 0.25rem rgba(var(--header-link-color), 0.25);
    }

    .alert-success {
        background-color: #2f4f4f; /* DarkSlateGray */
        color: #f0fff0; /* Honeydew */
        border-color: #2f4f4f;
    }

    .btn-secondary {
        background-color: #4a5568;
        border-color: #4a5568;
    }
}

/* Sidebar Links Styling */
.sidebar-links ul {
    list-style: none;
    padding-left: 0;
}

.sidebar-links li {
    font-size: 0.85em;
    margin-bottom: 0.5em;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.sidebar-links a {
    font-size: 0.85em;
    word-wrap: break-word;
    overflow-wrap: break-word;
}