/*
 * 企核 品牌主題(平台官網、平台後台、品牌後台共用;電商前台使用各品牌自訂色,不載入本檔)
 * 色系:深海青 x 暖金。主體色 #143C46、點綴 #D9A25F、淺底 #F2F6F4。品牌感受:穩定、可信、成熟。
 * 暖金只用於點綴(線條、圖示、重點按鈕底色),不用於白底上的內文;白底上的金色文字改用 --qh-gold-ink。
 */
:root {
    --qh-primary: #143C46;
    --qh-primary-rgb: 20, 60, 70;
    --qh-primary-hover: #0F313A;
    --qh-primary-active: #0B272F;
    --qh-primary-soft: #E3ECEA;
    --qh-primary-line: #B9CDCB;
    --qh-gold: #D9A25F;
    --qh-gold-rgb: 217, 162, 95;
    --qh-gold-hover: #CB9150;
    --qh-gold-soft: #F6EBDC;
    --qh-gold-ink: #8A5A22;
    --qh-bg: #F2F6F4;
    --qh-surface: #FFFFFF;
    --qh-ink: #17282C;
    --qh-muted: #5B6E72;
    --qh-line: #D5E0DE;
    --qh-side-text: #C9DAD8;
    --qh-side-muted: #8FB0B1;

    /* Bootstrap 5.3 變數 */
    --bs-primary: var(--qh-primary);
    --bs-primary-rgb: var(--qh-primary-rgb);
    --bs-primary-text-emphasis: #0B272F;
    --bs-primary-bg-subtle: var(--qh-primary-soft);
    --bs-primary-border-subtle: var(--qh-primary-line);
    --bs-body-bg: var(--qh-bg);
    --bs-body-color: var(--qh-ink);
    --bs-emphasis-color: #0B1A1D;
    --bs-secondary-color: rgba(23, 40, 44, .72);
    --bs-border-color: var(--qh-line);
    --bs-link-color: #1C5361;
    --bs-link-color-rgb: 28, 83, 97;
    --bs-link-hover-color: var(--qh-primary-active);
    --bs-link-hover-color-rgb: 11, 39, 47;
    --bs-focus-ring-color: rgba(var(--qh-primary-rgb), .22);
    --bs-heading-color: #102F37;

    /* 提示色調和到品牌色系:資訊用中段海青、提醒用暖金(成功與危險維持一般語意的綠與紅) */
    --bs-info: #3A8C99;
    --bs-info-rgb: 58, 140, 153;
    --bs-info-text-emphasis: #1E4E57;
    --bs-info-bg-subtle: #E1EFF1;
    --bs-info-border-subtle: #B6D7DC;
    --bs-warning: var(--qh-gold);
    --bs-warning-rgb: var(--qh-gold-rgb);
    --bs-warning-text-emphasis: #6B4518;
    --bs-warning-bg-subtle: var(--qh-gold-soft);
    --bs-warning-border-subtle: #EBCB9F;
}

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

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

/* ── 按鈕 ── */
.btn-primary {
    --bs-btn-bg: var(--qh-primary);
    --bs-btn-border-color: var(--qh-primary);
    --bs-btn-hover-bg: var(--qh-primary-hover);
    --bs-btn-hover-border-color: var(--qh-primary-hover);
    --bs-btn-active-bg: var(--qh-primary-active);
    --bs-btn-active-border-color: var(--qh-primary-active);
    --bs-btn-disabled-bg: var(--qh-primary);
    --bs-btn-disabled-border-color: var(--qh-primary);
    --bs-btn-focus-shadow-rgb: var(--qh-primary-rgb);
}
.btn-outline-primary {
    --bs-btn-color: var(--qh-primary);
    --bs-btn-border-color: var(--qh-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--qh-primary);
    --bs-btn-hover-border-color: var(--qh-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--qh-primary-hover);
    --bs-btn-active-border-color: var(--qh-primary-hover);
    --bs-btn-disabled-color: var(--qh-primary);
    --bs-btn-disabled-border-color: var(--qh-primary);
    --bs-btn-focus-shadow-rgb: var(--qh-primary-rgb);
}
/* 重點行動按鈕(官網、空白狀態的主要下一步):暖金底、深海青字 */
.btn-gold {
    --bs-btn-color: var(--qh-primary);
    --bs-btn-bg: var(--qh-gold);
    --bs-btn-border-color: var(--qh-gold);
    --bs-btn-hover-color: var(--qh-primary-active);
    --bs-btn-hover-bg: var(--qh-gold-hover);
    --bs-btn-hover-border-color: var(--qh-gold-hover);
    --bs-btn-active-color: var(--qh-primary-active);
    --bs-btn-active-bg: var(--qh-gold-hover);
    --bs-btn-active-border-color: var(--qh-gold-hover);
    --bs-btn-focus-shadow-rgb: var(--qh-gold-rgb);
    font-weight: 600;
}

