/* ============================================================
   DGA 数字海关 · 应用框架与组件样式基线（ui.css）
   2026-09 定稿：品牌深蓝侧边栏（可折叠 248↔64）+ 白色顶栏
   （右上角：通知/语言/用户信息）+ 浅色内容区（白卡轻阴影）。
   组件样式集中在本文件：调整 UI 直接改这里，全局替换。
   依赖：css/design-tokens.css（令牌单点维护）。
   ============================================================ */

/* ---------- 基础 ---------- */
[hidden]{display:none !important}   /* 防组件 display:flex 覆盖 hidden */
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:var(--brand-font-family);
  font-size:var(--brand-font-size);
  line-height:var(--brand-line-height);
  color:var(--brand-color-text);
  background:var(--brand-color-bg-layout);
}
a{color:var(--brand-color-link);text-decoration:none}
a:hover{color:var(--brand-color-link-hover)}
.mono{font-family:var(--brand-font-family-code);font-size:var(--brand-font-size-sm)}

/* ---------- 应用壳 ---------- */
.app{display:flex;height:100vh;overflow:hidden}

/* ---------- 侧边栏 ---------- */
.sidebar{
  width:var(--shell-sidebar-width);
  flex:0 0 var(--shell-sidebar-width);
  background:linear-gradient(180deg,var(--shell-sidebar-bg-from) 0%,var(--shell-sidebar-bg-to) 100%);
  display:flex;flex-direction:column;
  transition:width var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out), flex-basis var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);
  overflow:hidden;
}
.app.sidebar-collapsed .sidebar{width:var(--shell-sidebar-width-collapsed);flex-basis:var(--shell-sidebar-width-collapsed)}

