/*
 * Facile 深色配色（dark.css）—— 纯自适应：跟随访问者系统的深浅色偏好（prefers-color-scheme），
 * 没有手动开关、不写 cookie，也不需要 JS。由 components/header.php 在其它样式表之后引入。
 *
 * 为什么选择器都带 html 前缀：bootstrap.css（Bootswatch 4.6.0）和 style.css 都是浅色底，
 * 每条选择器多带一个 html 元素以取得更高优先级，再配合"最后加载"，保证能覆盖它们；
 * 少数写死在模板里的内联颜色（页脚、文章信息）只能用 !important 压。
 */

@media (prefers-color-scheme: dark) {

    html {
        color-scheme: dark;
    }

    html body {
        background-color: #121212;
        color: #e8e8e8;
    }

    /* ========== 通用：边框、分割线、引用、杂色 ========== */

    html hr {
        border-top-color: #343a40;
    }

    html .post-page article .post-content hr {
        background-color: #343a40;
        border-top-color: #343a40;
    }

    html .border {
        border-color: #343a40 !important;
    }

    html .border-bottom {
        border-bottom-color: #343a40 !important;
    }

    html .post-page article .post-content blockquote {
        background-color: #1a1d20;
        border-left-color: #3a3f44;
        color: #b9bec4;
    }

    html #comments .comments-lists .comment-content blockquote {
        border-left-color: #3a3f44;
        color: #b9bec4;
    }

    html .text-muted {
        color: #9aa0a6 !important;
    }

    /* ========== 顶部导航 ========== */

    /* .bg-light 在导航上是毛玻璃白底，这里换成毛玻璃深底 */
    html .navbar.bg-light {
        background-color: rgba(18, 18, 18, .72) !important;
    }

    html .navbar-light .navbar-brand,
    html .navbar-light .navbar-nav .nav-link,
    html .navbar-light .navbar-text a {
        color: rgba(255, 255, 255, .92);
    }

    html .navbar-light .navbar-nav .nav-link:focus,
    html .navbar-light .navbar-nav .nav-link:hover {
        color: rgba(255, 255, 255, .72);
    }

    html .navbar-light .navbar-nav .active > .nav-link,
    html .navbar-light .navbar-nav .nav-link.active {
        color: #fff;
    }

    html .navbar-light .navbar-toggler {
        color: rgba(255, 255, 255, .7);
        /* 不要外框：浅色模式下 bootstrap 的 border-color 也是注释掉的，这里保持一致 */
        border-color: transparent;
    }

    /* 汉堡图标原本是黑色描边的 svg，换成白色描边 */
    html .navbar-light .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.7%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    /* ========== 页脚 ========== */

    html .foot {
        background-color: #16181a;
    }

    /* 页脚文字在模板里是内联颜色，只能 !important 覆盖 */
    html .foot > .container,
    html .foot a,
    html .foot .beian {
        color: #9aa0a6 !important;
    }

    /* ========== 卡片、图片容器、头像 ========== */

    html .card {
        background-color: #191c1f;
        border-color: #343a40;
    }

    html .bg-light {
        background-color: rgba(25, 28, 31, .95) !important;
    }

    html .post-list .post .header-img a,
    html .post-page .header-img a {
        background-color: #191c1f;
        border-color: #343a40;
    }

    html .avatar {
        background-color: #2a2f34;
    }

    html .blogo {
        box-shadow: 0 1px 8px rgba(0, 0, 0, .65) !important;
    }

    /* ========== 文章列表 / 标题 / 文章信息 ========== */

    html .post-list .post .post-title,
    html .post-page .post-title {
        color: #f1f1f1;
    }

    html .post-list .post .post-title a,
    html .post-page .post-title a {
        color: #ececec;
    }

    html .post-list .post .post-title a:hover,
    html .post-page .post-title a:hover,
    html .post-list .post .post-title a:focus,
    html .post-page .post-title a:focus {
        color: #ff5a4d;
    }

    html .archive-title h1 {
        color: #a8adb3;
    }

    /* 日期/作者/阅读量：模板里是内联色 */
    html .post-info {
        color: #9aa0a6 !important;
    }

    html .post-info a {
        color: inherit;
    }

    html .post-page .post-navigation a {
        color: #d5d9dd;
    }

    html .post-page .post-navigation a:hover {
        color: #ff5a4d;
    }

    html .post-page .post-navigation div {
        color: #f1f1f1;
    }

    html .post-page .category-tag i,
    html .post-page .category-tag span {
        color: #c9ced3;
    }

    /* ========== 文章正文 ========== */

    /* 代码块：正文的 pre 在你的 style.css 里已经是深色底 + 浅色字，保持不动；
       但 vs2015.css 的 .hljs 会给出浅灰底（#f2f2f2），深色模式下一律压成透明，让 pre 的底色显示出来 */
    html .hljs {
        background: transparent;
        color: #f8f8f2;
    }

    html .post-page article .post-content p,
    html .post-page article .post-content li,
    html .post-page article .post-content td,
    html .post-page article .post-content dd {
        color: #e8e8e8;
    }

    html .post-page article .post-content a {
        color: #6cc4ff;
    }

    html .post-page article .post-content h1,
    html .post-page article .post-content h2,
    html .post-page article .post-content h3,
    html .post-page article .post-content h4,
    html .post-page article .post-content h5,
    html .post-page article .post-content h6 {
        color: #f7f7f7;
    }

    html .post-page article .post-content h1 code,
    html .post-page article .post-content h2 code,
    html .post-page article .post-content h3 code,
    html .post-page article .post-content h4 code,
    html .post-page article .post-content h5 code,
    html .post-page article .post-content h6 code {
        background: #262a2e;
        color: #ffd866;
    }

    html .post-page article .post-content p code,
    html .post-page article .post-content li code,
    html .post-page article .post-content td code,
    html .post-page article .post-content blockquote p code {
        background: #262a2e;
        color: #ffd866;
    }

    html .post-page article .post-content img {
        border-color: #343a40;
        box-shadow: 0 2px 20px rgba(0, 0, 0, .55);
    }

    /* 正文里的表格（app.js 会包成 .table.table-striped.table-bordered.table-hover） */
    html .table {
        color: #e8e8e8;
    }

    html .table td,
    html .table th {
        border-color: #343a40;
    }

    html .table thead th {
        border-color: #343a40;
    }

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

    html .table-hover tbody tr:hover {
        color: #fff;
        background-color: rgba(255, 255, 255, .07);
    }

    html .table-bordered,
    html .table-bordered td,
    html .table-bordered th {
        border-color: #343a40;
    }

    /* ========== 侧边栏 ========== */

    html .sidebar section h2 {
        color: #f1f1f1;
    }

    html .sidebar section ul li a {
        color: #d5d9dd;
    }

    html .sidebar section ul li a:hover {
        color: #ff5a4d;
    }

    html .sidebar .latest-comment .media-body p {
        color: #c9ced3;
    }

    /* 主题配色开关 */
    html .sidebar .change-color label {
        color: #d5d9dd;
    }

    html .custom-control-label::before {
        background-color: #1c1f22;
        border-color: #3a3f44;
    }

    /* ========== 分页 ========== */

    html .pagination .page-link {
        color: #d5d9dd;
        background-color: #1c1f22;
        border-color: #343a40;
    }

    html .pagination .page-link:hover {
        color: #fff;
        background-color: #31373d;
        border-color: #3a3f44;
    }

    html .pagination .page-item.active .page-link {
        color: #fff;
        background-color: #c72c17;
        border-color: #c72c17;
    }

    html .pagination .page-item.disabled .page-link {
        color: #6b7075;
        background-color: #161819;
        border-color: #2a2f34;
    }

    /* ========== 表单（搜索框、评论框、Emoji 面板） ========== */

    html .form-control {
        color: #e8e8e8;
        background-color: rgba(255, 255, 255, .06);
        border-color: #3a3f44;
    }

    html .form-control:focus {
        color: #fff;
        background-color: rgba(255, 255, 255, .09);
        border-color: #f57f72;
    }

    html .form-control::placeholder {
        color: #8b9197;
    }

    html .custom-select {
        color: #e8e8e8;
        background-color: #1c1f22;
        border-color: #3a3f44;
    }

    /* 无变体的 .btn（Emoji 分类按钮等）：排除掉各种变体，避免压过 btn-primary / btn-outline-primary */
    html .btn:not(.btn-primary):not(.btn-outline-primary):not(.btn-dark):not(.btn-outline-dark):not(.btn-outline-light):not(.btn-link) {
        color: #e0e0e0;
        background-color: #22262a;
        border-color: #3a3f44;
    }

    html .btn:not(.btn-primary):not(.btn-outline-primary):not(.btn-dark):not(.btn-outline-dark):not(.btn-outline-light):not(.btn-link):hover {
        color: #fff;
        background-color: #2b3036;
        border-color: #454b52;
    }

    html #comments .comment-input #emoji-panel {
        color: #e8e8e8;
    }

    html #comments .comment-input #emoji-panel #emoji-classification button:hover,
    html #comments .comment-input #emoji-panel #emoji-classification .selected {
        background: rgba(255, 255, 255, .12);
    }

    html #comments .comment-input #emoji-panel .card,
    html #comments .comment-input #emoji-panel .card-body {
        background-color: #191c1f;
    }

    /* ========== 评论区 ========== */

    html #comments .comments-lists .comment-author .comment-info .author {
        color: #e0e0e0;
    }

    html #comments .comments-lists .comment-author .comment-info .comment-time {
        color: #9aa0a6;
    }

    html #comments .comments-lists .comment-content p,
    html #comments .comments-lists .comment-content li,
    html #comments .comments-lists .comment-content td {
        color: #e8e8e8;
    }

    html #comments .comments-lists .comment-content a {
        color: #6cc4ff;
    }

    html #comments .comments-lists .comment-content h1,
    html #comments .comments-lists .comment-content h2,
    html #comments .comments-lists .comment-content h3,
    html #comments .comments-lists .comment-content h4,
    html #comments .comments-lists .comment-content h5,
    html #comments .comments-lists .comment-content h6 {
        color: #f7f7f7;
    }

    html #comments .comments-lists .comment-content h1 code,
    html #comments .comments-lists .comment-content h2 code,
    html #comments .comments-lists .comment-content h3 code,
    html #comments .comments-lists .comment-content h4 code,
    html #comments .comments-lists .comment-content h5 code,
    html #comments .comments-lists .comment-content h6 code,
    html #comments .comments-lists .comment-content p code,
    html #comments .comments-lists .comment-content li code,
    html #comments .comments-lists .comment-content td code {
        background: #262a2e;
        color: #ffd866;
    }

    /* 评论区的代码块没有深色底，这里补一个，免得在深色页面里出现一块亮色 */
    html #comments .comments-lists .comment-content pre {
        background-color: #1e242c;
        border-radius: .6rem;
        overflow-x: auto;
    }

    html .text-avatar,
    html .pingback {
        color: #f1f1f1;
    }

    /* ========== 友链 / 404 / 统计页 ========== */

    html .page-links .logo {
        background-color: #22262a;
    }

    html .page-links .link a {
        color: #d5d9dd;
    }

    html .statistics-page .statistics-card {
        background: #1e2226;
        border: 1px solid #2a2f34;
    }

    html .statistics-page .statistics-card h3,
    html .statistics-page .statistics-card h4 {
        color: #f1f1f1;
    }

    /* 统计页的 ECharts 是 canvas 且写死了深色文字，这里整体反色 + 回正色相 */
    html .statistics-page #category-chart canvas,
    html .statistics-page #post-chart canvas,
    html .statistics-page #comment-chart canvas {
        filter: invert(1) hue-rotate(180deg);
    }
}