/*
 * Site surface system
 *
 * This is the single terminal owner for shared surfaces.  Page modules keep
 * their layout and semantic colours; this sheet owns the material treatment
 * so a card, table, title band, or overlay cannot acquire a second visual
 * language from a legacy theme sheet.
 */
/* Explicit component display rules must not override native hidden semantics. */
html body [hidden]:not([hidden="until-found"]){ display: none !important; }
/* Loading/error states share the same layout in every appearance. */
#panel:has(> .app-startup-state){
  flex: 0 1 auto; align-self: stretch; min-height: 0; padding: 0;
  overflow: auto; border: 0; background: transparent; box-shadow: none;
}
html body .app-startup-state{
  box-sizing: border-box; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  min-height: 200px; margin: 0; padding: 32px 24px;
  color: var(--text-2); text-align: center;
}
html body .app-startup-state strong{ display: block; color: var(--text); font-size: 14px; line-height: 1.5; }
html body .app-startup-state > span:last-of-type{ display: block; max-width: 100%; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
html body .app-startup-icon{ display: inline-flex; align-items: center; gap: 5px; height: 24px; }
html body .app-startup-icon i{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: app-startup-pulse 1.05s ease-in-out infinite; }
html body .app-startup-icon i:nth-child(2){ animation-delay: .14s; }
html body .app-startup-icon i:nth-child(3){ animation-delay: .28s; }
@keyframes app-startup-pulse { 0%, 70%, 100% { opacity: .38; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { html body .app-startup-icon i{ animation: none !important; } }
html[data-theme="f"][data-color-theme="blue"]{
  --site-card: rgba(255, 255, 255, .82);
  --site-card-raised: rgba(255, 255, 255, .94);
  --site-card-muted: rgba(247, 250, 254, .82);
  --site-heading: rgba(239, 246, 253, .92);
  --site-line: rgba(108, 139, 174, .23);
  --site-row-line: rgba(108, 139, 174, .15);
  --site-shadow: 0 8px 24px rgba(42, 76, 116, .07), inset 0 1px 0 rgba(255, 255, 255, .72);
  --site-control: rgba(255, 255, 255, .78);
  --site-control-hover: rgba(237, 246, 255, .96);
}

html[data-theme="f"][data-color-theme="blue"][data-appearance="macos27"]{
  --site-card: rgba(224, 239, 255, .68);
  --site-card-raised: rgba(239, 248, 255, .88);
  --site-card-muted: rgba(215, 233, 251, .54);
  --site-heading: rgba(217, 235, 253, .78);
  --site-line: rgba(89, 143, 199, .27);
  --site-row-line: rgba(89, 143, 199, .18);
  --site-shadow: 0 8px 24px rgba(42, 91, 145, .09), inset 0 1px 0 rgba(255, 255, 255, .58);
  --site-control: rgba(242, 249, 255, .70);
  --site-control-hover: rgba(222, 240, 255, .90);
}

/* 门店详情与编辑共用一个商场详情风格的外托盘，内部信息卡片只承担分组层级。 */
html[data-theme="f"][data-color-theme="blue"]:is([data-appearance="standard"], [data-appearance="macos27"]) .content > .panel:has(.brand-store-detail){
  display:block;
  width:100%;
  max-width:none;
  box-sizing:border-box;
  align-self:stretch;
  flex:1 1 0;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  scrollbar-gutter:stable;
  padding:0 !important;
  border:1px solid var(--site-line) !important;
  border-radius:16px !important;
  background:var(--site-card) !important;
  background-image:none !important;
  box-shadow:var(--site-shadow) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
/* 详情页标题操作按钮由此统一，避免通用主题覆盖危险操作颜色。 */
html[data-theme="f"][data-color-theme="blue"]:is([data-appearance="standard"],[data-appearance="macos27"]) #recordPageActions .btn{ min-width:76px; }



/* 门店删除：单一确认弹窗，原因与备注随记录留存。 */
.store-delete-dialog{ box-sizing:border-box; width:min(540px,calc(100vw - 32px)); max-height:calc(100dvh - 40px); padding:24px; overflow:auto; border:1px solid var(--site-line,var(--border)); border-radius:16px; background:var(--site-card-raised,var(--panel)); color:var(--text); box-shadow:0 16px 48px rgba(30,55,90,.16); }
.store-delete-dialog::backdrop{ background:rgba(22,38,62,.28); backdrop-filter:blur(3px); }
.store-delete-dialog h2{ margin:0 0 8px; font-size:18px; }
.store-delete-dialog header p{ margin:0; color:var(--text-2); font-size:12px; line-height:1.7; }
.store-delete-record{ margin:20px 0; padding:17px 20px; overflow:hidden; border:1px solid color-mix(in srgb,var(--accent) 17%,var(--site-line,var(--border))); border-radius:20px; background:color-mix(in srgb,var(--accent-soft) 37%,var(--site-card-raised,var(--panel)) 63%); box-shadow:0 12px 28px rgba(40,82,132,.07),inset 0 1px 0 rgba(255,255,255,.78); backdrop-filter:blur(18px) saturate(132%); -webkit-backdrop-filter:blur(18px) saturate(132%); }
.store-delete-record-heading{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0; padding:0 0 12px; border-bottom:1px solid color-mix(in srgb,var(--accent) 13%,var(--site-row-line,var(--border))); color:var(--text-2); font-size:11px; font-weight:600; }
.store-delete-record-heading span:last-child{ padding:4px 10px; border:1px solid color-mix(in srgb,var(--accent) 14%,var(--site-line,var(--border))); border-radius:999px; background:color-mix(in srgb,var(--site-card-raised,var(--panel)) 58%,transparent); color:var(--accent); font-size:10px; font-weight:500; box-shadow:inset 0 1px 0 rgba(255,255,255,.72); }
.store-delete-record dl{ display:grid; grid-template-columns:minmax(0,1fr); margin:0; }
.store-delete-record-row{ display:flex; box-sizing:border-box; min-width:0; min-height:54px; flex-direction:column; justify-content:center; gap:5px; padding:9px 2px; border-top:1px solid color-mix(in srgb,var(--accent) 11%,var(--site-row-line,var(--border))); }
.store-delete-record-row-1{ border-top:0; }
.store-delete-record dt{ color:var(--text-2); font-size:10px; line-height:1.3; }
.store-delete-record dd{ margin:0; min-width:0; color:var(--text); font-size:13px; font-weight:550; line-height:1.5; overflow-wrap:anywhere; white-space:normal; }
.store-delete-record-row-1 dd{ color:var(--accent); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; }
.store-delete-record-row-2 dd, .store-delete-record-row-3 dd{ font-size:14px; font-weight:600; }
.store-delete-record dd.is-empty{ color:var(--text-3); font-weight:400; }
.store-delete-dialog fieldset{ margin:0 0 18px; padding:0; border:0; }
.store-delete-dialog legend, .store-delete-note{ font-size:12px; font-weight:500; }
.store-delete-reasons{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:10px; }
.store-delete-reasons label{ position:relative; display:flex; min-height:44px; box-sizing:border-box; align-items:center; gap:9px; padding:0 13px; border:1px solid color-mix(in srgb,var(--accent) 15%,var(--border)); border-radius:12px; background:color-mix(in srgb,var(--site-card-raised,var(--panel)) 58%,transparent); color:var(--text-2); font-size:13px; cursor:pointer; transition:border-color .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease; }
.store-delete-reasons label::before{ flex:0 0 14px; box-sizing:border-box; width:14px; height:14px; border:1.5px solid color-mix(in srgb,var(--text-2) 62%,var(--border)); border-radius:50%; background:transparent; content:""; transition:border-color .16s ease,background .16s ease,box-shadow .16s ease; }
.store-delete-reasons label:hover{ border-color:color-mix(in srgb,var(--accent) 40%,var(--border)); background:color-mix(in srgb,var(--accent-soft) 42%,var(--site-card-raised,var(--panel))); transform:translateY(-1px); }
.store-delete-reasons label:has(input:checked){ border-color:var(--accent); color:var(--accent-strong,var(--accent)); background:linear-gradient(135deg,color-mix(in srgb,var(--accent-soft) 88%,white),color-mix(in srgb,var(--accent) 13%,var(--site-card-raised,var(--panel)))); box-shadow:0 5px 14px color-mix(in srgb,var(--accent) 13%,transparent),inset 0 1px 0 rgba(255,255,255,.78); }
.store-delete-reasons label:has(input:checked)::before{ border-color:var(--accent); background:var(--accent); box-shadow:inset 0 0 0 3px var(--site-card-raised,var(--panel)); }
.store-delete-reasons label:has(input:focus-visible){ outline:2px solid color-mix(in srgb,var(--accent) 48%,transparent); outline-offset:2px; }
.store-delete-reasons input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.store-delete-note{ display:grid; gap:8px; }
.store-delete-note textarea{ box-sizing:border-box; width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:8px; background:var(--input-bg); color:var(--text); font:inherit; line-height:1.6; resize:vertical; }
.store-delete-note textarea:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
#storeDeleteError{ color:var(--danger); font-size:12px; line-height:1.6; }
#storeDeleteError:empty{ display:none; }
.store-delete-dialog footer{ display:flex; justify-content:flex-end; gap:8px; margin-top:20px; padding-top:16px; border-top:1px solid var(--site-row-line,var(--border)); }
html .store-delete-dialog #storeDeleteConfirm{ border-color:var(--danger); background:var(--danger); color:#fff; }
html .store-delete-dialog #storeDeleteConfirm:hover{ filter:brightness(.95); }
html .store-delete-dialog #storeDeleteConfirm:disabled{ opacity:.45; cursor:not-allowed; }
@media (max-width:480px) {
  .store-delete-dialog{ padding:18px; }
  .store-delete-record{ padding:14px 16px; border-radius:16px; }
}
/* Shared cards and page sections use one surface, one line, and one shadow. */
html[data-theme="f"][data-color-theme="blue"]:is([data-appearance="standard"], [data-appearance="macos27"]) :is(
  .content > .panel:not(:has(.dashboard, .brand-store-detail)),
  .settings-page > section,
  .governance-page > section,
  .operation-log-page > section,
  .data-source-page > section,
  .data-lineage-page > section,
  .feedback-page > section,
  .quality-page > section,
  .coverage-page > section,
  .trust-page > section,
  .data-source-panel,
  .data-lineage-panel,
  .settings-table,
  .governance-table,
  .delivery-records,
  .delivery-builder,
  .quality-panel,
  .trust-panel,
  .risk-list-panel,
  .mall-brand-store-panel,
  .coverage-analysis-panel,
  .coverage-fields-panel,
  .record-section,
  .record-geo-section,
  .role-sidebar,
  .role-editor,
  .category-card,
  .department-card,
  .data-source-card,
  .data-lineage-card,
  .quality-rule-card,
  .trust-domain-card
){
  background: var(--site-card) !important;
  background-image: none !important;
  border: 1px solid var(--site-line) !important;
  box-shadow: var(--site-shadow) !important;
}

/* Settings has a navigation rail and one content card. The panel itself is a
   layout container; legacy theme surfaces must not add another frame here. */
#panel:has(> .system-settings-page){
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#panel > .system-settings-page{
  --settings-gutter: 20px;
  box-sizing: border-box;
  gap: 12px;
  padding: 0 0 16px;
}
#panel > .system-settings-page > .settings-tabs{
  --segment-max-width: 100%;
  flex: none;
  margin: 0;
  max-width: 100%;
}
#panel > .system-settings-page > section:not([hidden]){
  box-sizing: border-box;
  flex: 0 1 auto;
  min-width: 0;
  padding: 0;
  border-radius: 16px;
  overflow: auto;
}
#panel > .system-settings-page > section > .settings-head{
  box-sizing: border-box;
  flex: none;
  gap: 16px;
  min-height: 76px;
  margin: 0;
  padding: 16px var(--settings-gutter);
  border-bottom: 1px solid var(--site-row-line, var(--row-line));
  border-radius: 12px 12px 0 0;
  background: transparent !important;
}
#panel > .system-settings-page .settings-head p{ line-height: 1.6; }
#panel > .system-settings-page .settings-head > .btn{ flex: none; }
#panel > .system-settings-page > section:has(.settings-user-list-surface){ overflow: hidden; }
#panel > .system-settings-page .settings-user-list-surface{
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: 0 var(--settings-gutter) 16px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#panel > .system-settings-page .settings-user-toolbar{
  flex: none;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 14px 0 12px;
  border: 0;
  background: transparent;
}
#panel > .system-settings-page .settings-user-toolbar input{
  flex: 0 1 260px;
  width: 260px;
  min-width: 150px;
}
#panel > .system-settings-page .settings-user-toolbar > span{ white-space: nowrap; }
#panel > .system-settings-page .settings-user-list-surface > .settings-table{
  flex: 0 1 auto;
  overflow: auto;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#panel > .system-settings-page .settings-table table{ min-width: 880px; }
