/*
 * ╔══════════════════════════════════════════════════════════════╗
 * ║           CGo UI Library — cgo_clr.css                      ║
 * ║           颜色与配色系统 (Color & Palette System)            ║
 * ║                                                              ║
 * ║  版本：1.0.0 · 2026-06                                       ║
 * ║  作者：Central Go / NaL                                      ║
 * ║                                                              ║
 * ║  内容：                                                      ║
 * ║    1. 全局色彩 Token（亮色 / 暗色主题）                       ║
 * ║    2. 语义色（成功 / 警告 / 危险 / 信息）                     ║
 * ║    3. 管理台权限色                                            ║
 * ║    4. 玻璃态（Glassmorphism）色                               ║
 * ║    5. 地图专用色（线路图背景、站点描边等）                     ║
 * ║    6. 北京地铁各线路标志色                                    ║
 * ║    7. 用户头像预制配色                                        ║
 * ╚══════════════════════════════════════════════════════════════╝
 */

/* =====================================================
   §1  全局色彩 Token — 亮色模式 (Light Mode)
   ===================================================== */
:root {
    /* ── 背景层 ── */
    --bg-color:        #f8f9fa;   /* 页面底层背景 */
    --bg-body:         var(--bg-color);
    --card-bg:         #ffffff;   /* 卡片 / 表格 / 容器背景 */
    --panel-bg:        #ffffff;   /* 面板背景 */
    --bg-card:         var(--card-bg);

    /* ── 文字 ── */
    --text-main:       #001d31;   /* 主文字（品牌深蓝黑） */
    --text-light:      #666666;   /* 次要 / 辅助文字 */
    --text-color:      var(--text-main);

    /* ── 边框 / 分割线 ── */
    --border-color:    #dee2e6;

    /* ── 品牌主色 ── */
    --primary-color:   #001d31;   /* 深蓝：按钮 / 高亮 / 选中 */
    --primary-hover:   #004060;
    --btn-text:        #ffffff;

    /* ── 导航 ── */
    --header-bg:       #ffffff;
    --header-height:   60px;
    --footer-bg:       #ffffff;

    /* ── 次级按钮 (灰色系) ── */
    --btn-info-bg:     #e9ecef;
    --btn-info-text:   #495057;
    --btn-info-hover:  #dee2e6;

    /* ── 表格 ── */
    --table-head-bg:   #f1f3f5;
    --table-head-text: #001d31;
    --table-row-hover: #f8f9fa;
    --table-cell-border: #eeeeee;

    /* ── 选项卡 ── */
    --tab-bg:          #f8f9fa;
    --tab-hover:       rgba(0, 0, 0, 0.03);

    /* ── 帮助弹窗 ── */
    --help-code-bg:    #f7f9fa;
    --filter-tag-bg:   #f8f9fa;
    --filter-toolbar-bg: #eef2f7;
}

/* =====================================================
   §1  全局色彩 Token — 暗色模式 (Dark Mode)
   ===================================================== */
[data-theme="dark"] {
    --bg-color:        #1a1a1a;
    --bg-body:         var(--bg-color);
    --card-bg:         #1f2020;
    --panel-bg:        #1f2020;
    --bg-card:         var(--card-bg);

    --text-main:       #e5e8ea;
    --text-light:      #a0b0b9;
    --text-color:      var(--text-main);

    --border-color:    #333333;

    --primary-color:   #006098;   /* 暗模式下提亮，适配深底 */
    --primary-hover:   #0070b0;
    --btn-text:        #ffffff;

    --header-bg:       #1f2020;
    --footer-bg:       #1f2020;

    --btn-info-bg:     #373838;
    --btn-info-text:   #e5e8ea;
    --btn-info-hover:  #4a4b4c;

    --table-head-bg:   #2c2d2e;
    --table-head-text: #e5e8ea;
    --table-row-hover: #2a2b2c;
    --table-cell-border: #333333;

    --tab-bg:          #2c2d2e;
    --tab-hover:       rgba(255, 255, 255, 0.05);

    --help-code-bg:    #2a2a2a;
    --filter-tag-bg:   #2c2d2e;
    --filter-toolbar-bg: #2c2d2e;
}

/* =====================================================
   §2  语义色 (Semantic Colors)
   ===================================================== */