/* 品牌区（官方 DGA 标志 + 名称） */
.sidebar-brand{
  padding:var(--brand-size-lg) var(--brand-size) var(--brand-size);
  color:#fff;font-weight:var(--brand-font-weight-strong);font-size:15px;letter-spacing:.02em;
  border-bottom:var(--brand-line-width) solid var(--shell-sidebar-divider);
  white-space:nowrap;overflow:hidden;text-align:center;
}
.sidebar-brand .brand-logo{display:block;margin:0 auto 4px;max-width:160px;background:#fff;border-radius:8px;padding:8px 12px;box-sizing:border-box}
.sidebar-brand .lbl{display:none}
.sidebar-brand .sub{display:block;margin-top:2px;font-size:11px;font-weight:400;opacity:.55;letter-spacing:.04em}
.app.sidebar-collapsed .sidebar-brand{padding:var(--brand-size-lg) 0 var(--brand-size);text-align:center;font-size:13px}
.app.sidebar-collapsed .sidebar-brand .brand-logo{display:none}
.app.sidebar-collapsed .sidebar-brand .lbl{display:block}
.app.sidebar-collapsed .sidebar-brand .sub{display:none}

/* 导航 */
.nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 var(--brand-size-xs)}
.nav-group{
  padding:var(--brand-size) var(--brand-size-xs) var(--brand-size-xxs);
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--shell-sidebar-group);white-space:nowrap;overflow:hidden;
}
.app.sidebar-collapsed .nav-group{height:1px;background:var(--shell-sidebar-divider);padding:0;margin:var(--brand-size-sm) var(--brand-size-sm);font-size:0}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:0 var(--brand-size-sm);height:38px;border-radius:7px;margin-bottom:2px;
  color:var(--shell-sidebar-text);cursor:pointer;font-size:13.5px;white-space:nowrap;
  position:relative;
  transition:background var(--brand-motion-duration-fast),color var(--brand-motion-duration-fast);
}
.nav-item .lbl{min-width:0;overflow:hidden;text-overflow:ellipsis}
.nav-item svg{width:17px;height:17px;flex:0 0 17px;opacity:.75}
.nav-item:hover{background:var(--shell-sidebar-item-hover);color:var(--shell-sidebar-text-hover)}
.nav-item.active{background:var(--shell-sidebar-item-active-bg);color:#fff;font-weight:var(--brand-font-weight-strong)}
.nav-item.active::before{
  content:"";position:absolute;left:-8px;top:9px;bottom:9px;width:3px;border-radius:2px;
  background:var(--shell-sidebar-item-active-bar);
}
.nav-item.active svg{opacity:1}
.nav-item .badge{
  margin-left:auto;font-size:10.5px;font-weight:600;padding:1px 7px;border-radius:9px;
  background:rgba(255,255,255,.14);color:#fff;flex:0 0 auto;
}
.nav-item .badge.hot{background:var(--brand-color-error)}
.app.sidebar-collapsed .nav-item{justify-content:center;padding:0;position:relative}
.app.sidebar-collapsed .nav-item span.lbl{display:none}
.app.sidebar-collapsed .nav-item .badge{
  position:absolute;top:4px;right:14px;width:7px;height:7px;padding:0;border-radius:50%;
  font-size:0;background:var(--brand-color-error);border:1px solid var(--shell-sidebar-bg-to);
}
.app.sidebar-collapsed .nav-item.active::before{left:-8px}

/* 二级菜单 */
.nav-parent .caret{margin-left:auto;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.55;transition:transform var(--brand-motion-duration-fast);flex:0 0 auto}
.nav-parent.open .caret{transform:rotate(180deg)}
.nav-item.active-parent{color:#fff}
.nav-sub{display:flex;flex-direction:column;margin:0 0 2px}
.nav-item.sub{height:34px;padding:0 var(--brand-size-sm) 0 42px;font-size:12.5px}
.nav-item.sub .lbl{font-size:12.5px}
.nav-item.sub svg{display:none}
.app.sidebar-collapsed .nav-sub{display:none}
.app.sidebar-collapsed .nav-parent .caret{display:none}

/* ---------- 主区 ---------- */
.main{flex:1;display:flex;flex-direction:column;min-width:0}

/* ---------- 顶栏（右上角：折叠钮 通知 语言 用户信息） ---------- */
.topbar{
  height:var(--shell-topbar-height);flex:0 0 var(--shell-topbar-height);
  background:var(--brand-color-bg-container);
  border-bottom:var(--brand-line-width) solid var(--brand-color-border);
  display:flex;align-items:center;gap:var(--brand-size);
  padding:0 var(--brand-size-lg);
  position:relative;z-index:20;
}
.topbar .fold{
  border:none;background:transparent;cursor:pointer;width:32px;height:32px;border-radius:var(--brand-border-radius-sm);
  display:inline-flex;align-items:center;justify-content:center;color:var(--brand-color-text-secondary);
}
.topbar .fold:hover{background:var(--brand-color-fill-tertiary);color:var(--brand-color-text)}
.topbar .fold svg{width:17px;height:17px}
.topbar .title{font-size:var(--brand-font-size-lg);font-weight:var(--brand-font-weight-strong)}
.topbar .spacer{flex:1}

/* ---------- 页面头部（内容区顶部：模块名大字体 + 当前页高亮） ---------- */
.page-header{display:flex;align-items:center;gap:12px;padding:2px 0 16px}
.page-header .header-spacer{flex:1}
.page-header .page-title{font-size:22px;font-weight:600;color:var(--brand-color-text);margin:0;line-height:1.3;cursor:default}
.page-header .page-title.cur{color:var(--brand-color-primary)}
.page-header .page-title.link{color:var(--brand-color-link);cursor:pointer}
.page-header .page-title.link:hover{color:var(--brand-color-link-hover);text-decoration:underline}
.page-header .header-sep{font-size:20px;color:var(--brand-color-text-quaternary)}
.page-header .page-cur{font-size:22px;font-weight:600;color:var(--brand-color-primary)}

/* 右上角操作区 */
.topbar .right{display:flex;align-items:center;gap:var(--brand-size)}
.icon-btn{
  position:relative;border:none;background:transparent;cursor:pointer;
  width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  color:var(--brand-color-text);
}
.icon-btn:hover{background:var(--brand-color-fill-tertiary);color:var(--brand-color-text)}
.icon-btn svg{width:18px;height:18px}
.icon-btn .dot{
  position:absolute;top:2px;right:2px;min-width:14px;height:14px;padding:0 3px;border-radius:8px;
  background:var(--brand-color-error);color:#fff;font-size:10px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;
  border:2px solid var(--brand-color-bg-container);
}

/* 语言切换 */
.lang-btn{
  border:var(--brand-line-width) solid var(--brand-color-border);background:transparent;
  border-radius:var(--brand-border-radius-sm);padding:3px 10px;font-size:var(--brand-font-size-sm);
  cursor:pointer;color:var(--brand-color-text);
}
.lang-btn:hover{border-color:var(--brand-color-primary);color:var(--brand-color-primary)}

/* 用户信息（右上角，参考国内后台规范） */
.user{margin-left:var(--brand-size-xs)}
.user .trigger{
  display:flex;align-items:center;gap:var(--brand-size-xs);cursor:pointer;
  padding:4px 6px 4px 4px;border-radius:var(--brand-border-radius);
  transition:background var(--brand-motion-duration-fast);
}
.user .trigger:hover{background:var(--brand-color-fill-tertiary)}
.user .av{
  width:34px;height:34px;border-radius:50%;flex:0 0 34px;
  background:var(--brand-color-primary);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:var(--brand-font-weight-strong);
}
.user .who{line-height:1.25;min-width:0;max-width:150px}
.user .who b{display:block;font-size:13px;font-weight:600;color:var(--brand-color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user .who span{font-size:11px;color:var(--brand-color-text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.user .caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--brand-color-text-tertiary);margin-left:2px}

/* 下拉菜单（语言 / 用户 共用） */
.dropdown{position:relative}
.dropdown .menu{
  position:absolute;right:0;top:calc(100% + 6px);min-width:160px;
  background:var(--brand-color-bg-elevated);border:var(--brand-line-width) solid var(--brand-color-border);
  border-radius:var(--brand-border-radius);
  box-shadow:0 4px 12px rgba(16,24,40,.10),0 2px 4px rgba(16,24,40,.06);
  padding:var(--brand-size-xxs);z-index:50;
}
.dropdown .menu[hidden]{display:none !important}
.dropdown .menu .mi{
  display:block;width:100%;text-align:left;border:none;background:transparent;cursor:pointer;
  padding:7px 12px;border-radius:var(--brand-border-radius-sm);font-size:13px;color:var(--brand-color-text);
}
.dropdown .menu .mi:hover{background:var(--brand-color-fill-tertiary)}
.dropdown .menu .mi.on{color:var(--brand-color-primary);font-weight:var(--brand-font-weight-strong)}
.dropdown .menu .div{border-top:var(--brand-line-width) solid var(--brand-color-border-secondary);margin:var(--brand-size-xxs) 0}
.dropdown .menu .mi.danger{color:var(--brand-color-error)}
.dropdown .menu .mi.danger:hover{background:var(--red-1)}

/* ---------- 内容区 ---------- */
.content{flex:1;overflow-y:auto;padding:var(--brand-size-md)}

/* ---------- 统计卡 ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--brand-size);margin-bottom:var(--brand-size)}
.card{
  background:var(--brand-color-bg-container);
  border-radius:var(--brand-border-radius-lg);
  box-shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.06);
  padding:var(--brand-size);display:flex;flex-direction:column;gap:10px;
}
.card .row{display:flex;align-items:center;justify-content:space-between}
.card .ic{
  width:38px;height:38px;border-radius:9px;
  background:var(--blue-1);color:var(--brand-color-primary);
  display:inline-flex;align-items:center;justify-content:center;
}
.card .ic svg{width:19px;height:19px}
.card .ic.warn{background:var(--gold-1);color:var(--brand-color-warning)}
.card .ic.err{background:var(--red-1);color:var(--brand-color-error)}
.card .num{font-size:26px;font-weight:700;line-height:1.1;color:var(--brand-color-text)}
.card .lab{font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary)}
.card .trend{font-size:11px;color:var(--brand-color-text-tertiary)}

/* ---------- 面板 / 表格 ---------- */
.panel{
  background:var(--brand-color-bg-container);
  border-radius:var(--brand-border-radius-lg);
  box-shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.06);
  overflow-x:auto;
}
.panel-h{
  padding:14px var(--brand-size);font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size);
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary);
}
.panel-h .more{font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);cursor:pointer;font-weight:400}
.panel-h .more:hover{color:var(--brand-color-link)}
table{width:100%;border-collapse:collapse}
th{font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);text-align:left;padding:9px var(--brand-size);color:var(--brand-color-text-tertiary);background:var(--brand-color-fill-tertiary);white-space:nowrap}
td{padding:11px var(--brand-size);font-size:13px;border-top:var(--brand-line-width) solid var(--brand-color-border-secondary);color:var(--brand-color-text)}
tr:hover td{background:var(--brand-color-fill-quaternary)}
tfoot td{background:var(--brand-color-fill-tertiary);font-weight:600}

