/*
 * UI061 房源维护页（Server 分页模式）：首次维护与邀请 / 维护待办两区。
 * 只在 renderMaintenanceDueWorkspace 输出的 .broker-maintenance 内生效；房源库、详情、纯 Demo 维护列表不受影响。
 * 沿 DESIGN.md 与 UI057 的分区写法：浅色白底、12px 细边框、8/12/16/24px 间距、文字状态徽标；电脑 Web 专用。
 */
.broker-maintenance {
  --bm-ink: var(--ink, #18202a);
  --bm-muted: var(--muted, #6c7683);
  --bm-muted-strong: var(--muted-strong, #465160);
  --bm-line: var(--line, #dce3ea);
  --bm-soft: #edf1f5;
  --bm-canvas: #f7f9fb;
  --bm-accent: #2f64c8;
  --bm-accent-soft: #eef3fc;
  --bm-ok: #1f7a46;
  --bm-ok-soft: #ecf6f0;
  --bm-warn: #8a5a00;
  --bm-warn-soft: #fdf5e6;
  --bm-danger: #b42318;
  --bm-danger-soft: #fdf1f0;
  display: grid;
  gap: 24px;
  min-width: 0;
}
.broker-maintenance > .property-page-head { margin: 0; }

.broker-maintenance .broker-maintenance-zone {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--bm-line);
  border-radius: 12px;
  background: #fff;
}
.broker-maintenance .broker-maintenance-zone-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 16px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bm-soft);
}
.broker-maintenance .broker-maintenance-zone-head > div { flex: 1 1 360px; min-width: 0; }
.broker-maintenance .broker-maintenance-zone-head h4 { margin: 0; color: var(--bm-ink); font-size: 16px; line-height: 1.4; }
.broker-maintenance .broker-maintenance-zone-head p { margin: 4px 0 0; color: var(--bm-muted); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.broker-maintenance .broker-maintenance-first-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.broker-maintenance .broker-maintenance-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 2px 10px;
  border: 1px solid var(--bm-line);
  border-radius: 999px;
  background: var(--bm-canvas);
  color: var(--bm-muted-strong);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.broker-maintenance .broker-maintenance-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.broker-maintenance .broker-maintenance-status[data-tone="ok"] { border-color: #c4e2cf; background: var(--bm-ok-soft); color: var(--bm-ok); }
.broker-maintenance .broker-maintenance-status[data-tone="loading"] { border-color: #c9d8f2; background: var(--bm-accent-soft); color: var(--bm-accent); }
.broker-maintenance .broker-maintenance-status[data-tone="error"] { border-color: #f1c6c1; background: var(--bm-danger-soft); color: var(--bm-danger); }

.broker-maintenance .broker-maintenance-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.broker-maintenance .broker-maintenance-pager [role="status"] { color: var(--bm-muted); font-size: 13px; }

.broker-maintenance .broker-maintenance-notice {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--bm-line);
  border-radius: 8px;
  background: var(--bm-canvas);
  color: var(--bm-muted-strong);
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.broker-maintenance .broker-maintenance-notice strong { color: var(--bm-ink); font-size: 14px; }
.broker-maintenance .broker-maintenance-notice[data-tone="error"] { border-color: #f1c6c1; border-left: 3px solid var(--bm-danger); background: var(--bm-danger-soft); }
.broker-maintenance .broker-maintenance-notice[data-tone="error"] strong { color: var(--bm-danger); }
.broker-maintenance .broker-maintenance-notice[data-tone="loading"] { border-style: dashed; color: var(--bm-accent); }
.broker-maintenance .broker-maintenance-empty {
  display: grid;
  gap: 4px;
  padding: 16px;
  border: 1px dashed var(--bm-line);
  border-radius: 8px;
  background: var(--bm-canvas);
  color: var(--bm-muted);
  font-size: 13px;
}
.broker-maintenance .broker-maintenance-empty strong { color: var(--bm-ink); font-size: 14px; }

.broker-maintenance .broker-maintenance-list { display: grid; gap: 12px; min-width: 0; }
.broker-maintenance .broker-maintenance-list:empty { display: none; }
.broker-maintenance .broker-maintenance-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--bm-line);
  border-radius: 8px;
  background: #fff;
}
.broker-maintenance .broker-maintenance-row-main { flex: 1 1 420px; min-width: 0; display: grid; gap: 4px; }
.broker-maintenance .broker-maintenance-row-main strong { color: var(--bm-ink); font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.broker-maintenance .broker-maintenance-row-main p { margin: 0; color: var(--bm-muted); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.broker-maintenance .broker-maintenance-tag {
  justify-self: start;
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
}
.broker-maintenance .broker-maintenance-tag[data-tone="periodic"] { background: var(--bm-accent-soft); color: var(--bm-accent); }
.broker-maintenance .broker-maintenance-tag[data-tone="legacy"] { background: var(--bm-warn-soft); color: var(--bm-warn); }
.broker-maintenance .broker-maintenance-row dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px 16px;
  margin: 8px 0 0;
}
.broker-maintenance .broker-maintenance-row dt { color: var(--bm-muted); font-size: 12px; }
.broker-maintenance .broker-maintenance-row dd { margin: 0; color: var(--bm-ink); font-size: 13px; font-weight: 600; }
.broker-maintenance .broker-maintenance-legacy-status span { margin-right: 8px; color: var(--bm-warn); font-weight: 700; }
.broker-maintenance .broker-maintenance-row-actions { display: flex; flex-wrap: wrap; gap: 8px; flex: none; }

.broker-maintenance button:focus-visible { outline: 2px solid var(--bm-accent); outline-offset: 2px; }