/* 虚拟网络页：在 theme .card 布局上的表单与成员区补充样式 */

/* 字段标题与图标：与 c/web virtual-net-page 原版一致 */
body[data-page='virtual-net'] .vnet-config-grid .vnet-field-label,
body[data-page='virtual-net'] .vnet-config-grid .console-field-label.vnet-field-label,
body[data-page='virtual-net'] .vnet-member-grid .vnet-field-label,
body[data-page='virtual-net'] .vnet-member-grid .console-field-label.vnet-field-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #3b4e62;
}

body[data-page='virtual-net'] .vnet-field-label-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-page='virtual-net'] .vnet-config-grid .vnet-field-ico,
body[data-page='virtual-net'] .vnet-member-grid .vnet-field-ico {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  color: #5b7c9c;
  opacity: 1;
}

body[data-page='virtual-net'] .vnet-config-grid .vnet-field-ico svg,
body[data-page='virtual-net'] .vnet-member-grid .vnet-field-ico svg {
  display: block;
  width: 16px;
  height: 16px;
}

body[data-page='virtual-net'] .console-field select {
  appearance: auto;
  cursor: pointer;
}

/* 四列等分主工作区宽度，窄屏自动换行（能屈能伸） */
body[data-page='virtual-net'] .vnet-config-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 0.65rem;
  width: 100%;
  margin-bottom: 0.25rem;
  box-sizing: border-box;
}

body[data-page='virtual-net'] .vnet-config-field:not(.vnet-config-field--relay) {
  flex: 1 1 0;
  min-width: 0;
  width: 0;
  max-width: 100%;
}

@media (max-width: 639px) {
  body[data-page='virtual-net'] .vnet-config-field:not(.vnet-config-field--relay) {
    flex: 1 1 100%;
    width: 100%;
  }
}

@media (min-width: 640px) and (max-width: 991px) {
  body[data-page='virtual-net'] .vnet-config-field:not(.vnet-config-field--relay) {
    flex: 1 1 calc(50% - 0.35rem);
    width: auto;
    min-width: min(100%, 12rem);
  }
}

body[data-page='virtual-net'] .vnet-head-desc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 1rem;
  line-height: 1.55;
}

body[data-page='virtual-net'] .vnet-force-relay {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #3b4e62;
  cursor: pointer;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
}

body[data-page='virtual-net'] .vnet-force-relay input[type='checkbox'] {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  accent-color: #2c7cb6;
  cursor: pointer;
  flex-shrink: 0;
}

body[data-page='virtual-net'] .vnet-config-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
  box-sizing: border-box;
}

body[data-page='virtual-net'] .vnet-config-field .console-field-label {
  width: 100%;
  max-width: 100%;
}

body[data-page='virtual-net'] .vnet-label-with-help {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
  width: 100%;
}

body[data-page='virtual-net'] .vnet-label-with-help .vnet-field-label-main {
  flex: 1;
  min-width: 0;
}

/* 问号帮助：对齐 c/web virtual-net-page 原著 */
body[data-page='virtual-net'] .vnet-help-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-width: 30px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  border: 1px solid #c5d5e6;
  background: #f0f6fb;
  color: #2c6e9e;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  box-shadow: none;
  filter: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

body[data-page='virtual-net'] .vnet-help-btn:hover {
  background: #e2eef8;
  border-color: #8eb4d4;
  color: #1a4d6e;
  transform: none;
}

body[data-page='virtual-net'] .vnet-help-btn i {
  font-size: 0.95rem;
  width: auto;
  text-align: center;
}

/* 加入成员：与网关等配置项同款布局与样式 */
body[data-page='virtual-net'] .vnet-member-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 0.65rem;
  width: 100%;
  margin-bottom: 0.75rem;
  box-sizing: border-box;
}

body[data-page='virtual-net'] .vnet-member-grid .vnet-config-field {
  flex: 1 1 0;
  min-width: 0;
  width: 0;
  max-width: 100%;
}

@media (max-width: 639px) {
  body[data-page='virtual-net'] .vnet-member-grid .vnet-config-field {
    flex: 1 1 100%;
    width: 100%;
  }
}

body[data-page='virtual-net'] .badge-ip {
  display: inline-block;
  margin-right: 0.35rem;
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 0.875rem;
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(34, 211, 238, 0.25);
  color: #a5f3fc;
}

body[data-page='virtual-net'] .vnet-help-modal .vnet-help-body {
  margin: 0 0 0.25rem;
  font-size: 0.88rem;
  line-height: 1.65;
  color: #334155;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
}

body[data-page='virtual-net'] .vnet-help-modal .vnet-help-body p {
  margin: 0 0 0.85rem;
}

body[data-page='virtual-net'] .vnet-help-modal .vnet-help-body p:last-child {
  margin-bottom: 0;
}

body[data-page='virtual-net'] .vnet-help-modal.mesh-modal-panel--sm {
  max-width: min(28rem, 100%);
}

/* 按钮配色：对齐 c/web virtual-net-page 原著 */
body[data-page='virtual-net'] #vnSave.btn-primary,
body[data-page='virtual-net'] .mesh-modal-panel .btn-primary {
  background: linear-gradient(105deg, #1e6f9f, #2388b5);
  color: #ffffff;
  border: none;
  box-shadow: none;
  filter: none;
}

body[data-page='virtual-net'] #vnSave.btn-primary:hover,
body[data-page='virtual-net'] .mesh-modal-panel .btn-primary:hover {
  background: linear-gradient(105deg, #155f89, #1c729b);
  color: #ffffff;
  box-shadow: none;
  filter: none;
  transform: translateY(-1px);
}

body[data-page='virtual-net'] #vnAddMember.btn-outline,
body[data-page='virtual-net'] .table-wrap .btn-outline.btn-sm {
  background: #eef3fc;
  border: 1px solid #caddf0;
  color: #1e6f9f;
  box-shadow: none;
  filter: none;
}

body[data-page='virtual-net'] #vnAddMember.btn-outline:hover,
body[data-page='virtual-net'] .table-wrap .btn-outline.btn-sm:hover {
  background: #e2edf9;
  border-color: #b8d4ec;
  color: #155f89;
  box-shadow: none;
  filter: none;
  transform: translateY(-1px);
}