#panel > .system-settings-page .settings-user-list-surface > .data-pagination{
  flex: none;
  margin: 0;
  padding-inline: 0;
  border: 0;
  background: transparent !important;
  box-shadow: none !important;
}
#panel > .system-settings-page > section > :is(.department-grid, .role-workspace){
  margin: 0;
  padding: 16px var(--settings-gutter);
}
.settings-user-mask{ box-sizing: border-box; padding: 16px; }
.settings-user-mask > .settings-user-dialog{
  box-sizing: border-box;
  max-width: 100%;
  max-height: calc(100dvh - 32px);
  overflow: auto;
  margin: auto;
}
@media (max-width: 720px) {
  #panel > .system-settings-page{ --settings-gutter: 12px; }
  #panel > .system-settings-page .settings-user-toolbar input{ flex: 1 1 100%; }
  #panel > .system-settings-page .settings-user-toolbar select{ flex: 1 1 120px; min-width: 0; }
}

/* Detail pages: every record section has the same title band and content seam. */
/* Coordinate drawer controls share the same material as its cards and footer. */
.geo-correction-drawer :is(input, textarea, .geo-close){
  background: var(--geo-control) !important;
  background-image: none !important;
  border-color: var(--geo-line) !important;
  color: var(--text-2);
}
.geo-correction-drawer :is(input, textarea):focus-visible{
  border-color: var(--accent) !important;
  outline: 2px solid var(--accent-soft);
  outline-offset: 1px;
}
.geo-correction-drawer :is(.geo-close):hover{
  background: var(--site-control-hover, var(--btn-hover)) !important;
}