/* 白底上的提示文字需要足夠對比 */
.text-info { color: #2E7480 !important; }
.text-warning { color: var(--qh-gold-ink) !important; }
.btn-info {
    --bs-btn-color: #fff; --bs-btn-bg: #3A8C99; --bs-btn-border-color: #3A8C99;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #2E7480; --bs-btn-hover-border-color: #2E7480;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #286670; --bs-btn-active-border-color: #286670;
}
.btn-outline-info {
    --bs-btn-color: #2E7480; --bs-btn-border-color: #3A8C99;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #3A8C99; --bs-btn-hover-border-color: #3A8C99;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #2E7480; --bs-btn-active-border-color: #2E7480;
}
.btn-warning {
    --bs-btn-color: var(--qh-primary); --bs-btn-bg: var(--qh-gold); --bs-btn-border-color: var(--qh-gold);
    --bs-btn-hover-color: var(--qh-primary-active); --bs-btn-hover-bg: var(--qh-gold-hover); --bs-btn-hover-border-color: var(--qh-gold-hover);
    --bs-btn-active-color: var(--qh-primary-active); --bs-btn-active-bg: var(--qh-gold-hover); --bs-btn-active-border-color: var(--qh-gold-hover);
}
.btn-outline-warning {
    --bs-btn-color: var(--qh-gold-ink); --bs-btn-border-color: var(--qh-gold);
    --bs-btn-hover-color: var(--qh-primary); --bs-btn-hover-bg: var(--qh-gold); --bs-btn-hover-border-color: var(--qh-gold);
    --bs-btn-active-color: var(--qh-primary); --bs-btn-active-bg: var(--qh-gold-hover); --bs-btn-active-border-color: var(--qh-gold-hover);
}

/* ── 表單 ── */
.form-control:focus, .form-select:focus {
    border-color: #7FA2A7;
    box-shadow: 0 0 0 .25rem rgba(var(--qh-primary-rgb), .16);
}
.form-check-input:checked {
    background-color: var(--qh-primary);
    border-color: var(--qh-primary);
}
.form-check-input:focus {
    border-color: #7FA2A7;
    box-shadow: 0 0 0 .25rem rgba(var(--qh-primary-rgb), .16);
}
.form-switch .form-check-input:focus:not(:checked) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%237FA2A7'/%3e%3c/svg%3e");
}
.form-range::-webkit-slider-thumb { background-color: var(--qh-primary); }
.form-range::-moz-range-thumb { background-color: var(--qh-primary); }

/* ── 元件 ── */
.nav-pills { --bs-nav-pills-link-active-bg: var(--qh-primary); }
.nav-tabs .nav-link.active { border-top: 2px solid var(--qh-gold); }
.pagination {
    --bs-pagination-active-bg: var(--qh-primary);
    --bs-pagination-active-border-color: var(--qh-primary);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--qh-primary-rgb), .16);
}
.list-group { --bs-list-group-active-bg: var(--qh-primary); --bs-list-group-active-border-color: var(--qh-primary); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--qh-primary); }
.progress, .progress-stacked { --bs-progress-bar-bg: var(--qh-primary); }
.table-primary { --bs-table-bg: var(--qh-primary-soft); --bs-table-border-color: var(--qh-primary-line); --bs-table-color: var(--qh-ink); }
.table th { color: var(--qh-muted); }
.card { box-shadow: 0 1px 2px rgba(20, 60, 70, .06), 0 1px 3px rgba(20, 60, 70, .08); }
.card-header.bg-white { border-bottom-color: var(--qh-line); }
.navbar.bg-white { border-bottom-color: var(--qh-line) !important; }