:root {
    /* 成功 */
    --success-color:   #137333;
    --success-bg:      #e6ffed;
    --success-border:  #a8d5b5;

    /* 警告 */
    --warning-color:   #856404;
    --warning-bg:      rgba(255, 243, 205, 0.5);
    --warning-border:  rgba(255, 238, 186, 0.5);

    /* 危险 */
    --danger-color:    #d93025;
    --danger-hover:    #b3261e;
    --danger-bg:       #fff1f1;
    --danger-border:   #e58f8f;

    /* 信息 */
    --info-color:      #006098;
    --info-bg:         #e8f0fe;
    --info-border:     #b8d0ee;

    /* 对比模式 — 差异 */
    --diff-bg:         #efbdc3;
    --diff-text:       #d93025;
    /* 对比模式 — 相同 */
    --same-bg:         #e6ffed;
    --same-text:       #137333;
    /* 选中列 */
    --selected-bg:     #e8f0fe;
}

[data-theme="dark"] {
    --success-color:   #81c995;
    --success-bg:      #1b3e20;
    --success-border:  #2d5c36;

    --warning-color:   #ffd970;
    --warning-bg:      rgba(100, 75, 0, 0.2);
    --warning-border:  rgba(120, 90, 0, 0.3);

    --danger-color:    #ff8a80;
    --danger-hover:    #ff5252;
    --danger-bg:       #3b0f0f;
    --danger-border:   #7a2424;

    --info-color:      #7ab8e0;
    --info-bg:         #1a2a3a;
    --info-border:     #2a4060;

    --diff-bg:         #5c1b1b;
    --diff-text:       #ff8a80;
    --same-bg:         #1b3e20;
    --same-text:       #81c995;
    --selected-bg:     rgba(66, 133, 244, 0.2);
}

/* =====================================================
   §3  管理台权限色 (Admin Permission Colors)
   ===================================================== */
:root {
    --permission-enabled:         #16803d;
    --permission-enabled-soft:    #edf8f1;
    --permission-enabled-border:  #badfc8;

    --permission-disabled:        #52637a;
    --permission-disabled-soft:   #f0f4f8;
    --permission-disabled-border: #b9c5d4;

    --permission-hidden:          #c62828;
    --permission-hidden-soft:     #fff1f1;
    --permission-hidden-border:   #e58f8f;

    --permission-inherit:         #64748b;
    --permission-inherit-soft:    #f2f5f8;
    --permission-inherit-border:  #d2dbe6;
}

/* =====================================================
   §4  玻璃态色 (Glassmorphism)
   ===================================================== */
:root {
    --glass-bg:        rgba(255, 255, 255, 0.7);
    --glass-border:    rgba(255, 255, 255, 0.4);
    --glass-shadow:    rgba(0, 0, 0, 0.08);
    --sidebar-width:   220px;
}

[data-theme="dark"] {
    --glass-bg:        rgba(31, 32, 32, 0.6);
    --glass-border:    rgba(255, 255, 255, 0.05);
    --glass-shadow:    rgba(0, 0, 0, 0.25);
}

/* =====================================================
   §5  地图专用色 (Map-specific Colors)
   ===================================================== */
:root {
    --map-bg:              #ffffff;
    --station-stroke:      #001d31;
    --not-open-color:      #bdcbd2;
    --panel-header-bg:     #001d31;
    --panel-header-text:   #ffffff;
    --close-btn-color:     rgba(255, 255, 255, 0.6);
    --capsule-bg:          #ffffff;
    --capsule-text:        #333333;
    --stops-tag-bg:        #f0f2f5;
    --control-bg:          #ffffff;
    --ctrl-btn-bg:         #f0f2f5;
    --ctrl-icon:           #333333;
    --ctrl-hover:          #e1e4e8;
    --divider:             #e0e0e0;
    --list-hover:          #f0f2f5;
    --sta-stroke-width-cn: 2px;
    --sta-stroke-width-en: 1.75px;
}

[data-theme="dark"] {
    --map-bg:              #1a1a1a;
    --station-stroke:      #bdcbd2;
    --not-open-color:      #4e4e4e;
    --panel-header-bg:     #373838;
    --panel-header-text:   #e5e8ea;
    --close-btn-color:     #78848b;
    --capsule-bg:          #1f2020;
    --capsule-text:        #78848b;
    --stops-tag-bg:        #78848b;
    --control-bg:          #1f2020;
    --ctrl-btn-bg:         #373838;
    --ctrl-icon:           #78848b;
    --ctrl-hover:          #4f4f4f;
    --divider:             #333333;
    --list-hover:          #373838;
}