/* Headers and table heads use the same quiet separation as record titles. */
html[data-theme="f"][data-color-theme="blue"] .content :is(
  .panel > header,
  .settings-head,
  .delivery-section-head,
  .governance-progress-section-head,
  .operation-log-list > header,
  .data-source-panel > header,
  .data-lineage-panel > header,
  .data-table-wrap thead th,
  .settings-table thead th,
  .governance-row.head,
  .delivery-table-row.head,
  .brand-store-table th,
  .brand-trend-table th
){
  background: var(--site-heading) !important;
  background-image: none !important;
  border-color: var(--site-row-line) !important;
}

html[data-theme="f"][data-color-theme="blue"] .content :is(
  .data-table-wrap,
  .settings-table,
  .governance-table,
  .delivery-records,
  .operation-log-list,
  .brand-store-table,
  .brand-trend-table
) table{
  background: transparent !important;
}

html[data-theme="f"][data-color-theme="blue"] .content :is(
  .data-table-wrap,
  .settings-table,
  .governance-table,
  .delivery-records,
  .operation-log-list,
  .brand-store-table,
  .brand-trend-table
) :is(tbody tr, .governance-row:not(.head), .delivery-table-row:not(.head)){
  background: transparent !important;
  border-color: var(--site-row-line) !important;
}

