/* ==========================================================================
   TDesign 主题适配层  tdesign-theme.css
   --------------------------------------------------------------------------
   作用：在不改动任何业务逻辑（JS / id / onclick / innerHTML）的前提下，
        将现有原生按钮、表单、标签、分页等元素的视觉统一为 TDesign 设计语言。
   原理：本文件在各页面 <style> 之后引入，依据「层叠顺序后者优先」覆盖既有样式；
        同时把各页面的强调色变量 --accent 统一为 TDesign 品牌蓝。
   依据：TDesign 桌面端设计令牌（Design Tokens）官方规范。
   ========================================================================== */

:root {
  /* —— TDesign 品牌色 —— */
  --td-brand-color:            #0052D9;
  --td-brand-color-hover:      #266FE8;
  --td-brand-color-active:     #0034B5;
  --td-brand-color-focus:      #BBCEFB;
  --td-brand-color-light:      #F2F3FF;

  /* —— 文本色 —— */
  --td-text-color-primary:     rgba(0,0,0,.9);
  --td-text-color-secondary:   rgba(0,0,0,.6);
  --td-text-color-placeholder: rgba(0,0,0,.4);
  --td-text-color-anti:        #fff;

  /* —— 描边 / 背景 —— */
  --td-component-stroke:       #E7E7E7;
  --td-component-border:       #DCDCDC;
  --td-bg-color-container:     #fff;
  --td-bg-color-secondary:     #F3F3F3;

  /* —— 功能色 —— */
  --td-success-color:          #2BA471;
  --td-warning-color:          #E37318;
  --td-error-color:            #D54941;

  /* —— 圆角 —— */
  --td-radius-small:           2px;
  --td-radius-default:         3px;
  --td-radius-medium:          6px;
  --td-radius-large:           9px;

  /* —— 阴影 —— */
  --td-shadow-1: 0 1px 10px rgba(0,0,0,.05), 0 4px 5px rgba(0,0,0,.08), 0 2px 4px -1px rgba(0,0,0,.12);
  --td-shadow-2: 0 3px 14px 2px rgba(0,0,0,.05), 0 8px 10px 1px rgba(0,0,0,.06), 0 5px 5px -3px rgba(0,0,0,.1);

  /* 将各页面既有强调色统一到 TDesign 品牌蓝（变量覆盖，无副作用） */
  --accent:  #0052D9;
  --accent2: #266FE8;
}

/* ==========================================================================
   Button 按钮
   ========================================================================== */

/* 通用按钮基座（workorder / contacts / inspection 的 .btn） */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  border-radius: var(--td-radius-default);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}

/* 主按钮 —— TDesign Primary（填充） */
.btn-primary {
  background: var(--td-brand-color);
  border-color: var(--td-brand-color);
  color: var(--td-text-color-anti);
}
.btn-primary:hover {
  background: var(--td-brand-color-hover);
  border-color: var(--td-brand-color-hover);
  color: var(--td-text-color-anti);
  opacity: 1;
}
.btn-primary:active {
  background: var(--td-brand-color-active);
  border-color: var(--td-brand-color-active);
}

/* 次按钮 / 描边按钮 —— TDesign Default（outline） */
.btn-ghost {
  background: var(--td-bg-color-container);
  border-color: var(--td-component-border);
  color: var(--td-text-color-primary);
}
.btn-ghost:hover {
  background: var(--td-bg-color-container);
  border-color: var(--td-brand-color);
  color: var(--td-brand-color);
}

/* ==========================================================================
   首页 index.html 的 .btn-gov 系列按钮
   ========================================================================== */
.btn-gov {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--td-radius-default);
  border: 1px solid transparent;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn-blue,
.btn-red {
  background: var(--td-brand-color) !important;
  border-color: var(--td-brand-color) !important;
  color: var(--td-text-color-anti) !important;
}
.btn-blue:hover,
.btn-red:hover {
  background: var(--td-brand-color-hover) !important;
  border-color: var(--td-brand-color-hover) !important;
  color: var(--td-text-color-anti) !important;
}
.btn-line {
  background: var(--td-bg-color-container);
  border: 1px solid var(--td-component-border);
  color: var(--td-text-color-primary);
}
.btn-line:hover {
  border-color: var(--td-brand-color);
  color: var(--td-brand-color);
}

/* 分页按钮 —— TDesign Pagination */
.page-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--td-radius-default);
  border: 1px solid var(--td-component-border);
  background: var(--td-bg-color-container);
  color: var(--td-text-color-primary);
  font-size: 14px;
  transition: .2s;
}
.page-btn.active {
  background: var(--td-brand-color);
  border-color: var(--td-brand-color);
  color: var(--td-text-color-anti);
}
.page-btn:hover:not(.active) {
  border-color: var(--td-brand-color);
  color: var(--td-brand-color);
}

/* ==========================================================================
   Input / Select / Textarea 表单
   ========================================================================== */
.form-group input,
.form-group select,
.form-group textarea,
.fg input,
.fg select,
.fg textarea,
.filter-input,
.filter-select,
.search-input {
  height: 32px;
  padding: 0 8px;
  font-size: 14px;
  color: var(--td-text-color-primary);
  background: var(--td-bg-color-container);
  border: 1px solid var(--td-component-border);
  border-radius: var(--td-radius-default);
  transition: border-color .2s ease, box-shadow .2s ease;
  box-sizing: border-box;
}
.form-group textarea,
.fg textarea {
  height: auto;
  min-height: 80px;
  padding: 6px 8px;
  line-height: 1.5;
}
.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover,
.fg input:hover,
.fg select:hover,
.fg textarea:hover,
.filter-input:hover,
.filter-select:hover,
.search-input:hover {
  border-color: #B5B5B5;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.fg input:focus,
.fg select:focus,
.fg textarea:focus,
.filter-input:focus,
.filter-select:focus,
.search-input:focus {
  outline: none;
  border-color: var(--td-brand-color);
  box-shadow: 0 0 0 2px var(--td-brand-color-focus);
}
.form-group input::placeholder,
.fg input::placeholder,
.filter-input::placeholder,
.search-input::placeholder,
.form-group textarea::placeholder {
  color: var(--td-text-color-placeholder);
}
.form-group label,
.fg label {
  color: var(--td-text-color-secondary);
  font-size: 14px;
  font-weight: 400;
}

/* ==========================================================================
   Tag / Badge 标签（保留语义色，统一 TDesign 标签形态：圆角 3px / 字号 12px）
   ========================================================================== */
.badge,
.status-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 400;
  border-radius: var(--td-radius-default);
}

/* 筛选 chip —— TDesign 选择型标签 */
.stat-chip {
  border-radius: var(--td-radius-default);
  border: 1px solid var(--td-component-border);
  transition: .2s;
}
.stat-chip.active,
.stat-chip:hover {
  border-color: var(--td-brand-color);
  color: var(--td-brand-color);
  background: var(--td-brand-color-light);
}

/* ==========================================================================
   Card / Modal 容器 —— 统一 TDesign 圆角与描边
   ========================================================================== */
.order-card,
.contact-card,
.timeline-body,
.stat {
  border: 1px solid var(--td-component-stroke);
  border-radius: var(--td-radius-medium);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.order-card:hover,
.contact-card:hover,
.timeline-body:hover,
.stat:hover {
  border-color: var(--td-brand-color);
  box-shadow: var(--td-shadow-1);
}

.modal {
  border-radius: var(--td-radius-large);
  box-shadow: var(--td-shadow-2);
}
.modal h2 {
  color: var(--td-text-color-primary);
}