/* mrtg.jkv.tw 深色/淺色主題
 * 由各 .cfg 的 AddHead[_] 以及手寫的 index.html 掛入。
 * 注意：MRTG 產生的頁面把 AddHead 的內容放在它自己的 <style> 之後，
 *       所以同樣權重下這裡的規則會勝出，不需要 !important。
 */

:root {
    color-scheme: light;

    /* --- 淺色（預設值） --- */
    --bg: #ffffff;
    --fg: #1a1a1a;
    --muted: #5f6368;
    --rule: #aaaaaa;
    --rule-width: 2px;
    --border: #cfd4da;
    --link: #330099;
    --link-hover: #5533cc;
    --in: #00a000;
    --out: #0000ff;
    --btn-bg: #f1f3f5;
    --btn-fg: #1a1a1a;
    --btn-border: #cfd4da;

    /* 圖檔是 MRTG 產生的白底 PNG，深色模式下用濾鏡反轉 */
    --graph-filter: none;
    --smoothing: auto;
    --smoothing-moz: auto;

    /* --- 深色調色盤：實際色值只寫在這裡一份，下面兩個區塊只負責指過去 --- */
    --d-bg: #1c1f24;
    --d-fg: #c7ccd3;          /* 刻意不用接近純白，降低光暈/刺眼感 */
    --d-muted: #8a919b;
    --d-rule: #2e333b;
    --d-rule-width: 1px;      /* MRTG 原本是 2px 實線，深色下太搶眼 */
    --d-border: #2e333b;
    --d-link: #8ab4f8;
    --d-link-hover: #adc8fa;
    --d-in: #5ec97f;
    --d-out: #7fa6ec;
    --d-btn-bg: #262b32;
    --d-btn-fg: #c7ccd3;
    --d-btn-border: #363c45;

    /* invert 不做滿 + 稍微壓對比：白底變炭灰而不是純黑，黑字變淺灰而不是純白 */
    --d-graph-filter: invert(0.88) hue-rotate(180deg) contrast(0.9);
    /* 想要回到最初那版高對比（比較銳利）的話，改用下面這行，
       並把 --d-bg 改回 #16181c、--d-fg 改回 #e3e5e8、--d-rule-width 改回 2px：
    --d-graph-filter: invert(0.92) hue-rotate(180deg);
    */
}

/* 跟隨系統設定（使用者未手動指定時） */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --bg: var(--d-bg);
        --fg: var(--d-fg);
        --muted: var(--d-muted);
        --rule: var(--d-rule);
        --rule-width: var(--d-rule-width);
        --border: var(--d-border);
        --link: var(--d-link);
        --link-hover: var(--d-link-hover);
        --in: var(--d-in);
        --out: var(--d-out);
        --btn-bg: var(--d-btn-bg);
        --btn-fg: var(--d-btn-fg);
        --btn-border: var(--d-btn-border);
        --graph-filter: var(--d-graph-filter);
        --smoothing: antialiased;
        --smoothing-moz: grayscale;
    }
}

/* 手動指定深色（權重與上面相同，靠順序勝出） */
:root[data-theme="dark"] {
    color-scheme: dark;

    --bg: var(--d-bg);
    --fg: var(--d-fg);
    --muted: var(--d-muted);
    --rule: var(--d-rule);
    --rule-width: var(--d-rule-width);
    --border: var(--d-border);
    --link: var(--d-link);
    --link-hover: var(--d-link-hover);
    --in: var(--d-in);
    --out: var(--d-out);
    --btn-bg: var(--d-btn-bg);
    --btn-fg: var(--d-btn-fg);
    --btn-border: var(--d-btn-border);
    --graph-filter: var(--d-graph-filter);
    --smoothing: antialiased;
    --smoothing-moz: grayscale;
}

html {
    background-color: var(--bg);
}

body {
    background-color: var(--bg);
    color: var(--fg);
    /* 深色底上的淺色字用灰階抗鋸齒，筆畫不會顯得又粗又銳利 */
    -webkit-font-smoothing: var(--smoothing);
    -moz-osx-font-smoothing: var(--smoothing-moz);
}

hr {
    border: none;
    border-top: 1px solid var(--rule);
}

a:link,
a:visited {
    color: var(--link);
    text-decoration: none;
}

a:hover,
a:active {
    color: var(--link-hover);
    text-decoration: none;
}

/* MRTG 產生頁面的區塊分隔線 */
div {
    border-bottom-color: var(--rule);
    border-bottom-width: var(--rule-width);
}

div#footer,
div#legend,
div#sysdetails {
    color: var(--muted);
}

div#footer address {
    color: var(--muted);
}

/* In / Out 的顏色在深色底下要夠亮、但不刺眼 */
div table .in th,
div table td span.in {
    color: var(--in);
}

div table .out th,
div table td span.out {
    color: var(--out);
}

/* 圖表：白底 PNG 在深色模式反轉成深底，hue-rotate 讓線條顏色維持原樣 */
img {
    filter: var(--graph-filter);
}

/* 舊版 index.html 用 border="1" 畫的外框 */
img[border="1"] {
    border: 1px solid var(--border);
}

/* 主題切換按鈕 */
#theme-toggle {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 9999;
    padding: 6px 12px;
    font: 13px/1.2 -apple-system, "Segoe UI", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    color: var(--btn-fg);
    background-color: var(--btn-bg);
    border: 1px solid var(--btn-border);
    border-radius: 6px;
    cursor: pointer;
    opacity: 0.85;
}

#theme-toggle:hover {
    opacity: 1;
}

#theme-toggle,
#theme-toggle:hover {
    filter: none;
}

@media print {
    #theme-toggle {
        display: none;
    }
}