/* =====================================================
   §6  北京地铁线路标志色 (Beijing Metro Line Colors)
   ===================================================== */

/* 地铁线路色工具类：可直接写 class="line-bg line-1号线八通线" */
.line-bg { color: #ffffff; display: inline-block; }

.line-bg.line-1号线八通线,
.filter-tag[data-line="1号线八通线"].active { background-color: #c23a30; color: #fff; }

.line-bg.line-2号线,
.filter-tag[data-line="2号线"].active        { background-color: #006098; color: #fff; }

.line-bg.line-3号线,
.filter-tag[data-line="3号线"].active        { background-color: #e60033; color: #fff; }

.line-bg.line-4号线大兴线,
.filter-tag[data-line="4号线大兴线"].active  { background-color: #008e9c; color: #fff; }

.line-bg.line-5号线,
.filter-tag[data-line="5号线"].active        { background-color: #a6217f; color: #fff; }

.line-bg.line-6号线,
.filter-tag[data-line="6号线"].active        { background-color: #d29700; color: #fff; }

.line-bg.line-7号线,
.filter-tag[data-line="7号线"].active        { background-color: #fac671; color: #001d31; }

.line-bg.line-8号线,
.filter-tag[data-line="8号线"].active        { background-color: #009b6b; color: #fff; }

.line-bg.line-9号线,
.filter-tag[data-line="9号线"].active        { background-color: #8fc31f; color: #001d31; }

.line-bg.line-10号线,
.filter-tag[data-line="10号线"].active       { background-color: #009bc0; color: #fff; }

.line-bg.line-11号线,
.filter-tag[data-line="11号线"].active       { background-color: #ed796b; color: #fff; }

.line-bg.line-12号线,
.filter-tag[data-line="12号线"].active       { background-color: #c76b00; color: #fff; }

.line-bg.line-13号线,
.filter-tag[data-line="13号线"].active       { background-color: #f9e700; color: #001d31; }

.line-bg.line-14号线,
.filter-tag[data-line="14号线"].active       { background-color: #d5a7a1; color: #001d31; }

.line-bg.line-15号线,
.filter-tag[data-line="15号线"].active       { background-color: #6a357d; color: #fff; }

.line-bg.line-16号线,
.filter-tag[data-line="16号线"].active       { background-color: #76a32d; color: #fff; }

.line-bg.line-17号线,
.filter-tag[data-line="17号线"].active       { background-color: #00a9a9; color: #fff; }

.line-bg.line-18号线,
.filter-tag[data-line="18号线"].active       { background-color: #5654a2; color: #fff; }

.line-bg.line-19号线,
.filter-tag[data-line="19号线"].active       { background-color: #d6abc1; color: #001d31; }

.line-bg.line-亦庄线,
.filter-tag[data-line="亦庄线"].active       { background-color: #e40077; color: #fff; }

.line-bg.line-亦庄T1线,
.filter-tag[data-line="亦庄T1线"].active     { background-color: #e6081b; color: #fff; }

.line-bg.line-房山线,
.filter-tag[data-line="房山线"].active        { background-color: #e46022; color: #fff; }

.line-bg.line-燕房线,
.filter-tag[data-line="燕房线"].active        { background-color: #e46022; color: #fff; }

.line-bg.line-S1线,
.filter-tag[data-line="S1线"].active         { background-color: #b25921; color: #fff; }

.line-bg.line-昌平线,
.filter-tag[data-line="昌平线"].active        { background-color: #de82b2; color: #001d31; }

.line-bg.line-西郊线,
.filter-tag[data-line="西郊线"].active        { background-color: #e6081b; color: #fff; }

.line-bg.line-首都机场线,
.filter-tag[data-line="首都机场线"].active    { background-color: #a29bbb; color: #001d31; }

.line-bg.line-大兴机场线,
.filter-tag[data-line="大兴机场线"].active    { background-color: #004ba0; color: #fff; }

/* 通用"全部"标签 */
.filter-tag[data-line="all"].active          { background: var(--primary-color); color: #fff; }

/* ── 线路行内标签 ── */
.line-tag {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 11px;
    white-space: nowrap;
    vertical-align: middle;
}

/* ── CSS 变量：线路色（供 JS 动态写入时参考） ── */
:root {
    --line-color-1:          #c23a30;
    --line-color-2:          #006098;
    --line-color-3:          #e60033;
    --line-color-4:          #008e9c;
    --line-color-5:          #a6217f;
    --line-color-6:          #d29700;
    --line-color-7:          #fac671;
    --line-color-8:          #009b6b;
    --line-color-9:          #8fc31f;
    --line-color-10:         #009bc0;
    --line-color-11:         #ed796b;
    --line-color-12:         #c76b00;
    --line-color-13:         #f9e700;
    --line-color-14:         #d5a7a1;
    --line-color-15:         #6a357d;
    --line-color-16:         #76a32d;
    --line-color-17:         #00a9a9;
    --line-color-18:         #5654a2;
    --line-color-19:         #d6abc1;
    --line-color-yizhuang:   #e40077;
    --line-color-fangshan:   #e46022;
    --line-color-yanfang:    #e46022;
    --line-color-s1:         #b25921;
    --line-color-changping:  #de82b2;
    --line-color-xijiao:     #e6081b;
    --line-color-airport:    #a29bbb;
    --line-color-daxing:     #004ba0;
}

/* =====================================================
   §7  用户头像预制配色 (Avatar Preset Colors)
   ===================================================== */
:root {
    /* 15色头像旧色板（保留用于后向兼容） */
    --avatar-color-red:       #d93025;
    --avatar-color-orange:    #e46022;
    --avatar-color-amber:     #d29700;
    --avatar-color-yellow:    #e8b800;
    --avatar-color-lime:      #8fc31f;
    --avatar-color-green:     #009655;
    --avatar-color-teal:      #008e9c;
    --avatar-color-sky:       #009bc0;
    --avatar-color-blue:      #006098;
    --avatar-color-indigo:    #3a4db8;
    --avatar-color-purple:    #6a357d;
    --avatar-color-pink:      #de82b2;
    --avatar-color-brown:     #b25921;
    --avatar-color-gray:      #78848b;
    --avatar-color-dark:      #001d31;

    /* 30色头像新色板 (自 cgoauth/app.js) */
    --avatar-color-0:  #ef4444;
    --avatar-color-1:  #f87171;
    --avatar-color-2:  #f97316;
    --avatar-color-3:  #fb923c;
    --avatar-color-4:  #f59e0b;
    --avatar-color-5:  #eab308;
    --avatar-color-6:  #fef08a;
    --avatar-color-7:  #84cc16;
    --avatar-color-8:  #a3e635;
    --avatar-color-9:  #22c55e;
    --avatar-color-10: #10b981;
    --avatar-color-11: #059669;
    --avatar-color-12: #064e3b;
    --avatar-color-13: #0d9488;
    --avatar-color-14: #14b8a6;
    --avatar-color-15: #22d3ee;
    --avatar-color-16: #38bdf8;
    --avatar-color-17: #2563eb;
    --avatar-color-18: #1d4ed8;
    --avatar-color-19: #1e3a8a;
    --avatar-color-20: #4f46e5;
    --avatar-color-21: #6366f1;
    --avatar-color-22: #8b5cf6;
    --avatar-color-23: #c084fc;
    --avatar-color-24: #d946ef;
    --avatar-color-25: #ec4899;
    --avatar-color-26: #f472b6;
    --avatar-color-27: #fda4af;
    --avatar-color-28: #64748b;
    --avatar-color-29: #334155;
}

/* 头像色旧工具类（保留） */
.avatar-color-red    { color: var(--avatar-color-red);    fill: var(--avatar-color-red);    }
.avatar-color-orange { color: var(--avatar-color-orange); fill: var(--avatar-color-orange); }
.avatar-color-amber  { color: var(--avatar-color-amber);  fill: var(--avatar-color-amber);  }
.avatar-color-yellow { color: var(--avatar-color-yellow); fill: var(--avatar-color-yellow); }
.avatar-color-lime   { color: var(--avatar-color-lime);   fill: var(--avatar-color-lime);   }
.avatar-color-green  { color: var(--avatar-color-green);  fill: var(--avatar-color-green);  }
.avatar-color-teal   { color: var(--avatar-color-teal);   fill: var(--avatar-color-teal);   }
.avatar-color-sky    { color: var(--avatar-color-sky);    fill: var(--avatar-color-sky);    }
.avatar-color-blue   { color: var(--avatar-color-blue);   fill: var(--avatar-color-blue);   }
.avatar-color-indigo { color: var(--avatar-color-indigo); fill: var(--avatar-color-indigo); }
.avatar-color-purple { color: var(--avatar-color-purple); fill: var(--avatar-color-purple); }
.avatar-color-pink   { color: var(--avatar-color-pink);   fill: var(--avatar-color-pink);   }
.avatar-color-brown  { color: var(--avatar-color-brown);  fill: var(--avatar-color-brown);  }
.avatar-color-gray   { color: var(--avatar-color-gray);   fill: var(--avatar-color-gray);   }
.avatar-color-dark   { color: var(--avatar-color-dark);   fill: var(--avatar-color-dark);   }

/* 头像色新工具类 */
.avatar-color-0  { color: var(--avatar-color-0);  fill: var(--avatar-color-0);  }
.avatar-color-1  { color: var(--avatar-color-1);  fill: var(--avatar-color-1);  }
.avatar-color-2  { color: var(--avatar-color-2);  fill: var(--avatar-color-2);  }
.avatar-color-3  { color: var(--avatar-color-3);  fill: var(--avatar-color-3);  }
.avatar-color-4  { color: var(--avatar-color-4);  fill: var(--avatar-color-4);  }
.avatar-color-5  { color: var(--avatar-color-5);  fill: var(--avatar-color-5);  }
.avatar-color-6  { color: var(--avatar-color-6);  fill: var(--avatar-color-6);  }
.avatar-color-7  { color: var(--avatar-color-7);  fill: var(--avatar-color-7);  }
.avatar-color-8  { color: var(--avatar-color-8);  fill: var(--avatar-color-8);  }
.avatar-color-9  { color: var(--avatar-color-9);  fill: var(--avatar-color-9);  }
.avatar-color-10 { color: var(--avatar-color-10); fill: var(--avatar-color-10); }
.avatar-color-11 { color: var(--avatar-color-11); fill: var(--avatar-color-11); }
.avatar-color-12 { color: var(--avatar-color-12); fill: var(--avatar-color-12); }
.avatar-color-13 { color: var(--avatar-color-13); fill: var(--avatar-color-13); }
.avatar-color-14 { color: var(--avatar-color-14); fill: var(--avatar-color-14); }
.avatar-color-15 { color: var(--avatar-color-15); fill: var(--avatar-color-15); }
.avatar-color-16 { color: var(--avatar-color-16); fill: var(--avatar-color-16); }
.avatar-color-17 { color: var(--avatar-color-17); fill: var(--avatar-color-17); }
.avatar-color-18 { color: var(--avatar-color-18); fill: var(--avatar-color-18); }
.avatar-color-19 { color: var(--avatar-color-19); fill: var(--avatar-color-19); }
.avatar-color-20 { color: var(--avatar-color-20); fill: var(--avatar-color-20); }
.avatar-color-21 { color: var(--avatar-color-21); fill: var(--avatar-color-21); }
.avatar-color-22 { color: var(--avatar-color-22); fill: var(--avatar-color-22); }
.avatar-color-23 { color: var(--avatar-color-23); fill: var(--avatar-color-23); }
.avatar-color-24 { color: var(--avatar-color-24); fill: var(--avatar-color-24); }
.avatar-color-25 { color: var(--avatar-color-25); fill: var(--avatar-color-25); }
.avatar-color-26 { color: var(--avatar-color-26); fill: var(--avatar-color-26); }
.avatar-color-27 { color: var(--avatar-color-27); fill: var(--avatar-color-27); }
.avatar-color-28 { color: var(--avatar-color-28); fill: var(--avatar-color-28); }
.avatar-color-29 { color: var(--avatar-color-29); fill: var(--avatar-color-29); }

/* 等级卡片渐变 (用户等级系统) */
:root {
    --level-default-gradient: linear-gradient(135deg, #1282b8, #009655);
    --level-test-gradient:    linear-gradient(135deg, #e98913, #f7b52c);
    --level-prime-gradient:   linear-gradient(135deg, #1c1887, #5f1985);
    --level-admin-gradient:   linear-gradient(135deg, #5c1c24, #e5757e);
}