/* ============================================================
   地图帮 · GeoNode 品牌覆盖
   依据《2026统一规范文档 / 设计规范-视觉系统_v1.md》§10。
   原则：不 fork GeoNode / MapStore 源码主题，仅用本覆盖层注入统一令牌与品牌色。
   令牌名称与取值与官网 / 用户中心 / 开放平台保持同名同值。
   P1：品牌色归一（链接 / 按钮 / 分页 / 标签 / 表单聚焦 / 进度条）。
   P2：组件品牌化（面板 / 卡片 / 表格 / 表单）+ 数据集市页统一到本令牌体系。
   MapStore 客户端主题与暗色模式为后续 P3。
   ============================================================ */

:root {
  /* 品牌色 */
  --accent-primary: #ff7b00;
  --accent-secondary: #ef6f00;
  --accent-dark: #e66a00;
  --accent-light: #fff3e8;
  --accent-glow: rgba(255, 123, 0, .22);
  --accent-rgb: 255, 123, 0;
  --gold: #f0900f;
  --accent-gradient: linear-gradient(135deg, #ff9a3c 0%, #ff7b00 55%, #ef6700 100%);

  /* 表面 */
  --bg-base: #fafafb;
  --bg-card: #ffffff;
  --bg-elevated: #ffffff;
  --bg-soft: #fff8f3;
  --bg-hover: #fff6ee;

  /* 文字 */
  --text-primary: #1b1b21;
  --text-secondary: #5b5b66;
  --text-muted: #9a9aa6;

  /* 边框 */
  --border-color: #ececf0;
  --border-soft: #f2f2f5;
  --border-strong: #e2e2e8;
  --border-hover: rgba(255, 123, 0, .5);

  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 12px rgba(15, 23, 42, .04);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, .08);
  --shadow-lg: 0 18px 48px rgba(15, 23, 42, .14);

  /* 圆角 */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
}

/* ========================== P1：品牌色归一 ========================== */

/* 链接 */
a {
  color: var(--accent-primary);
}

a:hover,
a:focus {
  color: var(--accent-dark);
}

/* 工作台主 CTA：全局 a:focus 橙字叠橙底会不可读 */
a.uc-cta,
a.uc-cta:hover,
a.uc-cta:focus,
a.uc-cta:focus-visible,
a.uc-cta:active {
  color: #fff !important;
  text-decoration: none;
}
a.uc-cta:hover,
a.uc-cta:focus,
a.uc-cta:focus-visible,
a.uc-cta:active {
  background: #f26f00;
}

/* 主按钮（Bootstrap3 .btn-primary） */
.btn-primary {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-color: var(--accent-dark);
  border-color: var(--accent-dark);
}

.btn-primary:focus,
.btn-primary.focus {
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* 链接按钮 / 强调文字 */
.btn-link {
  color: var(--accent-primary);
}

.btn-link:hover,
.btn-link:focus {
  color: var(--accent-dark);
}

.text-primary {
  color: var(--accent-primary) !important;
}

/* 标签 / 徽章 */
.label-primary {
  background-color: var(--accent-primary);
}

.badge {
  background-color: var(--accent-primary);
}

/* 分页 */
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
}

.pagination > li > a {
  color: var(--accent-primary);
}

/* 标签页 / 胶囊 */
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  background-color: var(--accent-primary);
}

.nav-tabs > li.active > a {
  border-top-color: var(--accent-primary);
}

/* 列表组激活态 */
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
}

/* 进度条 */
.progress-bar {
  background-color: var(--accent-primary);
}

/* ========================== P2：组件品牌化 ========================== */

/* 面板 / 卡片（Bootstrap3 .panel / .well / .thumbnail） */
.panel {
  border-radius: var(--radius);
  border-color: var(--border-color);
  box-shadow: var(--shadow-sm);
}

