/* P0 简版样式：用于“挂页面”，后续可替换为 Tailwind/Ant Design */
:root {
  --bg: #f6f7fb;
  --card: #ffffff;
  --border: #e6e8ee;
  --text: #1f2937;
  --muted: #6b7280;
  --primary: #2563eb;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
}

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

.layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 240px;
  flex: 0 0 240px;
  background: linear-gradient(180deg,#071a33 0%, #081a2b 60%, #061426 100%);
  color: #e5e7eb;
  display: flex;
  flex-direction: column;
  transition: width .2s ease, flex-basis .2s ease;
}

.brand {
  padding: 18px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.brand-inner{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.brand-text{min-width:0}
.brand-title { font-weight: 700; font-size: 16px; }
.brand-sub { margin-top: 6px; font-size: 12px; opacity: .75; }
.collapse-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#e5e7eb;cursor:pointer;flex:0 0 auto;transition:background .2s ease,transform .2s ease}
.collapse-btn:hover{background:rgba(255,255,255,.12)}
.collapse-btn-icon{font-size:16px;line-height:1;transition:transform .2s ease}

.nav { padding: 10px 8px; }

/* --- H5 sidebar scroll fix (auto) --- */
.nav{flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action:pan-y;}
/* ensure sidebar container can host a scrollable middle area on mobile */
.sidebar{min-height:0;}
/* lock background scroll when drawer open, but keep sidebar scroll */
@media (max-width: 768px){
  body.sidebar-open{overflow:hidden;}
}
/* --- end H5 sidebar scroll fix --- */
.nav-item {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: #e5e7eb;
  margin: 4px 0;
}
.nav-item:hover { background: rgba(255,255,255,0.08); text-decoration: none; }

.sidebar-footer {
  margin-top: auto;
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
  opacity: .85;
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; transition: width .2s ease, margin .2s ease; }
.topbar {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.content { padding: 16px; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}

.col-6 { grid-column: span 6; }
.col-12 { grid-column: span 12; }

.muted { color: var(--muted); }
.small { font-size: 12px; }

.badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  font-size: 12px;
}

.link { margin-left: 12px; }

.table {
  width: 100%;
  border-collapse: collapse;
}
.table th, .table td {
  border-bottom: 1px solid var(--border);
  padding: 10px 8px;
  text-align: left;
  vertical-align: top;
}
.table th { color: var(--muted); font-weight: 600; font-size: 13px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  font-size: 14px;
}
.btn-primary {
  border-color: #1d4ed8;
  background: #2563eb;
  color: #fff;
}

.input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.form-row { margin-bottom: 10px; }
.form-row label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }

.code {
  background: #f7f9fc;
  color: #111827;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.06);
  overflow: auto;
}

.notice {
  padding: 10px 12px;
  border: 1px solid #dbeafe;
  background: #eff6ff;
  border-radius: 10px;
}

.nav-sep{height:1px;background:rgba(255,255,255,.08);margin:10px 0;}

.badge.warn{background:rgba(245,158,11,.15);color:#f59e0b;}

.badge.success{background:rgba(16,185,129,.15);color:#10b981;}
.badge.danger{background:rgba(239,68,68,.12);color:#ef4444;}

.btn.btn-sm{padding:6px 10px;border-radius:9px;font-size:13px;}

/* simple modal */
.modal{position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(17,24,39,.45);display:flex;align-items:center;justify-content:center;z-index:9999;padding:16px;}
.modal-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.18);width:100%;}


/* v1.2.5: collapsible sidebar */
.nav-group{border:1px solid rgba(255,255,255,0.10);border-radius:16px;padding:6px;margin:10px 10px;background:rgba(255,255,255,0.06);backdrop-filter: blur(6px)}
.nav-summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:10px 10px;border-radius:12px;color:#eaf2ff;font-weight:800;background:rgba(37,99,235,0.18)}
.nav-summary::-webkit-details-marker{display:none}
.nav-ico{width:22px;text-align:center;opacity:.9}
.nav-group[open] .nav-summary{background:rgba(37,99,235,0.06)}

.nav-item.active{background:rgba(37,99,235,0.22);border:1px solid rgba(96,165,250,0.35);font-weight:700}

body.sidebar-collapsed .sidebar{width:72px;flex-basis:72px}
body.sidebar-collapsed .collapse-btn-icon{transform:rotate(180deg)}
body.sidebar-collapsed .brand{padding:18px 12px}
body.sidebar-collapsed .brand-inner{justify-content:center}
body.sidebar-collapsed .brand-text,
body.sidebar-collapsed .nav-summary span:not(.nav-ico),
body.sidebar-collapsed .nav-item,
body.sidebar-collapsed .sidebar-footer .small{display:none}
body.sidebar-collapsed .nav{padding:10px 6px}
body.sidebar-collapsed .nav-group{padding:6px;margin:10px 6px}
body.sidebar-collapsed .nav-summary{justify-content:center;padding:10px 0}
body.sidebar-collapsed .nav-ico{width:auto;font-size:20px}
body.sidebar-collapsed .sidebar-footer{padding:12px 8px;display:flex;justify-content:center}
body.sidebar-collapsed .sidebar-footer::before{content:"v";font-size:12px;opacity:.7}


/* mobile drawer sidebar */
@media (max-width: 768px){
  .layout{ grid-template-columns: 1fr !important; }
  .collapse-btn{display:none;}
  body.sidebar-collapsed .sidebar{width:82vw;flex-basis:auto;}
  body.sidebar-collapsed .brand-text{display:block;}
  body.sidebar-collapsed .nav-summary span:not(.nav-ico){display:inline;}
  body.sidebar-collapsed .nav-item{display:block;}
  body.sidebar-collapsed .sidebar-footer .small{display:block;}
  body.sidebar-collapsed .nav-summary{justify-content:flex-start;padding:10px 10px;}
  body.sidebar-collapsed .nav-ico{width:22px;font-size:inherit;}
  body.sidebar-collapsed .sidebar-footer{padding:10px 16px 12px;display:block;}
  body.sidebar-collapsed .sidebar-footer::before{display:none;}
  .sidebar{ position: fixed; top:0; left:0; bottom:0; width: 82vw; max-width: 320px; z-index: 1002; transform: translateX(-105%); transition: transform .2s ease; box-shadow: 0 10px 30px rgba(0,0,0,.18); overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .sidebar-overlay{ display:none; position: fixed; inset:0; background: rgba(0,0,0,.35); z-index: 1001; }
  body.sidebar-open .sidebar{ transform: translateX(0); }
  body.sidebar-open .sidebar-overlay{ display:block; }
  .sidebar .nav{flex:0 0 auto; overflow:visible; padding-bottom:18px;}
  .sidebar .sidebar-footer{margin-top:0; border-top:1px solid rgba(255,255,255,0.08); background:linear-gradient(180deg,rgba(6,20,38,0) 0%, rgba(6,20,38,.92) 16%, rgba(6,20,38,1) 100%); position:sticky; bottom:0;}
  .sidebar .nav-group{margin:10px 8px;}
  .hamburger{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; border:1px solid rgba(0,0,0,.08); background:#fff; margin-right:10px; font-size:18px; }
  .topbar{ position: sticky; top:0; z-index: 1000; }
}
@media (min-width: 769px){
  .hamburger{ display:none; }
  .sidebar-overlay{ display:none !important; }
}




/* fix187: desktop sidebar wheel scroll + hidden scrollbar, without locking main page */
@media (min-width: 769px){
  .layout{
    min-height: 100vh;
    overflow: visible;
    align-items: stretch;
  }

  .sidebar{
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
  }

  .nav{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .nav::-webkit-scrollbar{
    width: 0;
    height: 0;
    display: none;
  }

  .sidebar-footer{
    flex: 0 0 auto;
    margin-top: 0;
  }

  .main{
    min-width: 0;
    overflow: visible;
  }
}

/* mobile table horizontal scroll (global, low-cost) */
@media (max-width: 768px){
  /* Make standard tables scrollable horizontally */
  table.table{
    display:block;
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  table.table thead, table.table tbody, table.table tr{
    width: max-content;
  }
  table.table th, table.table td{
    white-space: nowrap;
  }

  /* Prevent long content from breaking layout in common cells */
  .table-cell-ellipsis{
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Buttons and inputs slightly larger for touch */
  .btn{ min-height: 40px; }
  .input{ min-height: 40px; font-size: 16px; }
}


/* mobile topbar */
@media (max-width: 768px){
  .topbar{display:flex; gap:10px; align-items:center; justify-content:space-between; padding:10px 12px;}
  .topbar-right{display:none;}
  .topbar-center{flex:1; text-align:center;}
  .topbar-title{font-weight:800; font-size:16px; color:#111827; display:inline-block; max-width: 70vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
}
@media (min-width: 769px){
  .topbar-center{display:none;}
}


/* mobile filter drawer */
@media (max-width: 768px){
  .filter-toolbar{display:flex; gap:8px; justify-content:flex-end; margin-bottom:10px;}
  .filter-panel{display:none;}
  body.filter-open .filter-panel{display:block; position:fixed; top:0; right:0; bottom:0; width:86vw; max-width:360px; background:#fff; z-index:1102; overflow:auto; padding:14px; box-shadow:-10px 0 30px rgba(0,0,0,.18);} 
  .filter-overlay{display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:1101;}
  body.filter-open .filter-overlay{display:block;}
  .filter-close{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;}
}


/* mobile cardify */
@media (max-width: 768px){
  .cards{display:flex; flex-direction:column; gap:10px;}
  .card-row{border:1px solid rgba(0,0,0,.06); border-radius:14px; padding:12px; background:#fff;}
  .card-row .kv{display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-top:1px dashed rgba(0,0,0,.06);} 
  .card-row .kv:first-child{border-top:0;}
  .card-row .k{color:#6b7280; font-size:12px; min-width:88px;}
  .card-row .v{color:#111827; font-size:13px; text-align:right; flex:1; word-break:break-all;}
}


/* wecom h5 enhance */
@media (max-width: 768px){
  .topbar-left{display:flex; align-items:center; gap:8px;}
  #btnBack{display:inline-flex;}
  /* Hide env badge on mobile to reduce clutter */
  .topbar-left .badge{display:none;}
  /* Make page look like wecom: more white space */
  .main{padding: 12px !important;}
  /* cards highlight rules */
  .card-row .v.is-amount{font-weight:900;}
  .card-row .v.is-status{font-weight:800;}
  .card-row .v.is-amount, .card-row .v.is-status{color:#1d4ed8;}
}
@media (min-width: 769px){
  #btnBack{display:none;}
}


/* wecom more menu */
@media (max-width: 768px){
  #btnMore{display:inline-flex;}
  .more-overlay{display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:1201;}
  .more-menu{display:none; position:fixed; left:12px; right:12px; bottom:12px; background:#fff; border-radius:16px; z-index:1202; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.18);} 
  body.more-open .more-overlay{display:block;}
  body.more-open .more-menu{display:block;}
  .more-head{padding:14px 14px 10px 14px; border-bottom:1px solid rgba(0,0,0,.06);} 
  .more-name{font-weight:900; font-size:16px;}
  .more-sub{margin-top:4px; color:#6b7280; font-size:12px;}
  .more-item{display:block; padding:14px; color:#111827; text-decoration:none; border-bottom:1px solid rgba(0,0,0,.06);} 
  .more-item:last-child{border-bottom:0;}
  .more-item.danger{color:#b91c1c; font-weight:800;}
}
@media (min-width: 769px){
  #btnMore{display:none;}
  .more-overlay,.more-menu{display:none !important;}
}



/* fix129: mobile topbar fixed (freeze on scroll) */
@media (max-width: 768px){
  :root{ --topbar-h: 52px; }
  .topbar{ position: fixed !important; top:0; left:0; right:0; }
  /* push content below fixed topbar */
  .main{ padding-top: calc(12px + var(--topbar-h)) !important; }
}



/* fix138: desktop hide mobile filter toolbar/close, keep inline filters */
@media (min-width: 769px){
  .filter-toolbar, .filter-overlay, .filter-close{ display:none !important; }
  .filter-panel{ display:block !important; position:static !important; width:auto !important; max-width:none !important; padding:0 !important; box-shadow:none !important; }
  body.filter-open .filter-panel{ display:block !important; }
}



/* fix138: friendly debug blocks (avoid black background in business UI) */
pre, code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
pre{
  background: #f7f9fc;
  color: #111827;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  padding: 12px;
  overflow: auto;
}
.debug-box, .code-block, .mono-block{
  background: #f7f9fc;
  color: #111827;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  padding: 12px;
}


.code-dark {
  background: linear-gradient(180deg,#071a33 0%, #081a2b 60%, #061426 100%);
  color: #e5e7eb;
  border: 1px solid rgba(255,255,255,.08);
}