html[data-theme="f"][data-color-theme="blue"] .content :is(
  .data-table-wrap,
  .settings-table,
  .governance-table,
  .delivery-records,
  .operation-log-list,
  .brand-store-table,
  .brand-trend-table
) :is(tbody tr:hover, .governance-row:not(.head):hover, .delivery-table-row:not(.head):hover){
  background: var(--site-control-hover) !important;
}

/* Controls have the same contour and a calm, short transition everywhere. */
html[data-theme="f"][data-color-theme="blue"] .content :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select,
  textarea,
  .dashboard-search,
  .search-box input,
  .brand-filter-trigger
){
  border-radius: 8px !important;
  border-color: var(--site-line) !important;
  background-color: var(--site-control) !important;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

html[data-theme="f"][data-color-theme="blue"] .content :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select,
  textarea,
  .dashboard-search,
  .search-box input,
  .brand-filter-trigger
):is(:hover, :focus-visible){
  border-color: color-mix(in srgb, var(--accent) 42%, var(--site-line)) !important;
  background-color: var(--site-control-hover) !important;
}

html[data-theme="f"][data-color-theme="blue"] .content :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select,
  textarea,
  .dashboard-search,
  .search-box input,
  .brand-filter-trigger
):focus-visible{
  outline: 2px solid color-mix(in srgb, var(--accent) 25%, transparent) !important;
  outline-offset: 1px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent) !important;
}