.panel-default > .panel-heading {
  background-color: var(--bg-base);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.panel-primary {
  border-color: var(--accent-primary);
}

.panel-primary > .panel-heading {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
}

.well {
  border-radius: var(--radius);
  border-color: var(--border-color);
  background-color: var(--bg-base);
  box-shadow: none;
}

.thumbnail {
  border-radius: var(--radius);
  border-color: var(--border-color);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.thumbnail:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
}

/* 表格（Bootstrap3 .table） */
.table > thead > tr > th {
  border-bottom-color: var(--border-strong);
  color: var(--text-secondary);
}

.table > tbody > tr > td,
.table > tbody > tr > th {
  border-top-color: var(--border-soft);
}

.table-hover > tbody > tr:hover {
  background-color: var(--bg-hover);
}

/* 表单 */
.form-control {
  border-radius: var(--radius-sm);
  border-color: var(--border-color);
}

.form-control:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* 焦点可达性（品牌焦点环） */
a:focus-visible,
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* ========================== P3：暗色模式（基础 + 令牌覆盖） ==========================
   说明：marketplace 等已走令牌的页面随之自动适配；GeoNode core 与 MapStore 客户端的
   深色完善为后续增量（base.css / React 主题硬编码较多）。 */
:root.dark,
.dark {
  --bg-base: #0f141c;
  --bg-card: #1a2230;
  --bg-elevated: #222c3c;
  --bg-soft: rgba(255, 123, 0, .10);
  --bg-hover: rgba(255, 255, 255, .05);
  --text-primary: #f1f5f9;
  --text-secondary: #c2c8d2;
  --text-muted: #8b93a3;
  --border-color: rgba(255, 255, 255, .10);
  --border-soft: rgba(255, 255, 255, .06);
  --border-strong: rgba(255, 255, 255, .16);
  --border-hover: rgba(255, 123, 0, .55);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px rgba(0, 0, 0, .32);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .45);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, .55);
  --accent-on-dark: #ff9a3c;
}

:root.dark body,
.dark body {
  background-color: var(--bg-base);
  color: var(--text-primary);
}

:root.dark .panel,
.dark .panel,
:root.dark .well,
.dark .well {
  background-color: var(--bg-card);
  color: var(--text-primary);
}

/* 暗色：GeoNode core 常用容器 / 卡片 / 表单（Bootstrap3，经覆盖层补齐全站暗色，不改 base.css 源码） */
:root.dark .navbar-default,
.dark .navbar-default {
  background-color: var(--bg-card);
  border-color: var(--border-color);
}

:root.dark .navbar-default .navbar-nav > li > a,
.dark .navbar-default .navbar-nav > li > a,
:root.dark .navbar-default .navbar-brand,
.dark .navbar-default .navbar-brand {
  color: var(--text-secondary);
}

:root.dark .dropdown-menu,
.dark .dropdown-menu {
  background-color: var(--bg-elevated);
  border-color: var(--border-color);
}

:root.dark .dropdown-menu > li > a,
.dark .dropdown-menu > li > a {
  color: var(--text-secondary);
}

:root.dark .dropdown-menu > li > a:hover,
.dark .dropdown-menu > li > a:focus {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

:root.dark .panel-default > .panel-heading,
.dark .panel-default > .panel-heading {
  background-color: var(--bg-base);
  color: var(--text-primary);
}

:root.dark .list-group-item,
.dark .list-group-item {
  background-color: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-primary);
}

:root.dark .modal-content,
.dark .modal-content {
  background-color: var(--bg-card);
  color: var(--text-primary);
}

:root.dark .modal-header,
.dark .modal-header,
:root.dark .modal-footer,
.dark .modal-footer {
  border-color: var(--border-color);
}

:root.dark .table,
.dark .table {
  color: var(--text-primary);
}

:root.dark .table > thead > tr > th,
.dark .table > thead > tr > th,
:root.dark .table > tbody > tr > td,
.dark .table > tbody > tr > td {
  border-color: var(--border-soft);
}

:root.dark .table-striped > tbody > tr:nth-of-type(odd),
.dark .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, .03);
}

:root.dark .form-control,
.dark .form-control {
  background-color: var(--bg-elevated);
  border-color: var(--border-color);
  color: var(--text-primary);
}

:root.dark .form-control::placeholder,
.dark .form-control::placeholder {
  color: var(--text-muted);
}

:root.dark .breadcrumb,
.dark .breadcrumb {
  background-color: var(--bg-base);
}

:root.dark .page-header,
.dark .page-header,
:root.dark hr,
.dark hr {
  border-color: var(--border-color);
}

:root.dark .nav-tabs,
.dark .nav-tabs {
  border-bottom-color: var(--border-color);
}

:root.dark .nav-tabs > li > a:hover,
.dark .nav-tabs > li > a:hover {
  background-color: var(--bg-hover);
  border-color: var(--border-color);
}

:root.dark code,
.dark code {
  background-color: rgba(255, 255, 255, .08);
  color: var(--accent-on-dark);
}

/* ========================== 暗色 / 浅色切换开关 ========================== */
.dtb-theme-toggle {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 1080;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.dtb-theme-toggle:hover {
  transform: translateY(-2px);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-lg);
}

.dtb-theme-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-glow);
}