/* Shared admin spacing and workspace layout. Keep wide data inside table scrollers. */
:root {
  --admin-bg:#f5f6f8;
  --admin-surface:#fff;
  --admin-ink:#252b32;
  --admin-muted:#68717f;
  --admin-line:#e4e7ec;
  --admin-accent:#96723c;
  --admin-space:24px;
  --admin-radius:14px;
  --admin-font:"PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
body { background:var(--admin-bg); }
body::before,body::after { display:none; }
.app { grid-template-columns:244px minmax(0,1fr); }
.sidebar { height:100dvh; min-height:0; background:#fafbfc; border-right:1px solid var(--admin-line); box-shadow:none; backdrop-filter:none; }
.brand { padding:28px 24px; border-bottom:1px solid var(--admin-line); }
.brand h1 { font-size:30px; line-height:1.25; margin-top:12px; letter-spacing:-.03em; }
.brand .eyebrow { letter-spacing:.14em; color:#7b8490; }
.nav { flex:1; min-height:0; overflow-y:auto; padding:16px 12px; gap:8px; }
.nav-group,.nav-group.is-current { border:0; background:transparent; }
.nav button { font-family:var(--admin-font); font-size:14px; letter-spacing:0; min-height:44px; border:0; border-radius:8px; transition:background .16s ease,color .16s ease; }
.nav .nav-group-head { padding:10px 12px; }
.nav button:hover { padding-left:12px; background:#eceff3; color:var(--admin-ink); }
.nav-group.open .nav-group-head,.nav-group.is-current .nav-group-head { color:var(--admin-ink); background:#e9edf2; }
.nav .nav-sub { padding:6px 0 0 12px; gap:4px; }
.nav .nav-sub button { padding:9px 12px; }
.nav .nav-sub button:hover { padding-left:12px; }
.nav .nav-sub button.active,.nav-group.is-direct .nav-group-head { background:var(--admin-ink); color:#fff; }
.nav button.active span { color:#dce0e5; }
.operator { padding:16px; border-top:1px solid var(--admin-line); gap:12px; }
.operator-meta { font-family:var(--admin-font); font-size:12px; line-height:1.75; color:var(--admin-muted); }
.operator .btn { min-height:40px; border:1px solid var(--admin-line); border-radius:8px; font:500 13px/1.5 var(--admin-font); }
.main { width:100%; min-width:0; padding:32px 32px 48px; font-family:var(--admin-font); }
.page { max-width:1640px; margin:0 auto; }
.admin-page-heading { margin:0 0 24px; padding:0; }
.admin-page-heading h2 { margin:0; color:var(--admin-ink); font:600 28px/1.45 var(--admin-font); letter-spacing:-.025em; }
.main .panel { margin-top:24px; border:1px solid var(--admin-line); border-radius:var(--admin-radius); background:var(--admin-surface); box-shadow:none; transition:none; }
.main .panel:hover { box-shadow:none; transform:none; }
.main .panel-header { min-height:72px; padding:20px var(--admin-space); gap:12px 16px; align-items:center; }
.main .panel-header h3 { font:600 19px/1.5 var(--admin-font); color:var(--admin-ink); }
.main .panel-header .list-tools { margin-left:auto; width:auto; }
.main .panel-grid { margin-top:24px; gap:24px; align-items:start; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); }
.main .panel-grid > .panel { margin-top:0; }
.main .panel > :is(p,h4,label,.modal-note,.list-tools) { margin-left:var(--admin-space); margin-right:var(--admin-space); }
.main .panel > :is(p,.modal-note) { padding:0; margin-top:16px; margin-bottom:16px; color:var(--admin-muted); font-size:14px; line-height:1.75; }
.main .panel > h4 { margin-top:24px; margin-bottom:12px; font:600 16px/1.5 var(--admin-font); color:var(--admin-ink); }
.main .panel > label { display:flex; align-items:center; gap:8px; margin-top:16px; margin-bottom:16px; font-size:14px; }
.main .panel > .list-tools { margin-top:16px; margin-bottom:16px; }
.main .panel .panel-header + .modal-note { margin-top:16px; }
.main .list-tools { display:flex; align-items:center; flex-wrap:wrap; gap:12px; min-width:0; }
.main :is(.filters,.tabs) { padding:16px var(--admin-space); gap:12px; }
.main .tabs { border-bottom:1px solid var(--admin-line); margin-bottom:0; }
.main .tabs button { min-height:40px; font-size:14px; line-height:1.5; }
.main .form-grid,.modal .form-grid { padding:var(--admin-space); gap:20px 24px; min-width:0; }
.main .form-grid .field,.modal .form-grid .field { min-width:0; gap:8px; }
.main .form-grid .field > label,.modal .form-grid .field > label { color:#535d6a; font-size:14px; line-height:1.5; letter-spacing:0; }
:is(.main,.modal) :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),select) { min-height:44px; border-radius:8px; font-family:var(--admin-font); font-size:14px; }
:is(.main,.modal) textarea { border-radius:8px; font-family:var(--admin-font); font-size:14px; line-height:1.75; }
:is(.main,.modal) .btn { min-height:40px; padding:9px 16px; font-family:var(--admin-font); font-size:14px; line-height:1.5; box-shadow:none; }
:is(.main,.modal) :is(button,input,select,textarea,a):focus-visible { outline:3px solid #b7a07a; outline-offset:2px; }
.main .table-scroll { width:100%; min-width:0; max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; }
.main table { min-width:980px; table-layout:auto; }
.main :is(th,td) { padding:16px 20px; font-family:var(--admin-font); letter-spacing:0; }
.main th { font-size:13px; color:var(--admin-muted); white-space:nowrap; }
.main td { min-width:88px; font-size:14px; line-height:1.65; word-break:normal; overflow-wrap:break-word; }
.main td :is(.status,.btn,.link-btn) { white-space:nowrap; }
.main .panel-footer { padding:16px var(--admin-space); border-top:1px solid var(--admin-line); }
.main .panel-header:has(>button:first-child):not(:has(h3)) { min-height:64px; }
.main :is(.grid-stats,.ops-stats),#financeSummary,#voucherSummary,#yxOrderOps .ops-stats {
  display:grid; grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  overflow:visible; gap:16px; margin-top:0; margin-bottom:24px;
}
.main .grid-stats .stat,.main .ops-stat { min-height:100px; min-width:0; padding:20px; border:1px solid var(--admin-line); border-radius:12px; box-shadow:none; gap:12px; }
.main .grid-stats .stat strong,.main .ops-stat strong { font-variant-numeric:tabular-nums; font-size:26px; line-height:1.25; }
#dashboardLiveStats { grid-template-columns:repeat(4,minmax(0,1fr)); }
#dashboard .quick-section { border:1px solid var(--admin-line); border-radius:var(--admin-radius); overflow:hidden; background:#fff; }
#dashboard .quick-grid { grid-template-columns:repeat(3,minmax(0,1fr)); border:0; }
#dashboard .quick-card { min-height:104px; padding:20px; gap:12px; border-color:var(--admin-line); background:#fff; transition:background .16s ease; }
#dashboard .quick-card:hover { background:#f6f7f9; transform:none; box-shadow:none; }
#dashboard .quick-card strong { font:500 20px/1.2 var(--admin-font); color:var(--admin-accent); }
#dashboard .quick-card span { font:500 14px/1.5 var(--admin-font); color:#535d6a; }
#dashboard .event { min-height:76px; padding:16px 24px; transition:background .16s ease; }
#dashboard .event:hover { padding-left:24px; }
#dashboard .event strong { font-size:16px; }
#productTaskStats { margin:16px 24px; }
#productTaskStats:empty { display:none; }
#productTaskFilters { margin:16px 24px; }
#productOpsPanel > .list-tools :is(input,select) { min-width:140px; }
#productOpsPanel table { table-layout:auto; }
#productOpsPanel td { overflow-wrap:break-word; }
#productOpsPanel td:nth-child(2),#productOpsPanel td:nth-child(3) { min-width:120px; }
#onboardingCounts { padding:0 24px 16px; }
#productMetricsStats { margin:0 24px 20px; }
#financeFilters,#voucherFilters { grid-template-columns:repeat(3,minmax(0,1fr)); }
#financeListNote,#systemLiveNote { margin:16px 24px; padding:0; }
#financeActions,#systemLiveActions { padding:16px 24px 0; }
#systemLiveTable > :is(.tabs,form) { border-bottom:1px solid var(--admin-line); }
#systemLiveTable [data-message-results] > .list-tools { padding:16px 24px; }
#systemLiveTable .audit-log-table { min-width:1400px; }
#systemLiveTable .audit-log-table :is(th,td) { white-space:nowrap; word-break:normal; overflow-wrap:normal; }
#systemLiveTable .audit-log-detail { width:600px; white-space:pre-wrap; overflow-wrap:break-word; }
#directoryVoucherTools { padding:0 24px 16px; }
.main .academy-admin-content { padding:24px; }
.modal-backdrop { padding:24px; background:rgba(24,28,35,.35); backdrop-filter:blur(4px); }
.modal { border-radius:16px; max-height:calc(100dvh - 48px); box-shadow:0 24px 80px rgba(24,28,35,.18); }
.modal .modal-header { padding:20px 24px; min-height:76px; }
.modal .modal-header h3 { font:600 21px/1.5 var(--admin-font); }
.modal :is(.modal-actions,.modal-footer) { padding:16px 24px; gap:12px; }
.modal [data-message-content] > :is(h3,p,.list-tools) { margin:16px 24px; }
.modal [data-message-content] > h3 { font-size:18px; }
.modal [data-message-content] > p { font-size:14px; line-height:1.75; }
.modal [data-message-content] .table-scroll { overflow-x:auto; }
.modal [data-message-preview-users] > .list-tools { padding:16px 0 0; }
@media(min-width:1680px) { .main { padding:40px 48px 56px; } }
@media(max-width:1200px) {
  .app { grid-template-columns:220px minmax(0,1fr); }
  .main { padding:24px; }
  #financeFilters,#voucherFilters { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .main .panel-grid { grid-template-columns:minmax(0,1fr); }
}
@media(min-width:761px) and (max-width:980px) {
  .app { grid-template-columns:200px minmax(0,1fr); }
  .sidebar { position:sticky; top:0; height:100dvh; border-right:1px solid var(--admin-line); border-bottom:0; }
  .nav { display:flex; flex-direction:column; }
  .brand { padding:24px 16px; }
  .brand h1 { font-size:25px; }
  .operator { display:grid; }
  #dashboardLiveStats { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:760px) {
  :root { --admin-space:16px; }
  .app { display:block; }
  .sidebar { position:relative; height:auto; min-height:0; border-right:0; border-bottom:1px solid var(--admin-line); }
  .brand { padding:16px; }
  .brand h1 { margin:0; font-size:24px; }
  .brand .eyebrow,.operator { display:none; }
  .nav { padding:8px 12px; max-height:210px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; overflow:auto; }
  .nav .nav-sub { padding-left:0; }
  .main { padding:20px 16px 32px; }
  .admin-page-heading { margin-bottom:20px; }
  .admin-page-heading h2 { font-size:25px; }
  .main .panel { margin-top:20px; }
  .main .panel-header { padding:16px; }
  .main .panel-header .list-tools { width:100%; margin-left:0; }
  .main :is(.grid-stats,.ops-stats),#financeSummary,#voucherSummary,#dashboardLiveStats,#yxOrderOps .ops-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  #financeFilters,#voucherFilters,.main .form-grid { grid-template-columns:minmax(0,1fr); }
  #dashboard .quick-card { padding:16px; }
  #dashboard .quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #onboardingCounts { padding:0 16px 16px; }
  #productMetricsStats,#productTaskStats { margin-left:16px; margin-right:16px; }
  #financeListNote,#systemLiveNote { margin:16px; }
  #financeActions,#systemLiveActions { padding:16px 16px 0; }
  #systemLiveTable [data-message-results] > .list-tools { padding:16px; }
  .modal-backdrop { padding:12px; }
  .modal { width:100%; max-height:calc(100dvh - 24px); }
  .modal .modal-header,.modal .form-grid,.modal :is(.modal-actions,.modal-footer) { padding:16px; }
  .modal [data-message-content] > :is(h3,p,.list-tools) { margin:16px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .sidebar *,.main *,.modal * { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
/* Keep navigation rows compact instead of distributing them over the sidebar height. */
.editorial-grid { display:none; }
.nav { align-content:start; grid-auto-rows:min-content; }
.nav-group { align-self:start; }
.nav .nav-group-head { height:auto; min-height:44px; }
.nav .nav-sub { border:0; background:transparent; }
.nav button:hover::after { transform:none; }
.main .panel-header:has(>h3) > h3 { margin-right:auto; }
.main .panel-header > .btn + .btn { margin-left:0; }
.nav-group { width:100%; }
@media(max-width:760px) {
  .sidebar .operator { display:flex; padding:8px 16px; justify-content:flex-end; }
  .sidebar .operator-meta { display:none; }
  .sidebar .operator .btn { width:auto; min-width:88px; }
}
#yxOrderOps:not(:empty) { padding:24px; }
#activitySignupSummary:not(:empty) { padding:0 24px; }
#youxue .panel-header .list-tools { flex:0 0 auto; width:auto; flex-wrap:nowrap; }
#youxue .panel-header #yxModuleSelect { width:200px; flex:0 0 200px; }
@media(max-width:760px) {
  #yxOrderOps:not(:empty) { padding:16px; }
  #activitySignupSummary:not(:empty) { padding:0 16px; }
  #youxue .panel-header .list-tools { width:100%; flex-wrap:wrap; }
  #youxue .panel-header #yxModuleSelect { flex:1 1 180px; }
}