html[data-theme="f"][data-color-theme="blue"] .content :is(
  .modal,
  .profile-dialog,
  .settings-user-dialog,
  .governance-dialog,
  .navigation-sort-dialog,
  .drawer-panel,
  .navigation-visibility-drawer,
  .evidence-drawer,
  .feedback-drawer
){
  background: var(--site-card-raised) !important;
  background-image: none !important;
  border: 1px solid var(--site-line) !important;
  box-shadow: 0 20px 52px rgba(30, 58, 91, .18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="f"][data-color-theme="blue"] .content :is(input, select, textarea, .dashboard-search, .search-box input, .brand-filter-trigger){
    transition: none;
  }
}

/* 门店地理位置：字段与地图共享同一内容网格，避免地图漂浮到卡片右下角。 */
html[data-theme="f"][data-color-theme="blue"] .brand-store-detail .store-info-card-geo{
  overflow: hidden;
}

/* 统一字段分隔线：奇数个字段时，最后一项横跨整行，避免右侧出现无边界空格。 */
html[data-theme="f"][data-color-theme="blue"] .brand-store-detail .store-info-fields:not(.store-basic-fields) > .store-info-field:last-child:nth-child(odd){
  grid-column: 1 / -1;
}

html[data-theme="f"][data-color-theme="blue"] .brand-store-detail .store-geo-content{
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .95fr);
  gap: 12px;
  align-items: stretch;
  padding: 0;
}

html[data-theme="f"][data-color-theme="blue"] .brand-store-detail .store-geo-fields{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  min-width: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
}

html[data-theme="f"][data-color-theme="blue"] .brand-store-detail .store-geo-fields .store-info-field{
  min-height: 54px;
  border-left: 0;
  background: transparent;
}

html[data-theme="f"][data-color-theme="blue"] .brand-store-detail .store-geo-map-column{
  display: flex;
  min-width: 0;
}

html[data-theme="f"][data-color-theme="blue"] .brand-store-detail .store-info-map{
  width: 100%;
  min-height: 0;
  margin: 0;
  align-self: stretch;
  border-color: var(--site-line);
  border-radius: 8px;
  box-shadow: none;
}

html[data-theme="f"][data-color-theme="blue"] .brand-store-detail .store-info-map .geo-map-canvas{
  height: 210px;
}

html[data-theme="f"][data-color-theme="blue"] .brand-store-detail .store-info-map .geo-map-loading, html[data-theme="f"][data-color-theme="blue"] .brand-store-detail .store-info-map .geo-map-unconfigured{
  min-height: 210px;
}

@media (max-width: 900px) {
  html[data-theme="f"][data-color-theme="blue"] .brand-store-detail .store-geo-content{
    grid-template-columns: 1fr;
  }

  html[data-theme="f"][data-color-theme="blue"] .brand-store-detail .store-geo-map-column{
    padding: 0 10px 10px;
  }

  html[data-theme="f"][data-color-theme="blue"] .brand-store-detail .store-info-map .geo-map-canvas, html[data-theme="f"][data-color-theme="blue"] .brand-store-detail .store-info-map .geo-map-loading, html[data-theme="f"][data-color-theme="blue"] .brand-store-detail .store-info-map .geo-map-unconfigured{
    min-height: 0;
    height: 200px;
  }
}

@media (max-width: 640px) {
  html[data-theme="f"][data-color-theme="blue"] .brand-store-detail .store-geo-content{ gap: 10px; }
}

.brand-store-toolbar select.brand-store-filter-province, .brand-store-toolbar select.brand-store-filter-city, .brand-store-toolbar select.brand-store-filter-district{
  padding-right:24px !important;
  text-overflow:clip !important;
  background-position:right 7px center !important;
}