/* ============================================================
   Auric 财务中台 · NetSuite 风格样式
   深色顶栏 + 左侧模块栏 + portlet 卡片 + 密集数据表
   ============================================================ */

:root {
  --topbar:        #1b2f3f;
  --topbar-2:      #24405a;
  --sidebar:       #243546;
  --sidebar-hover: #1b2a38;
  --sidebar-active:#16283a;
  --accent:        #2d9cde;
  --accent-deep:   #1565a8;
  --link:          #1565a8;
  --bg:            #eceff3;
  --card:          #ffffff;
  --border:        #d4dae3;
  --border-soft:   #e6eaef;
  --head-strip:    #f3f5f8;
  --text:          #2a2f36;
  --text-soft:     #6a7681;
  --text-mute:     #95a0ab;
  --ok:            #2f8a46;   --ok-bg:   #e7f4ea;
  --warn:          #b9770e;   --warn-bg: #fcf2e0;
  --bad:           #c0392b;   --bad-bg:  #fbe7e4;
  --info:          #1565a8;   --info-bg: #e6eff7;
  --row-zebra:     #fafbfc;
  --row-hover:     #eef5fc;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Arial, "Helvetica Neue", Helvetica, "Segoe UI",
               "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 13px;
  line-height: 1.45;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- 顶栏 ---------- */
.ns-topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 46px; z-index: 100;
  display: flex; align-items: center; gap: 16px;
  padding: 0 14px;
  background: linear-gradient(180deg, var(--topbar-2), var(--topbar));
  border-bottom: 1px solid #0d1a24;
  color: #dfe7ef;
}
.ns-brand { display: flex; align-items: center; gap: 9px; font-weight: 700; color: #fff; letter-spacing: .2px; }
.ns-brand .logo {
  width: 22px; height: 22px; border-radius: 4px;
  background: linear-gradient(135deg, var(--accent), #1c7fbf);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 800;
}
.ns-brand small { font-weight: 400; color: #9fb2c4; font-size: 12px; }
.ns-search {
  flex: 0 1 360px; display: flex; align-items: center;
  background: #16283a; border: 1px solid #34506b;
  border-radius: 4px; padding: 4px 9px; color: #b9c6d3;
}
.ns-search input {
  border: 0; background: transparent; outline: none; color: #eaf1f7;
  width: 100%; font-size: 12.5px;
}
.ns-search input::placeholder { color: #7f93a6; }
.ns-top-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.ns-env {
  font-size: 10.5px; font-weight: 700; letter-spacing: .6px;
  color: #cfeccd; background: #2c5a36; border: 1px solid #3f7a4c;
  padding: 1px 7px; border-radius: 3px;
}
.ns-user { display: flex; align-items: center; gap: 8px; color: #dfe7ef; font-size: 12.5px; }
.ns-user .avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: #4a6781; color: #fff; display: inline-flex;
  align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
}
.ns-top-link { color: #b9c6d3; font-size: 12.5px; }
.ns-top-link:hover { color: #fff; text-decoration: none; }
.ns-theme { display: flex; gap: 4px; align-items: center; }
.ns-theme button {
  font: 600 11px/1 inherit; cursor: pointer; padding: 4px 9px; border-radius: 999px;
  background: transparent; color: currentColor; opacity: .8;
  border: 1px solid color-mix(in srgb, currentColor 38%, transparent);
}
.ns-theme button:hover { opacity: 1; }
.ns-theme button.active { background: var(--accent); border-color: var(--accent); color: #fff; opacity: 1; }
.ns-burger { display: none; background: none; border: 0; color: currentColor; font-size: 18px; cursor: pointer; padding: 2px 6px; margin-left: -2px; }
.ns-backdrop { display: none; position: fixed; inset: 46px 0 0 0; background: rgba(10,18,26,.4); z-index: 80; }
.ns-user { position: relative; cursor: pointer; user-select: none; }
.ns-user .caret { font-size: 10px; opacity: .7; margin-left: 2px; }
.ns-usermenu {
  display: none; position: absolute; top: 34px; right: 0; min-width: 184px;
  background: var(--card); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; box-shadow: 0 8px 24px rgba(20,30,40,.18); padding: 6px; z-index: 120;
}
.ns-user.open .ns-usermenu { display: block; }
.ns-usermenu .who { font-size: 11.5px; color: var(--text-mute); padding: 6px 8px; border-bottom: 1px solid var(--border-soft); margin-bottom: 4px; word-break: break-all; }
.ns-usermenu a { display: block; padding: 7px 8px; font-size: 12.5px; color: var(--text); border-radius: 4px; }
.ns-usermenu a:hover { background: var(--row-hover); text-decoration: none; }
.ns-table thead th { user-select: none; }
.ns-table thead th .sort-ind { color: var(--accent); font-size: 10px; }

/* ---------- 左侧模块栏 ---------- */
.ns-sidebar {
  position: fixed; top: 46px; bottom: 0; left: 0; width: 212px; z-index: 90;
  background: var(--sidebar); overflow-y: auto;
  border-right: 1px solid #0d1a24;
  padding: 8px 0 24px;
}
.ns-nav-section { margin-top: 10px; }
.ns-nav-section > .label {
  color: #6d8395; font-size: 10.5px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; padding: 8px 16px 4px;
}
.ns-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 16px; color: #b3c1cd; font-size: 13px; cursor: pointer;
  border-left: 3px solid transparent;
}
.ns-nav-item .ico { width: 16px; text-align: center; opacity: .85; font-size: 13px; }
.ns-nav-item:hover { background: var(--sidebar-hover); color: #eaf1f7; text-decoration: none; }
.ns-nav-item.active {
  background: #16283a; color: #fff; border-left-color: var(--accent); font-weight: 600;
}
.ns-nav-item .badge {
  margin-left: auto; background: var(--bad); color: #fff;
  font-size: 10.5px; border-radius: 9px; padding: 0 6px; line-height: 16px; min-width: 16px; text-align: center;
}

/* ---------- 内容区 ---------- */
.ns-content { margin-left: 212px; padding-top: 46px; min-height: 100vh; }

.ns-pagehead {
  background: var(--card); border-bottom: 1px solid var(--border);
  padding: 12px 22px 12px;
}
.ns-crumb { color: var(--text-mute); font-size: 12px; margin-bottom: 3px; }
.ns-crumb a { color: var(--text-soft); }
.ns-pagehead .row { display: flex; align-items: center; gap: 14px; }
.ns-pagehead h1 { margin: 0; font-size: 19px; font-weight: 600; color: #20303d; }
.ns-pagehead .actions { margin-left: auto; display: flex; gap: 8px; }

.ns-body { padding: 18px 22px 40px; }

/* ---------- 按钮 ---------- */
.ns-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; padding: 5px 12px; border-radius: 4px; cursor: pointer;
  background: #fff; color: #314350; border: 1px solid #b9c3cf;
}
.ns-btn:hover { background: #f3f6f9; text-decoration: none; }
.ns-btn--primary { background: linear-gradient(180deg, #2e9cde, #1c7fbf); border-color: #1c7fbf; color: #fff; }
.ns-btn--primary:hover { background: #1c7fbf; }
.ns-btn--danger { color: #b13225; border-color: #d9a59e; }
.ns-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- KPI 瓦片 ---------- */
.ns-kpi-row {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 16px;
}
.ns-kpi {
  background: var(--card); border: 1px solid var(--border); border-radius: 5px;
  padding: 12px 14px; position: relative; border-top: 3px solid var(--accent);
}
.ns-kpi .label { color: var(--text-soft); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.ns-kpi .value { font-size: 25px; font-weight: 700; color: #1f2d39; margin-top: 4px; font-variant-numeric: tabular-nums; }
.ns-kpi .delta { font-size: 11.5px; margin-top: 2px; }
.ns-kpi .delta.up { color: var(--ok); }
.ns-kpi .delta.down { color: var(--bad); }
.ns-kpi.ok    { border-top-color: var(--ok); }
.ns-kpi.warn  { border-top-color: var(--warn); }
.ns-kpi.bad   { border-top-color: var(--bad); }

/* ---------- Portlet 卡片 ---------- */
.ns-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: start; }
.ns-grid.cols-1 { grid-template-columns: 1fr; }
.span-2 { grid-column: span 2; }

.portlet {
  background: var(--card); border: 1px solid var(--border); border-radius: 5px; overflow: hidden;
}
.portlet > .head {
  display: flex; align-items: center; gap: 8px;
  background: var(--head-strip); border-bottom: 1px solid var(--border);
  padding: 8px 12px;
}
.portlet > .head h2 {
  margin: 0; font-size: 12.5px; font-weight: 700; color: #34434f;
  text-transform: uppercase; letter-spacing: .4px;
}
.portlet > .head .tools { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.portlet > .head .tools a, .portlet > .head .tools span { color: var(--text-mute); cursor: pointer; font-size: 12px; }
.portlet > .head .count { color: var(--text-soft); font-weight: 400; font-size: 11.5px; }
.portlet > .body { padding: 12px 14px; }
.portlet > .body.flush { padding: 0; }
.portlet.collapsed > .body { display: none; }

/* ---------- 数据表 ---------- */
.ns-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ns-table thead th {
  background: #eef1f5; color: #44525e; text-align: left; font-weight: 700;
  padding: 7px 10px; border-bottom: 1px solid #c4ccd6; white-space: nowrap;
  position: sticky; top: 0;
}
.ns-table tbody td { padding: 6px 10px; border-bottom: 1px solid var(--border-soft); color: #2f3a44; }
.ns-table tbody tr:nth-child(even) { background: var(--row-zebra); }
.ns-table tbody tr:hover { background: var(--row-hover); }
.ns-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ns-table .mono { font-family: "SF Mono", Consolas, "Roboto Mono", monospace; font-size: 11.5px; color: #46535e; }
.ns-table tfoot td { padding: 7px 10px; border-top: 2px solid #c4ccd6; font-weight: 700; background: #f7f9fb; }
.ns-table td .sub { color: var(--text-mute); font-size: 11px; }

/* ---------- 状态徽章 ---------- */
.pill {
  display: inline-block; font-size: 11px; font-weight: 600; line-height: 1.5;
  padding: 1px 8px; border-radius: 10px; border: 1px solid transparent; white-space: nowrap;
}
.pill.ok    { color: var(--ok);   background: var(--ok-bg);   border-color: #bfe1c7; }
.pill.warn  { color: var(--warn); background: var(--warn-bg); border-color: #ecd3a3; }
.pill.bad   { color: var(--bad);  background: var(--bad-bg);  border-color: #ecc1bb; }
.pill.info  { color: var(--info); background: var(--info-bg); border-color: #bcd4ec; }
.pill.muted { color: var(--text-soft); background: #eef1f4; border-color: #d8dee5; }

/* ---------- 筛选条 ---------- */
.ns-filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  background: var(--card); border: 1px solid var(--border); border-radius: 5px;
  padding: 12px 14px; margin-bottom: 14px;
}
.ns-field { display: flex; flex-direction: column; gap: 3px; }
.ns-field label { font-size: 11px; color: var(--text-soft); font-weight: 600; }
.ns-field select, .ns-field input {
  font-size: 12.5px; padding: 5px 8px; border: 1px solid #c2ccd6; border-radius: 4px;
  background: #fff; color: var(--text); min-width: 140px;
}

/* ---------- 记录表单(字段分组) ---------- */
.ns-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 0; }
.ns-tabs a {
  padding: 8px 16px; font-size: 12.5px; color: var(--text-soft);
  background: #e7ebf0; border: 1px solid var(--border); border-bottom: none;
  border-radius: 5px 5px 0 0;
}
.ns-tabs a.active { background: #fff; color: #20303d; font-weight: 600; }
.ns-fieldgroup {
  display: grid; grid-template-columns: 160px 1fr 160px 1fr; gap: 8px 14px;
  background: var(--card); border: 1px solid var(--border); border-top: none;
  padding: 16px 18px;
}
.ns-fieldgroup .k { color: var(--text-soft); font-size: 12px; padding-top: 2px; }
.ns-fieldgroup .v { color: #233039; font-weight: 600; }

/* ---------- 分页 ---------- */
.ns-pager {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-top: 1px solid var(--border-soft); color: var(--text-soft); font-size: 12px;
  background: #fafbfc;
}
.ns-pager .spacer { margin-left: auto; }
.ns-pager a { padding: 2px 8px; border: 1px solid var(--border); border-radius: 3px; background: #fff; color: var(--text-soft); }
.ns-pager a.active { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }

/* ---------- 迷你条形(伪图表) ---------- */
.bars { display: flex; align-items: flex-end; gap: 10px; height: 120px; padding: 6px 4px 0; }
.bars .bar { flex: 1; background: linear-gradient(180deg, #56b4ea, #2d8fcf); border-radius: 3px 3px 0 0; position: relative; }
.bars .bar .cap { position: absolute; top: -16px; left: 0; right: 0; text-align: center; font-size: 10.5px; color: var(--text-soft); }
.bars .bar .axis { position: absolute; bottom: -16px; left: 0; right: 0; text-align: center; font-size: 10.5px; color: var(--text-mute); }

/* ---------- 杂项 ---------- */
.note {
  background: #f0f6fc; border: 1px solid #bcd4ec; border-left: 3px solid var(--accent);
  padding: 9px 12px; border-radius: 4px; color: #2f4a5e; font-size: 12px; margin-bottom: 14px;
}
.text-soft { color: var(--text-soft); }
.text-mute { color: var(--text-mute); }
.right { text-align: right; }
.flex { display: flex; align-items: center; gap: 8px; }
.mono { font-family: "SF Mono", Consolas, "Roboto Mono", monospace; }
.section-title { font-size: 13px; font-weight: 700; color: #34434f; margin: 4px 0 10px; }

@media (max-width: 900px) {
  .ns-burger { display: inline-flex; align-items: center; }
  .ns-sidebar { transform: translateX(-100%); transition: transform .22s ease; box-shadow: 2px 0 16px rgba(0,0,0,.25); }
  .ns-sidebar.open { transform: none; }
  .ns-content { margin-left: 0; }
  .ns-kpi-row { grid-template-columns: repeat(2, 1fr); }
  .ns-grid { grid-template-columns: 1fr; }
  .ns-search { display: none; }
  .ns-backdrop.show { display: block; }
}

/* ---------- 焦点 / 过渡(可访问性) ---------- */
.ns-btn, .ns-nav-item, .ns-table tbody tr, .ns-tabs a, .ns-pager a, .pill, .ns-top-link {
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.ns-field input:focus, .ns-field select:focus, .ns-search input:focus { outline: none; }
.ns-field input:focus-visible, .ns-field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.ns-field input:focus, .ns-field select:focus { border-color: var(--accent); }

/* ---------- 加载骨架 ---------- */
.skel {
  display: inline-block; height: 12px; border-radius: 3px;
  background: linear-gradient(90deg, #e8ecf1 25%, #f3f6f9 37%, #e8ecf1 63%);
  background-size: 400% 100%; animation: skel-shimmer 1.2s ease-in-out infinite;
}
.skel.line { width: 100%; margin: 4px 0; }
@keyframes skel-shimmer { 0% { background-position: 100% 0 } 100% { background-position: -100% 0 } }

/* ---------- 空状态 / 错误状态 ---------- */
.ns-empty { text-align: center; padding: 44px 20px; color: var(--text-soft); }
.ns-empty .icon { font-size: 30px; opacity: .5; }
.ns-empty .title { font-size: 14px; font-weight: 600; color: var(--text); margin: 8px 0 4px; }
.ns-empty .desc { font-size: 12.5px; margin-bottom: 12px; }
.note--warn  { background: var(--warn-bg); border-color: #ecd3a3; border-left-color: var(--warn); color: #6b4a08; }
.note--error { background: var(--bad-bg);  border-color: #ecc1bb; border-left-color: var(--bad);  color: #7a241a; }

/* ---------- Toast ---------- */
.ns-toast { position: fixed; top: 58px; right: 18px; z-index: 1100; display: flex; flex-direction: column; gap: 8px; }
.ns-toast .t {
  background: var(--ink, #20303d); color: #fff; font-size: 12.5px;
  padding: 9px 14px; border-radius: 6px; box-shadow: 0 6px 20px rgba(20,30,40,.22);
  opacity: 0; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease;
}
.ns-toast .t.show { opacity: 1; transform: none; }
.ns-toast .t.ok  { background: var(--ok); }
.ns-toast .t.bad { background: var(--bad); }

/* ---------- 分录表单(新建凭证) ---------- */
.leg-table td { padding: 5px 8px; vertical-align: middle; }
.leg-table select, .leg-table input {
  width: 100%; font-size: 12.5px; padding: 5px 7px; border: 1px solid var(--border);
  border-radius: 4px; background: var(--card); color: var(--text);
}
.leg-table input.amt { text-align: right; font-variant-numeric: tabular-nums; }
.leg-table .ccy { color: var(--text-soft); font-weight: 600; }
.leg-del { color: var(--bad); cursor: pointer; background: none; border: 0; font-size: 14px; line-height: 1; }

/* ---------- 弹窗 Modal ---------- */
.ns-modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(15,22,30,.45);
  z-index: 1000; align-items: flex-start; justify-content: center;
}
.ns-modal-overlay.show { display: flex; }
.ns-modal {
  background: var(--card); color: var(--text); width: 460px; max-width: 92vw; margin-top: 10vh;
  border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 16px 48px rgba(15,22,30,.3); overflow: hidden;
}
.ns-modal .m-head { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--head-strip); }
.ns-modal .m-head h3 { margin: 0; font-size: 14px; color: var(--text); }
.ns-modal .m-head .m-x { margin-left: auto; background: none; border: 0; cursor: pointer; color: var(--text-mute); font-size: 14px; }
.ns-modal .m-body { padding: 16px; font-size: 13px; }
.ns-modal .m-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid var(--border); background: var(--bg); }
.ns-modal .m-row { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--border-soft); }
.ns-modal label { font-size: 12px; color: var(--text-soft); display: block; margin: 12px 0 4px; }
.ns-modal select, .ns-modal textarea, .ns-modal input {
  width: 100%; font-size: 12.5px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--card); color: var(--text);
}

/* ---------- 图表 ---------- */
.chart-grid { stroke: var(--border-soft); stroke-width: 1; }
.chart-area { fill: color-mix(in srgb, var(--accent) 15%, transparent); stroke: none; }
.chart-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-dot { fill: var(--accent); }
.chart-xlabel { fill: var(--text-mute); font-size: 10px; }
.chart-val { fill: var(--text-soft); font-size: 10px; font-weight: 700; }
.bar-pos { fill: #5f9e6b; }
.bar-neg { fill: #d2685a; }
.seg-0 { fill: var(--accent); } .sw.seg-0 { background: var(--accent); }
.seg-1 { fill: #6a9bcc; }       .sw.seg-1 { background: #6a9bcc; }
.seg-2 { fill: #5f9e6b; }       .sw.seg-2 { background: #5f9e6b; }
.seg-3 { fill: #d2a24c; }       .sw.seg-3 { background: #d2a24c; }
.donut-legend .dlg { font-size: 12px; padding: 3px 0; color: var(--text-soft); }
.donut-legend .dlg b { color: var(--text); }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 7px; vertical-align: middle; }

/* ---------- Logo SVG ---------- */
.ns-brand .logo svg, .login-brand .lb-logo .mark svg { width: 100%; height: 100%; display: block; }

/* ---------- 减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}