/* 零三维保 - 网页后台设计系统（参考 Linear/Figma/Slack 风格） */

:root {
  /* 背景色 */
  --bg-page: #F5F5F5;
  --bg-card: #FFFFFF;
  --bg-light-green: #E8F5E9;
  --bg-light-blue: #E3F2FD;
  --bg-light-orange: #FFF3E0;
  --bg-purple: #F3E5F5;

  /* 主色 - 业务线 */
  --primary-green: #4CAF50;
  --primary-blue: #2196F3;
  --accent-orange: #FF9800;

  /* 文字颜色 */
  --text-primary: #2C3E50;
  --text-secondary: #7F8C8D;
  --text-hint: #BDC3C7;

  /* 强调色 */
  --link-blue: #2196F3;
  --success-green: #4CAF50;
  --warning-orange: #FF9800;
  --danger-red: #E53935;

  /* 边框与分割 */
  --border-light: rgba(0, 0, 0, 0.06);
  --border-medium: rgba(0, 0, 0, 0.1);

  /* 圆角 */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-card: 16px;
  --radius-pill: 999px;

  /* 阴影 */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.04);
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.1);

  /* 布局尺寸 */
  /* 侧边栏更精致：再窄一些 */
  /* 略窄以增加主区宽度，便于订单列表「订单类型」多标签单行展示 */
  --sidebar-width: 210px;
  --sidebar-collapsed-width: 64px;
  /* 顶栏与侧边品牌区统一高度：更紧凑但不拥挤 */
  --topbar-height: 50px;
  --shadow-sidebar: 0 2px 8px rgba(0, 0, 0, 0.04);
  /* 侧栏方案 D：灰底画布 + 白分组卡片（与内容区卡片语言一致） */
  --sidebar-canvas-bg: #F5F5F5;
  --sidebar-group-bg: #FFFFFF;
  --sidebar-group-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --sidebar-group-border: rgba(0, 0, 0, 0.06);
  --bg-hover: rgba(0, 0, 0, 0.04);
  /* 侧边栏选中态由 layout.css 定义，这里保留 hover/旧页兜底 */
  --bg-active: rgba(76, 175, 80, 0.12);

  /* 兼容旧变量 */
  --card-white: var(--bg-card);

  /* 排版 */
  --line-height-body: 1.55;
  --line-height-tight: 1.35;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* 基础重置 */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: var(--line-height-body);
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 卡片 */
.card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  padding: 24px;
  margin-bottom: 24px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover {
  box-shadow: var(--shadow-md);
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 20px;
  line-height: var(--line-height-tight);
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* 标签 */
.tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
}
.tag-repair { background: var(--bg-light-green); color: var(--primary-green); }
.tag-inspect { background: var(--bg-light-blue); color: var(--primary-blue); }
.tag-patrol { background: var(--bg-light-orange); color: var(--accent-orange); }
/* 安装单主类（列表兼容旧数据；新列表优先用 上门维修+安装 双标签） */
.tag-install { background: var(--bg-purple, #F3E5F5); color: #C91F37; }
/* 上门维修类目第二标签：维修 / 安装 */
.tag-project-repair { background: #E8F5E9; color: #1B5E20; border: 1px solid #A5D6A7; }
.tag-project-install { background: #E3F2FD; color: #1565C0; }
/* 巡检子类型：充电站浅绿、光伏浅橙、储能浅蓝（与上门巡检主标签配合使用） */
.tag-station-charging { background: #E8F5E9; color: #2E7D32; }
.tag-station-solar { background: #FFF3E0; color: #E65100; }
.tag-station-storage { background: #E3F2FD; color: #1565C0; }

/* 按钮 */
.btn-sm {
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-medium);
  background: var(--bg-card);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  display: inline-block;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  box-shadow: none;
}
.btn-sm:hover {
  background: var(--bg-page);
  border-color: var(--primary-blue);
  color: var(--primary-blue);
}
.btn-sm.primary {
  background: var(--primary-green);
  color: #FFF;
  border-color: var(--primary-green);
}
.btn-sm.primary:hover {
  background: #43A047;
  border-color: #43A047;
  color: #FFF;
}
.btn-sm.danger {
  border-color: var(--danger-red);
  color: var(--danger-red);
}
.btn-sm.danger:hover {
  background: #FFEBEE;
  border-color: var(--danger-red);
}

/* 分润模块专用（蓝紫），与派单/通过等绿色主按钮区分 */
.btn.btn-profit-purple,
.btn-sm.btn-profit-purple,
a.btn-sm.btn-profit-purple {
  background: #5C6BC0;
  color: #fff !important;
  border-color: #5C6BC0;
}
.btn.btn-profit-purple:hover,
.btn-sm.btn-profit-purple:hover,
a.btn-sm.btn-profit-purple:hover {
  filter: brightness(1.05);
  color: #fff !important;
  border-color: #5C6BC0;
}

/* 表格 */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
th, td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-light);
  line-height: 1.5;
}
th {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.01em;
}
td {
  color: var(--text-primary);
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Tab 筛选（未选：白底细边框；选中：实心主色，减少阴影更利落） */
.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.tab {
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  border: 1px solid var(--border-medium);
  box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.tab:hover {
  background: var(--bg-page);
  color: var(--text-primary);
  border-color: rgba(0, 0, 0, 0.12);
}
.tab.active {
  background: var(--primary-green);
  color: #FFF;
  border-color: var(--primary-green);
}
.tab.active:hover {
  background: #43A047;
  color: #FFF;
  border-color: #43A047;
}
/* 业务类型 Tab 颜色 */
.tab[data-type="repair"].active { background: var(--primary-green); color: #FFF; border-color: var(--primary-green); }
.tab[data-type="inspect"].active { background: var(--primary-blue); color: #FFF; border-color: var(--primary-blue); }
.tab[data-type="patrol"].active { background: var(--accent-orange); color: #FFF; border-color: var(--accent-orange); }

/* 加载与空状态 */
.loading, .empty, .no-permission {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: var(--line-height-body);
}
.empty-placeholder {
  color: var(--text-hint);
  font-size: 13px;
  margin-top: 8px;
}

/* 链接 */
a {
  color: var(--link-blue);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* 表单 */
input, select, textarea {
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
}
input:focus, select:focus, textarea:focus {
  outline: none;
}
input[type="text"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
  border-color: rgba(76, 175, 80, 0.45);
  box-shadow: none;
  outline: 2px solid rgba(76, 175, 80, 0.28);
  outline-offset: 1px;
}
input::placeholder,
textarea::placeholder {
  color: var(--text-hint);
  opacity: 1;
}

/* 后台弹窗内：标题、标签、正文层次（限高滚动，避免小屏内容顶出或与底层重叠） */
.modal .modal-box {
  font-family: var(--font-ui);
  line-height: var(--line-height-body);
  color: var(--text-primary);
  font-size: 14px;
  max-height: min(90vh, 920px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.modal .modal-box > .card-title,
.modal .modal-box > div.card-title:first-child {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: var(--line-height-tight);
  margin-top: 0;
  margin-bottom: 16px;
  color: var(--text-primary);
}
.modal .modal-box label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
  line-height: 1.4;
  word-break: break-word;
  overflow-wrap: anywhere;
}
/* 弹窗内勾选行（权限等）：保持横向排列，不受上方字段 label 样式影响 */
.modal .modal-box .perm-item label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: 0;
}
.modal .modal-box .actions {
  margin-top: 16px;
}
.modal .modal-box input[type="text"],
.modal .modal-box input[type="number"],
.modal .modal-box input[type="tel"],
.modal .modal-box input[type="password"],
.modal .modal-box input[type="search"],
.modal .modal-box select,
.modal .modal-box textarea {
  line-height: 1.5;
  color: var(--text-primary);
  max-width: 100%;
  box-sizing: border-box;
}
.modal .modal-box textarea {
  min-height: 88px;
  resize: vertical;
  line-height: 1.55;
  width: 100%;
}

/* 后台筛选下拉统一外观 */
.filter-select {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-medium);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 14px;
  min-width: 120px;
  max-width: 100%;
  box-sizing: border-box;
}

/* 订单/合伙人等区域级联（由 regionPicker 挂载） */
.admin-region-cascade {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: center;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.admin-region-cascade-select {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-medium);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 14px;
  min-width: 112px;
  max-width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
}