/*
  arco-lite.css - 企业级通用可视化UI（99%场景适配），无依赖，覆盖本项目使用到的类名
  - 配色与尺寸借鉴企业蓝主题，兼容移动端
*/

:root {
  --primary: #165DFF;
  --primary-hover: #3c7dff;
  --success: #00B42A;
  --warning: #FF7D00;
  --danger: #F53F3F;
  --text: #1f2328;
  --subtext: #6e7781;
  --bg: #f5f7fa;
  --card: #fff;
  --border: #e5e6eb;
}

html, body { margin:0; padding:0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Typography */
.arco-typography { font-size: 14px; line-height: 1.6; }
.arco-typography-secondary { color: var(--subtext); font-size: 13px; }
.arco-card-title { font-weight: 600; }

/* Layout */
.arco-layout-header {
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.arco-layout-content { padding: 16px; }

/* Card */
.arco-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(22,93,255,.06);
}
.arco-card-bordered { border: 1px solid var(--border); }
.arco-card-header { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.arco-card-body { padding: 16px; }

/* Form */
.arco-form { width: 100%; }
.arco-form-item { display: flex; align-items: center; gap: 12px; margin: 12px 0; flex-wrap: wrap; }
.arco-form-item-label { width: 120px; color: var(--subtext); font-size: 13px; }
.arco-form-item-wrapper { flex: 1; min-width: 220px; }
.arco-form-item-wrapper[style] { min-width: 0 !important; }
.arco-input, .arco-select {
  width: 100%;
  padding: 10px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  box-sizing: border-box;
}
.arco-input:focus, .arco-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(22,93,255,.12); }

/* Buttons */
.arco-btn { display: inline-block; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border); background:#fff; color: var(--text); cursor: pointer; text-decoration: none; }
.arco-btn:hover { border-color: var(--primary); color: var(--primary); }
.arco-btn-primary { background: var(--primary); color:#fff; border-color: var(--primary); }
.arco-btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.arco-btn-outline { background:#fff; color: var(--primary); border-color: var(--primary); }
.arco-btn-outline:hover { color:#fff; background: var(--primary); }
.arco-btn-text { background: transparent; border-color: transparent; color: var(--primary); }
.arco-btn-text:hover { text-decoration: underline; }

/* Table */
.arco-table { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
.arco-table-thead th { text-align: left; font-weight: 600; color: #475569; padding: 10px; background:#fff; }
.arco-table-tbody td { padding: 10px; background:#fff; border-bottom: 1px solid var(--border); }

/* Tag */
.arco-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; border: 1px solid transparent; }
.arco-tag-color-green { background: #e8ffea; color: #00a930; border-color: #bff3c8; }
.arco-tag-color-orange { background: #fff7e8; color: #d46b08; border-color: #ffe3b4; }
.arco-tag-color-red { background: #fff1f0; color: #cf1322; border-color: #ffd1cf; }

/* Alert / Message */
.arco-alert { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); background:#fff; }
.arco-alert-error { background:#fff2e8; border-color:#ffd8bf; color:#d4380d; }
.arco-alert-success { background:#f6ffed; border-color:#b7eb8f; color:#389e0d; }
.arco-message { padding: 8px 12px; border-radius: 6px; border:1px solid var(--border); background:#fff; }
.arco-message-info { background:#e8f3ff; border-color:#91caff; }

/* Pagination */
.arco-pagination a { text-decoration: none; }

/* Header Drawer (mobile nav) */
.drawer-mask{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;z-index:999}
.drawer{position:fixed;top:0;right:0;height:100vh;width:260px;background:#fff;box-shadow:-4px 0 16px rgba(0,0,0,.12);transform:translateX(100%);transition:transform .2s ease;z-index:1000;display:flex;flex-direction:column}
.drawer.open{transform:translateX(0)}
.drawer-mask.show{display:block}

/* Utilities */
.maxw-1000 { max-width: 1000px; margin: 24px auto; }
.maxw-1120 { max-width: 1120px; margin: 24px auto; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }

/* Center wrap: 强力居中容器，避免父级未知 padding/布局造成视觉偏移 */
.center-wrap {
  position: static;
  width: 100%;
  max-width: 1280px;
  padding: 0 16px;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}

/* Modal mobile polish */
.modal { box-sizing: border-box; }
.modal-body pre {
  white-space: pre; /* 横向滚动优先，避免拥挤换行 */
  overflow: auto;
  background: #f7f8fa;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
}
@media (max-width: 480px){
  .modal { width: 94%; max-width: 94vw; border-radius: 10px; }
  .modal-header, .modal-footer { padding: 10px 12px; }
  .modal-body { padding: 12px; max-height: calc(100vh - 140px); }
  .modal-body pre { font-size: 12px; line-height: 1.5; }
}

/* Auto-form responsive grid */
#auto-form > div { display:grid; grid-template-columns: 120px 1fr; gap:8px; align-items:center; }
#auto-form > div > label { color: var(--subtext); font-size: 13px; }
#auto-form > div > .arco-input { max-width: 640px; }
@media (max-width: 768px){
  .arco-form-item { align-items: flex-start; }
  .arco-form-item-label { width: 100%; margin-bottom: 4px; }
  #auto-form > div { grid-template-columns: 1fr; }
  #auto-form > div > .arco-input { max-width: 100%; }
  .arco-card-body { padding: 12px; }
  /* 选择模板下拉在手机端强制满宽 */
  #tplSelect { width: 100% !important; }
  /* 表单容器边距更紧凑 */
  .center-wrap { padding: 0 12px; }
}

/* Desktop enhancements */
@media (min-width: 1280px){
  .center-wrap { max-width: 1280px; }
  .arco-card-body { padding: 20px; }
  .arco-form-item-label { width: 140px; }
  #auto-form > div { grid-template-columns: 160px 1fr; }
  #auto-form > div > .arco-input { max-width: 720px; }
}

/* Wider desktop (≥1536px) */
@media (min-width: 1536px){
  .center-wrap { max-width: 1440px; }
  .arco-form-item-label { width: 160px; }
  #auto-form > div { grid-template-columns: 180px 1fr; }
  #auto-form > div > .arco-input { max-width: 880px; }
}

/* Ultra-wide (≥1920px) */
@media (min-width: 1920px){
  .center-wrap { max-width: 1600px; }
  .arco-form-item-label { width: 180px; }
  #auto-form > div { grid-template-columns: 200px 1fr; }
  #auto-form > div > .arco-input { max-width: 1040px; }
}