/* ── 側欄(平台後台、品牌後台) ── */
.sidebar { min-height: 100vh; width: 232px; background: var(--qh-primary); display: flex; flex-direction: column; }
.sidebar a {
    color: var(--qh-side-text); text-decoration: none; display: block; padding: .5rem .9rem; margin: 1px 0;
    border-radius: .4rem; font-size: .92rem; border-left: 3px solid transparent;
}
.sidebar a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.sidebar a.active { background: rgba(255, 255, 255, .11); color: #fff; border-left-color: var(--qh-gold); }
.sidebar a .bi { opacity: .9; }
.sidebar .group-label { color: var(--qh-side-muted); font-size: .75rem; letter-spacing: .08em; padding: .9rem 1rem .25rem; }
.sidebar-brand { display: flex; align-items: center; gap: .65rem; padding: .9rem .75rem 1rem; margin-bottom: .25rem; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.sidebar-brand img { width: 30px; height: 30px; flex: none; }
/* 品牌自己的 Logo(1:1):白底圓角,深海青側欄上看得清楚 */
.sidebar-brand img.sidebar-logo { border-radius: 8px; background: #fff; object-fit: cover; padding: 2px; }
.navbar-brand img.brand-logo { object-fit: cover; background: #fff; }
.sidebar-brand-name { color: #fff; font-weight: 700; font-size: .98rem; line-height: 1.25; }
.sidebar-brand-sub { color: var(--qh-side-muted); font-size: .72rem; letter-spacing: .06em; }
.sidebar-foot { margin-top: auto; padding: 1rem .9rem .5rem; color: var(--qh-side-muted); font-size: .72rem; letter-spacing: .04em; }
/* 手機版選單:md 以下由導覽列按鈕開啟的 offcanvas,內層沿用 .sidebar 的連結樣式,點按範圍加高 */
.sidebar-offcanvas { --bs-offcanvas-width: 280px; --bs-offcanvas-bg: var(--qh-primary); --bs-offcanvas-color: var(--qh-side-text); --bs-offcanvas-border-width: 0; }
.sidebar-offcanvas .sidebar { width: auto; min-height: 0; }
.sidebar-offcanvas .sidebar a { padding-top: .6rem; padding-bottom: .6rem; }

/* ── 品牌識別元件 ── */
.qh-mark { display: inline-block; width: 1.6em; height: 1.6em; vertical-align: -.35em; }
.qh-lockup { display: inline-flex; align-items: center; gap: .55rem; color: var(--qh-primary); text-decoration: none; }
.qh-lockup:hover { color: var(--qh-primary); }
.qh-lockup .qh-name { font-weight: 800; font-size: 1.2rem; letter-spacing: .12em; }
.qh-lockup .qh-en { font-size: .68rem; letter-spacing: .22em; color: var(--qh-muted); font-weight: 600; }
.qh-gold-rule { display: block; width: 48px; height: 3px; background: var(--qh-gold); border-radius: 2px; }
.text-gold { color: var(--qh-gold-ink) !important; }
.bg-qh { background: var(--qh-primary) !important; color: #fff; }
.bg-qh-soft { background: var(--qh-primary-soft) !important; }

/* ── 登入與註冊頁 ── */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.auth-card { width: 100%; max-width: 400px; border-top: 4px solid var(--qh-gold) !important; }
.auth-foot { margin-top: 1.25rem; text-align: center; color: var(--qh-muted); font-size: .8rem; letter-spacing: .04em; }
.auth-foot img { width: 18px; height: 18px; vertical-align: -4px; margin-right: .3rem; }

/* 官網導覽列(首頁、功能與費用、經銷合作共用) */
.home-nav { background: rgba(242, 246, 244, .92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--qh-line); }
.home-nav .nav-link { color: var(--qh-ink); font-size: .95rem; }
.home-nav .nav-link:hover { color: var(--qh-primary); }

/* 官網頁尾(central.partials.footer) */
.home-foot { color: var(--qh-muted); font-size: .85rem; }