/* 管理后台共用的小组件：骨架屏扫光、右上角同步图标。 */
.ui-skeleton{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--ui-skeleton-base,#eceee8) 0%,var(--ui-skeleton-shine,#f7f8f4) 50%,var(--ui-skeleton-base,#eceee8) 100%);background-size:200% 100%;animation:ui-shimmer 1.3s linear infinite}
.ui-skeleton.is-lg{height:28px}.ui-skeleton.is-chart{height:220px;margin-top:12px;border-radius:8px}
.ui-skeleton-block{gap:12px!important}
@keyframes ui-shimmer{from{background-position:100% 0}to{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.ui-skeleton{animation:none}}
.wb-sync-icon{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:32px;height:32px;padding:0 8px;border:0;border-radius:8px;background:transparent;color:var(--wb-sync-ok,#2f6b45);font:inherit;font-size:12px;cursor:default;position:relative}
.wb-sync-icon svg{width:18px;height:18px;flex:none}
.wb-sync-icon .wb-sync-time{font-variant-numeric:tabular-nums;color:var(--muted,#6c766d)}
.wb-sync-icon[data-state="syncing"]{color:var(--wb-sync-busy,#a06a10)}.wb-sync-icon[data-state="syncing"] svg{animation:ui-spin 1s linear infinite}
.wb-sync-icon[data-state="stale"]{color:var(--wb-sync-error,#b3412f)}
.wb-sync-icon[data-state="stale"] .wb-sync-time{color:inherit}
.wb-sync-icon:hover::after,.wb-sync-icon:focus-visible::after{content:attr(data-tip);position:absolute;top:calc(100% + 6px);right:0;padding:6px 10px;border-radius:6px;background:var(--ink,#27372f);color:#fff;font-size:12px;white-space:nowrap;z-index:20}
@keyframes ui-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.wb-sync-icon[data-state="syncing"] svg{animation:none}}
/* “保持登录”一行和登录按钮都不另加外边距，只靠表单的统一间距，复选框上下留白相同。 */
.admin-login-remember{display:flex;align-items:center;gap:8px;margin:0;font-size:14px;color:var(--ink,#27372f)}
.admin-body .admin-login #login-form .primary{margin-top:0}
.admin-login-remember input{width:18px;height:18px;margin:0}
.admin-login-remember small{color:var(--muted,#6c766d);font-size:12px}
.admin-login-notice{margin:0 0 12px;padding:8px 12px;border-radius:8px;background:#fbf3e6;color:#7a4b12;font-size:13px}
/* 博悦收银 App 的 PIN 登录与设置（admin-cashier-login.js）。 */
.admin-pin{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.admin-pin h2{margin:0;font-size:19px}
.admin-pin-detail{margin:0;font-size:14px;color:var(--muted,#6c766d)}
.admin-pin-dots{display:flex;gap:16px;margin:6px 0 2px}
.admin-pin-dots i{width:16px;height:16px;border:2px solid var(--bd-brand,#214f3d);border-radius:50%}
.admin-pin-dots i.is-on{background:var(--bd-brand,#214f3d)}
.admin-pin-error{min-height:20px;margin:0;font-size:14px;color:#a1332a}
.admin-pin-keys{display:grid;grid-template-columns:repeat(3,80px);gap:10px}
.admin-body .admin-pin-keys button{min-height:56px;padding:0;font-size:24px;font-weight:600;justify-content:center;touch-action:manipulation}
.admin-body .admin-pin-keys button.is-edit{font-size:14px;font-weight:500}
.admin-pin.is-busy{opacity:.6;pointer-events:none}
.admin-login [hidden]{display:none!important}

/* 预约商品管理：勾选后的批量操作条浮在视口底部，不再插入列表上方把整页往下推。 */
.catalog-bulk-actions{position:fixed;z-index:40;left:50%;bottom:20px;transform:translateX(-50%);width:min(980px,calc(100vw - 32px));margin:0;border:1px solid #cfdccc;border-radius:12px;box-shadow:0 12px 32px rgba(23,40,31,.18)}
.admin-main.has-floating-actions{padding-bottom:112px}
@media (prefers-reduced-motion:no-preference){.catalog-bulk-actions:not([hidden]){animation:ui-rise .16s ease-out}}
@keyframes ui-rise{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

.ui-skeleton-page{display:flex;flex-direction:column;gap:20px;padding:4px 0}
.ui-skeleton-heading{display:flex;flex-direction:column;gap:10px}
.ui-skeleton-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.ui-skeleton-card{display:flex;flex-direction:column;gap:10px;padding:16px;border:1px solid var(--line,#e3e7de);border-radius:10px;background:var(--white,#fff)}
.ui-skeleton-table{display:flex;flex-direction:column;border:1px solid var(--line,#e3e7de);border-radius:10px;background:var(--white,#fff);overflow:hidden}
.ui-skeleton-row{display:flex;gap:24px;align-items:center;padding:16px 18px;border-top:1px solid var(--line,#e3e7de)}
.ui-skeleton-row:first-child{border-top:0}
/* 登录页：左边品牌区（logo、标题），右边登录表单 / PIN / 离线收银入口。
   宽度 ≥900px 时两栏等宽等高、分隔线在卡片正中，两栏内边距相同，各自的内容在本栏里上下左右居中，左右镜像对称；手机等窄屏上下排。 */
.admin-login-brand{text-align:center}
.admin-body .admin-login .admin-login-brand{margin-bottom:28px}
.admin-body .admin-login .admin-login-brand p{margin:10px 0 0;text-wrap:balance}
@media (min-width:900px){
  .admin-body .admin-login{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;max-width:840px;margin:8vh auto 24px;padding:48px 0}
  .admin-body:has(.admin-login){min-height:100dvh}
  .admin-login-brand,.admin-login-panel,.admin-body .admin-login>.admin-pin{display:flex;flex-direction:column;justify-content:center;padding:0 48px}
  .admin-body .admin-login .admin-login-brand{grid-column:1;align-items:center;margin-bottom:0}
  .admin-login-panel,.admin-body .admin-login>.admin-pin{grid-column:2;grid-row:1;box-shadow:inset 1px 0 0 var(--line,#e3e7de)}
  .admin-body .admin-login>.admin-pin{align-items:center}
  /* 分隔线用内阴影画，不占右栏宽度，两栏内容与卡片边的距离完全相同。
     logo 图片上下有透明留白（上约 17px、下约 15px），按肉眼可见的 logo 顶到标题文字底算中线，负边距让这一组与右侧表单落在同一条中线上。 */
  .admin-body .admin-login .admin-login-brand picture{display:block;line-height:0}
  .admin-body .admin-login .admin-login-brand img{width:96px;height:96px;margin:-12px auto 0}
  .admin-body .admin-login .admin-login-brand h1{margin:8px 0 0}
  .admin-body .admin-login .admin-login-brand p{margin:8px 0 0}
  .admin-login-panel #login-form{gap:12px}
}
/* 深色模式下 logo 垫了整块浅色底（admin-theme.css），看得见的就是整张图，不再抵掉透明留白。 */
@media (min-width:900px) and (prefers-color-scheme:dark){.admin-body .admin-login .admin-login-brand img{margin:0 auto 8px}}
/* 登录页（含 PIN 与断网收银入口）：卡片在视口里上下左右居中，页面本身不滚动、背景不动；
   卡片比屏幕高时（手机或弹出键盘）只在铺满视口的 #app 里滚动，背景仍然不动。auto 外边距居中，放不下时从顶部排起、不会被裁掉。 */
html:has(.admin-login),.admin-body:has(.admin-login){height:100%;overflow:hidden;overscroll-behavior:none}
.admin-body #app:has(>.admin-login){position:fixed;inset:0;display:grid;padding:16px;overflow:auto;overscroll-behavior:contain;background:inherit}
.admin-body #app>.admin-login{margin:auto}
/* 页头操作按钮放在同一组里靠右对齐，不被 space-between 拆散；订单工具栏第一行筛选与搜索，第二行操作按钮，分区开关靠右。 */
.admin-heading-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}
.wb-toolbar-break{flex-basis:100%;height:0}
/* 预约与配货：“个人预约单 / 备货汇总”分段按钮紧跟大标题，两个视图共用同一页头，切换时按钮和日期、入口都不移位。 */
.wb-title-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.wb-seg{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--bd-line,#e3e7de);border-radius:10px;background:var(--bd-sunken,#f0f2ec)}
.wb-seg-btn{min-height:34px;padding:6px 14px;border:0;border-radius:7px;background:transparent;color:var(--bd-muted,#6c766d);font:inherit;font-size:13px;white-space:nowrap;cursor:pointer}
.wb-seg-btn:hover{color:var(--bd-brand,#214f3d)}
.wb-seg-btn[aria-pressed="true"]{background:var(--bd-surface,#fff);color:var(--bd-brand,#214f3d);font-weight:600;box-shadow:0 1px 2px rgba(23,40,31,.14)}
.wb-toolbar-spacer{flex:1 1 auto}
.pickup-summary-balance{margin-bottom:16px}
@media print{.wb-seg{display:none!important}}
/* 销售统计的口径说明默认折叠，不常驻页面。 */
details.sales-warnings,details.inv-warnings{margin:0 0 12px;padding:0;border:0;background:none;color:var(--muted,#6c766d);font-size:12px;line-height:1.8}
details.sales-warnings summary,details.inv-warnings summary{width:max-content;cursor:pointer}
details.sales-warnings ul,details.inv-warnings ul{margin:6px 0 0;padding-left:20px}
/* 预约设置：去掉右侧规则栏后，表单卡片限宽，开关不被拉到屏幕最右。 */
.admin-body .st-layout>.st-card{max-width:760px}
/* 状态筛选按钮各页同一个样子：用户管理、员工管理与预约、商品页的 wb-filter 一致（白底细边，选中浅灰底）。 */
.admin-body :is(.ct-tabs,.staff-filters) button,.admin-body .ct-tabs .ct-tab-warn{min-height:32px;padding:5px 10px;border:1px solid var(--bd-line,#e3e7de);border-radius:6px;background:#fff;color:var(--ui-muted,#58655e);font-size:13px;font-weight:400}
.admin-body :is(.ct-tabs,.staff-filters) button:hover{border-color:var(--bd-border-strong,#aab6ae)}
.admin-body :is(.ct-tabs,.staff-filters) button[aria-pressed="true"]{border-color:var(--ui-active,#dfe6e0);background:var(--ui-active,#dfe6e0);color:var(--ui-text,#23332b)}
/* 筛选行里的输入框、下拉、日期与“查询 / 刷新”按钮同为 40px，与相邻控件同高、底边对齐（手机宽度仍按 44px 触控尺寸）。 */
@media (min-width:641px){
 .admin-body #admin-main :is(.sales-filter,.finance-filter,[id="vendor-procurement-form"],.inv-toolbar,.calendar-tools,.contacts-toolbar,.staff-toolbar,.catalog-toolbar) :is(input[type=search],input[type=text],input[type=month],input.wb-date-input,select,button.secondary,button.primary){height:40px;min-height:40px;box-sizing:border-box}
 .admin-body #admin-main .finance-date-range{height:40px;min-height:40px;box-sizing:border-box}
 .admin-body #admin-main .finance-date-range input.wb-date-input{height:100%;min-height:0}
 .admin-body #admin-main .catalog-toolbar select{padding:8px 11px;border-radius:6px;font-size:13px}
 .admin-body #admin-main .sales-presets{height:40px;box-sizing:border-box}
 .admin-body #admin-main .sales-presets .sales-preset{height:100%;min-height:0}
}
/* 库存商品管理：页头与其他栏目同高（36px 按钮、顶端对齐），切到“单据记录”没有页头按钮时标签页也不上移。 */
.admin-body .inv-heading{min-height:36px}
.admin-body .inv-heading .inv-actions{padding-top:0}
.admin-body .inv-heading .inv-actions button{height:36px;min-height:36px}
/* 页头：有无右侧按钮都同高，切换栏目内的视图（营销内容类型、库存单据）时标签页不上下跳。 */
.admin-body .admin-main>.admin-heading,.admin-body .admin-main>section>.admin-heading{min-height:36px}
/* 备货汇总的供应商工具栏下面不接表格，四边都有边框。 */
.admin-body .wb-toolbar.is-standalone{border-bottom:1px solid var(--bd-line,#e3e7de);border-radius:8px}
/* 订单表格在窄屏横向滚动，不把配货清单挤成一字一行。 */
.admin-body .wb-table{min-width:1080px}