/* ---------- 状态圆点 + 标签 ---------- */
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;vertical-align:1px}
.s-ok{color:var(--brand-color-success)}
.s-pending{color:var(--brand-color-warning)}
.s-risk{color:var(--brand-color-error)}
.s-info{color:var(--brand-color-info)}
.tag{
  display:inline-flex;align-items:center;gap:5px;
  font-size:var(--brand-font-size-sm);border-radius:var(--brand-border-radius-sm);
  padding:2px 9px;font-weight:500;
}
.tag .dot{margin-right:0}
.tag-success{background:var(--green-1);color:var(--brand-color-success)}
.tag-warning{background:var(--gold-1);color:var(--brand-color-warning)}
.tag-error{background:var(--red-1);color:var(--brand-color-error)}
.tag-info{background:var(--blue-1);color:var(--brand-color-info)}
.tag-neutral{background:var(--brand-color-fill-tertiary);color:var(--brand-color-text-secondary)}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid transparent;
  padding:5px 14px;font-size:13px;cursor:pointer;line-height:1.5714;
  transition:all var(--brand-motion-duration-fast);
  font-family:inherit;
}
.btn.primary{background:var(--brand-color-primary);color:#fff}
.btn.primary:hover{background:var(--brand-color-primary-hover)}
.btn.default{background:var(--brand-color-bg-container);border-color:var(--brand-color-border);color:var(--brand-color-text)}
.btn.default:hover{border-color:var(--brand-color-primary);color:var(--brand-color-primary)}
.btn.link{border-color:transparent;background:transparent;color:var(--brand-color-link)}
.btn.link:hover{color:var(--brand-color-link-hover)}
.btn.danger{background:var(--brand-color-error);color:#fff}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.sm{padding:2px 10px;font-size:12px}

/* ---------- 响应式兜底 ---------- */
@media (max-width:1100px){
  .cards{grid-template-columns:repeat(2,1fr)}
}