/**
 * brand.css —— 全站设计变量与品牌组件（设计系统地基）
 *
 * 视觉定调（2026-07-31 去 AI 味重做）：墨 + 松绿，【全站 app UI 不使用多色渐变】。
 * 导航栏 / 主按钮 / 品牌块一律【实色】；原靛紫 135° 渐变全部废除。
 *
 * 用法：页面 <link rel="stylesheet" href="assets/css/brand.css">（admin/ 子目录用 ../assets/），
 * 放在 bootstrap 之后以覆盖默认值。新写样式一律引用本文件变量，禁止硬编码色值与渐变。
 *
 * 图标：全站统一 lucide（本地 assets/js/lucide.min.js），下方 .lucide 规则把 SVG 收成 1em
 * 行内尺寸，使 lucide 与原 Bootstrap Icons 的排版占位一致。
 */

:root {
    /* 品牌色：深松绿（实色，无渐变） */
    --brand: #1f6f5c;
    --brand-2: #185a4a;        /* hover / 按压，同色相加深，不作渐变配伍 */
    --brand-dark: #14493c;
    --brand-soft: rgba(31, 111, 92, 0.08);
    --brand-soft-border: rgba(31, 111, 92, 0.28);
    --on-brand: #ffffff;       /* 品牌色上的文字 */

    /* 中性色阶：墨黑 + 冷白 */
    --ink-1: #14202b;
    --ink-2: #475569;
    --ink-3: #64748b;
    --surface: #ffffff;
    --surface-2: #f6f7f9;
    --line: #e3e7ec;

    /* 圆角与阴影（克制，非霓虹） */
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 14px;
    --shadow-sm: 0 1px 2px rgba(20, 32, 43, 0.06), 0 1px 3px rgba(20, 32, 43, 0.08);
    --shadow: 0 4px 12px rgba(20, 32, 43, 0.08);
    --shadow-lg: 0 10px 24px rgba(20, 32, 43, 0.12);

    --focus-ring: 0 0 0 3px rgba(31, 111, 92, 0.30);
}

/* 兼容别名：旧代码若引用 --brand-gradient，回退为实色，杜绝渐变复活 */
:root { --brand-gradient: var(--brand); }

/* ── 全站统一导航栏（实色松绿） ── */
.navbar-brand-site {
    background: var(--brand);
    box-shadow: var(--shadow-sm);
}
.navbar-brand-site .navbar-brand,
.navbar-brand-site .nav-link,
.navbar-brand-site .navbar-text {
    color: var(--on-brand) !important;
    font-weight: 500;
}
.navbar-brand-site .nav-link:hover,
.navbar-brand-site .nav-link:focus {
    color: rgba(255, 255, 255, 0.82) !important;
}
.navbar-brand-site .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.4);
    color: var(--on-brand);
}

/* ── 品牌主按钮（实色，非渐变） ── */
.btn-brand {
    background: var(--brand);
    border: 1px solid var(--brand);
    color: var(--on-brand);
    font-weight: 600;
    border-radius: var(--radius);
    padding: 0.6rem 1.6rem;
    box-shadow: var(--shadow-sm);
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.btn-brand:hover,
.btn-brand:focus {
    background: var(--brand-2);
    border-color: var(--brand-2);
    color: var(--on-brand);
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}
.btn-brand:active { transform: translateY(0); }
.btn-brand:disabled {
    opacity: 0.6;
    transform: none;
    box-shadow: var(--shadow-sm);
}
/* 描边次按钮 */
.btn-brand-outline {
    background: transparent;
    border: 1px solid var(--brand-soft-border);
    color: var(--brand);
    font-weight: 600;
    border-radius: var(--radius);
}
.btn-brand-outline:hover {
    background: var(--brand-soft);
    color: var(--brand-dark);
}

/* ── 通用品牌小件 ── */
.text-brand { color: var(--brand) !important; }
.bg-brand { background: var(--brand) !important; color: var(--on-brand) !important; }
.bg-brand-soft {
    background: var(--brand-soft);
    border: 1px solid var(--brand-soft-border);
    border-radius: var(--radius);
}
.card-brand {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    background: var(--surface);
}
/* 实色品牌页头（替代原渐变 hero） */
.brand-header {
    background: var(--brand);
    color: var(--on-brand);
    border-radius: var(--radius-lg);
}
.brand-header-ink {
    background: var(--ink-1);
    color: var(--on-brand);
    border-radius: var(--radius-lg);
}

/* 键盘焦点可见性（全站统一，勿移除） */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring) !important;
}

/* ── lucide 图标行内化（与 Bootstrap Icons 占位一致） ── */
svg.lucide,
.lucide-icon {
    width: 1em;
    height: 1em;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.125em;
    flex-shrink: 0;
    display: inline-block;
}
/* 较大图标修饰类（按需） */
.lucide-lg { width: 1.5em; height: 1.5em; }
.lucide-xl { width: 2em; height: 2em; }

/* ─────────────────────────────────────────────────────────────
   全站收敛：把 Bootstrap「primary」语义在 CSS 层重映射为松绿。
   一次生效全站，无需逐页改 btn-primary / bg-primary / 徽章 / 焦点环。
   功能性语义色（success/danger/warning/info）保持 Bootstrap 原色不动。
   ───────────────────────────────────────────────────────────── */
:root {
    --bs-primary: #1f6f5c;
    --bs-primary-rgb: 31, 111, 92;
    --bs-link-color: #1f6f5c;
    --bs-link-color-rgb: 31, 111, 92;
    --bs-link-hover-color: #185a4a;
    --bs-link-hover-color-rgb: 24, 90, 74;
}
.btn-primary,
.btn-primary:focus,
.btn-primary.focus {
    background-color: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--brand-2);
    border-color: var(--brand-2);
    color: var(--on-brand);
}
.btn-outline-primary {
    color: var(--brand);
    border-color: var(--brand);
}
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
}
.bg-primary { background-color: var(--brand) !important; }
.text-primary { color: var(--brand) !important; }
.border-primary { border-color: var(--brand) !important; }
.badge.bg-primary,
.badge.text-bg-primary,
.text-bg-primary {
    background-color: var(--brand) !important;
    color: var(--on-brand) !important;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 0.25rem rgba(31, 111, 92, 0.22);
}
.form-check-input:checked {
    background-color: var(--brand);
    border-color: var(--brand);
}
.form-check-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 0.25rem rgba(31, 111, 92, 0.22);
}
.page-item.active .page-link {
    background-color: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
}
.page-link { color: var(--brand); }
.page-link:hover { color: var(--brand-2); }
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--brand);
    color: var(--on-brand);
}
.list-group-item.active {
    background-color: var(--brand);
    border-color: var(--brand);
}
a:not(.btn):not(.navbar-brand):not(.nav-link):not(.dropdown-item):not(.page-link):not(.list-group-item) {
    color: var(--brand);
}
a:not(.btn):not(.navbar-brand):not(.nav-link):not(.dropdown-item):not(.page-link):not(.list-group-item):hover {
    color: var(--brand-2);
}