/* 全站配色。
   色系由 <html data-palette="..."> 決定，明亮／深色由 Bootstrap 的
   <html data-bs-theme="light|dark"> 決定，兩者都存在使用者的瀏覽器裡。
   要新增色系，複製一組 [data-palette="..."] 改三個顏色即可。 */

:root,
:root[data-palette="blue"] {            /* 學術藍（預設） */
    --brand: #3a6ea5;
    --brand-dark: #2c5580;
    --brand-light: #eaf1f8;
}
:root[data-palette="green"] {           /* 沉穩綠 */
    --brand: #3f7d63;
    --brand-dark: #30604c;
    --brand-light: #e9f3ee;
}
:root[data-palette="brick"] {           /* 暖磚紅 */
    --brand: #b0563c;
    --brand-dark: #8b422d;
    --brand-light: #faeeea;
}
:root[data-palette="plum"] {            /* 墨紫 */
    --brand: #6a5a8c;
    --brand-dark: #52456e;
    --brand-light: #f0edf6;
}
:root[data-palette="slate"] {           /* 石墨（最低調） */
    --brand: #4a5a6a;
    --brand-dark: #384552;
    --brand-light: #eef1f4;
}

:root {
    --ink: #22303c;
    --muted: #6b7a88;
    --page-bg: #f6f7f9;
    --surface: #ffffff;
    --line: #e3e7ec;
}

/* 深色模式：只覆蓋中性色，品牌色沿用上面選的那組 */
:root[data-bs-theme="dark"] {
    --ink: #e6eaee;
    --muted: #9aa7b4;
    --page-bg: #161a1f;
    --surface: #1e242b;
    --line: #2e3740;
}
:root[data-bs-theme="dark"][data-palette="blue"]  { --brand: #6fa3d6; --brand-dark: #8ab8e4; --brand-light: #243444; }
:root[data-bs-theme="dark"][data-palette="green"] { --brand: #6cb392; --brand-dark: #86c5a7; --brand-light: #1f332b; }
:root[data-bs-theme="dark"][data-palette="brick"] { --brand: #d98a70; --brand-dark: #e6a48e; --brand-light: #3a2620; }
:root[data-bs-theme="dark"][data-palette="plum"]  { --brand: #a595c4; --brand-dark: #b9abd4; --brand-light: #2b2536; }
:root[data-bs-theme="dark"][data-palette="slate"] { --brand: #8fa2b5; --brand-dark: #a6b6c6; --brand-light: #262e36; }

body {
    background: var(--page-bg);
    color: var(--ink);
}

/* ── 導覽列：白底 + 細下框，不用黑色 ───────────────── */
.navbar {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}
.navbar .navbar-brand { color: var(--brand); font-weight: 600; }
.navbar .navbar-brand:hover { color: var(--brand-dark); }
.navbar .nav-link {
    color: var(--muted);
    border-radius: .375rem;
    padding-inline: .75rem;
}
.navbar .nav-link:hover { color: var(--brand); background: var(--brand-light); }
.navbar .nav-link.active { color: var(--brand); background: var(--brand-light); font-weight: 600; }
.navbar-toggler { border-color: var(--line); }

/* ── 按鈕與連結 ─────────────────────────────────── */
.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-dark);
    --bs-btn-hover-border-color: var(--brand-dark);
    --bs-btn-active-bg: var(--brand-dark);
    --bs-btn-active-border-color: var(--brand-dark);
    --bs-btn-disabled-bg: var(--brand);
    --bs-btn-disabled-border-color: var(--brand);
}
.btn-outline-primary {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-bg: var(--brand);
    --bs-btn-active-border-color: var(--brand);
}
a { color: var(--brand); }
a:hover { color: var(--brand-dark); }
.badge.bg-primary { background: var(--brand) !important; }

/* ── 卡片、清單 ─────────────────────────────────── */
.card {
    background: var(--surface);
    border-color: var(--line);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.card-header.bg-light {
    background: color-mix(in srgb, var(--surface) 92%, var(--ink)) !important;
    border-color: var(--line);
}
.list-group-item.active { background: var(--brand); border-color: var(--brand); }
.list-group-item-action:hover { background: var(--brand-light); }

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

.form-control:focus, .form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .2rem rgba(0, 0, 0, .08);
}

/* 配色選單裡的小色塊 */
.palette-dot {
    display: inline-block;
    width: 1rem; height: 1rem;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .15);
    vertical-align: -.15rem;
}