/* 面板 UI 可读性增强：加大输入框、保证前缀/正文可见 */

/* ===== 全局输入框：高度 / 字号 / 内边距 ===== */
.ant-input,
.ant-input-affix-wrapper,
.ant-input-number,
.ant-input-number-input,
.ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
  min-height: 40px !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

.ant-input:not(textarea) {
  padding: 8px 12px !important;
  height: 40px !important;
}

.ant-input-affix-wrapper {
  padding: 4px 12px !important;
}

.ant-input-affix-wrapper .ant-input {
  height: auto !important;
  min-height: 0 !important;
  padding: 4px 0 !important;
}

.ant-input-textarea textarea,
textarea.ant-input {
  min-height: 120px !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  padding: 10px 12px !important;
}

/* ===== Input addon 前缀：保持 ant 原有 table 布局，只加强可读性 ===== */
.ant-input-group-wrapper {
  width: 100% !important;
}

.ant-input-group-addon,
span.ant-input-group-addon {
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 0 12px !important;
  line-height: 38px !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* 浅色：深字 + 浅底，保证「服务器地址」等前缀可见 */
[data-theme="light"] .ant-input,
[data-theme="light"] .ant-input-affix-wrapper,
[data-theme="light"] .ant-input-number,
[data-theme="light"] .ant-input-textarea textarea,
[data-theme="light"] .ant-select-selector,
html:not([data-theme="dark"]) .ant-input,
html:not([data-theme="dark"]) .ant-input-affix-wrapper,
html:not([data-theme="dark"]) .ant-input-number,
html:not([data-theme="dark"]) .ant-input-textarea textarea,
html:not([data-theme="dark"]) .ant-select-selector {
  color: #1f2937 !important;
  background: #ffffff !important;
  border-color: #d0d7de !important;
}

[data-theme="light"] .ant-input::placeholder,
[data-theme="light"] .ant-input-textarea textarea::placeholder,
html:not([data-theme="dark"]) .ant-input::placeholder,
html:not([data-theme="dark"]) .ant-input-textarea textarea::placeholder {
  color: #8b949e !important;
  opacity: 1 !important;
}

[data-theme="light"] .ant-input-group-addon,
[data-theme="light"] span.ant-input-group-addon,
html:not([data-theme="dark"]) .ant-input-group-addon,
html:not([data-theme="dark"]) span.ant-input-group-addon {
  color: #111827 !important;
  background: #eef2f7 !important;
  border-color: #d0d7de !important;
  text-shadow: none !important;
}

/* 深色：亮字 + 深底 */
[data-theme="dark"] .ant-input,
[data-theme="dark"] .ant-input-affix-wrapper,
[data-theme="dark"] .ant-input-number,
[data-theme="dark"] .ant-input-textarea textarea,
[data-theme="dark"] .ant-select-selector {
  color: #e6edf3 !important;
  background: #21262d !important;
  border-color: #484f58 !important;
}

[data-theme="dark"] .ant-input::placeholder,
[data-theme="dark"] .ant-input-textarea textarea::placeholder {
  color: #8b949e !important;
  opacity: 1 !important;
}

[data-theme="dark"] .ant-input-group-addon,
[data-theme="dark"] span.ant-input-group-addon {
  color: #f0f6fc !important;
  background: #30363d !important;
  border-color: #484f58 !important;
  text-shadow: none !important;
}

[data-theme="dark"] .ant-input-affix-wrapper .ant-input {
  background: transparent !important;
  color: #e6edf3 !important;
}

.ant-input:focus,
.ant-input-focused,
.ant-input-affix-wrapper-focused,
.ant-input-affix-wrapper:focus,
.ant-input-group-wrapper-focused .ant-input {
  border-color: #2db368 !important;
  box-shadow: 0 0 0 2px rgba(45, 179, 104, 0.18) !important;
}

/* 表单旁的说明文字（背景图: / 应用图标: 等） */
.ant-typography,
.ant-form-item-label > label {
  opacity: 1 !important;
}

[data-theme="dark"] .ant-typography,
[data-theme="dark"] .ant-form-item-label > label {
  color: #e6edf3 !important;
}

html:not([data-theme="dark"]) .ant-typography,
html:not([data-theme="dark"]) .ant-form-item-label > label {
  color: #303133 !important;
}

/* ===== 卡片与表单间距 ===== */
.ant-card .ant-card-body {
  padding: 16px 20px !important;
}

.ant-form-item {
  margin-bottom: 16px !important;
}

.ant-form-item-label > label {
  font-size: 14px !important;
  height: auto !important;
}

/* ===== 按钮 ===== */
.ant-btn:not(.ant-btn-circle):not(.ant-btn-icon-only) {
  min-height: 36px !important;
  font-size: 14px !important;
  padding: 4px 16px !important;
}

.ant-btn-sm:not(.ant-btn-circle):not(.ant-btn-icon-only) {
  min-height: 32px !important;
  font-size: 13px !important;
  padding: 0 12px !important;
}

/* ===== Select ===== */
.ant-select-selection-item,
.ant-select-selection-placeholder {
  line-height: 38px !important;
  font-size: 15px !important;
}

.ant-select-dropdown .ant-select-item {
  font-size: 14px !important;
  min-height: 36px !important;
  line-height: 36px !important;
}

/* ===== 表格 ===== */
.ant-table {
  font-size: 14px !important;
}

.ant-table .ant-table-thead > tr > th {
  font-size: 13px !important;
  padding: 12px 14px !important;
}

.ant-table .ant-table-tbody > tr > td {
  padding: 12px 14px !important;
}

input[type="color"] {
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
}

/* ===== 独立控制页：禁止左右滑，内容在视口内换行 ===== */
html.control-device-page,
html.control-device-page body,
html.control-device-page #root {
  height: auto !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  max-width: 100vw !important;
}

html.control-device-page #root {
  display: block !important;
}

.control-tabs-wrapper {
  overflow: visible !important;
  height: auto !important;
}

.control-tabs-wrapper .ant-tabs,
.control-tabs-wrapper .ant-tabs-content-holder,
.control-tabs-wrapper .ant-tabs-content,
.control-tabs-wrapper .ant-tabs-tabpane {
  height: auto !important;
  overflow: visible !important;
}

.control-tabs-wrapper .ant-tabs-nav {
  flex-shrink: 0 !important;
  overflow-x: auto !important;
}

/* ===== 设置管理：文字可读、表格不截断 ===== */
.settings-page {
  --settings-text: #1f2937;
  --settings-muted: #64748b;
}

[data-theme="dark"] .settings-page {
  --settings-text: #e6edf3;
  --settings-muted: #9da7b3;
}

.settings-page .ant-card-head-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--settings-text) !important;
}

.settings-page .ant-card-body {
  overflow: visible !important;
}

.settings-page .ant-typography,
.settings-page .ant-form-item-label > label,
.settings-page .ant-statistic-title,
.settings-page .ant-descriptions-item-label {
  color: var(--settings-text) !important;
  font-size: 14px !important;
}

.settings-page .ant-table {
  font-size: 13px !important;
}

.settings-page .ant-table-thead > tr > th {
  white-space: nowrap !important;
  font-size: 13px !important;
  padding: 12px 14px !important;
  color: var(--settings-text) !important;
}

.settings-page .ant-table-tbody > tr > td {
  padding: 12px 14px !important;
  color: var(--settings-text) !important;
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.5 !important;
}

.settings-page .ant-table-cell-ellipsis,
.settings-page .ant-table-cell-ellipsis .ant-table-cell-content {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-all !important;
}

.settings-page code {
  white-space: normal !important;
  word-break: break-all !important;
  font-size: 12px !important;
  color: var(--settings-text) !important;
}

.settings-page .ant-btn {
  white-space: nowrap !important;
}

/* 设置页暗色主题基础对比度 */
[data-theme="dark"] .settings-page .ant-card {
  color: var(--settings-text) !important;
}

[data-theme="dark"] .settings-page .ant-table-tbody > tr > td,
[data-theme="dark"] .settings-page .ant-table-thead > tr > th {
  color: #e6edf3 !important;
}

[data-theme="dark"] .settings-page .ant-table-tbody > tr > td span,
[data-theme="dark"] .settings-page .ant-table-tbody > tr > td code {
  color: #c9d1d9 !important;
}

/* ===== 设置管理主卡片：通栏，避免修改密码溢出 ===== */
.settings-top-row {
  grid-template-columns: 1fr !important;
  width: 100% !important;
}

.settings-main-card.ant-card {
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

.settings-main-card .ant-card-body {
  overflow: visible !important;
  padding: 20px 24px !important;
}

.settings-main-inner {
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 900px) {
  .settings-main-inner > div:first-child {
    border-right: none !important;
    padding-right: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-bottom: 16px !important;
    margin-bottom: 8px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  }
}

[data-theme="dark"] .settings-main-inner > div:first-child {
  border-right-color: #30363d !important;
}

/* ===== 设置页：修改密码区块 ===== */
.settings-password-block {
  padding: 4px 8px 8px !important;
  box-sizing: border-box !important;
}

.settings-password-title {
  color: var(--settings-text, #1f2937) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

.settings-password-form.ant-form,
.settings-password-form .ant-form-item-label > label {
  color: var(--settings-text, #1f2937) !important;
  font-size: 14px !important;
  opacity: 1 !important;
}

.settings-password-form .ant-input-affix-wrapper,
.settings-password-form .ant-input-password,
.settings-password-form .ant-input {
  min-height: 42px !important;
  font-size: 15px !important;
  color: #1f2937 !important;
  background: #ffffff !important;
  border: 1px solid #d0d7de !important;
}

.settings-password-form .ant-input-affix-wrapper .ant-input {
  background: transparent !important;
  color: #1f2937 !important;
}

.settings-password-form .ant-input::placeholder,
.settings-password-form .ant-input-affix-wrapper input::placeholder {
  color: #8b949e !important;
  opacity: 1 !important;
}

.settings-password-form .anticon {
  color: #64748b !important;
  font-size: 16px !important;
}

[data-theme="dark"] .settings-password-title,
[data-theme="dark"] .settings-password-form .ant-form-item-label > label {
  color: #e6edf3 !important;
}

[data-theme="dark"] .settings-password-form .ant-input-affix-wrapper,
[data-theme="dark"] .settings-password-form .ant-input-password,
[data-theme="dark"] .settings-password-form .ant-input {
  color: #e6edf3 !important;
  background: #21262d !important;
  border-color: #484f58 !important;
}

[data-theme="dark"] .settings-password-form .ant-input-affix-wrapper .ant-input {
  color: #e6edf3 !important;
  background: transparent !important;
}

[data-theme="dark"] .settings-password-form .anticon {
  color: #9da7b3 !important;
}

/* ===== 设备控制页 ===== */
.device-control-page {
  --dc-text: #1f2937;
  --dc-muted: #64748b;
}

[data-theme="dark"] .device-control-page {
  --dc-text: #e6edf3;
  --dc-muted: #9da7b3;
}

.device-control-toolbar {
  backdrop-filter: blur(8px);
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* 顶部工具栏：整行在视口内换行，查询/重置不再被挤出屏幕 */
.device-control-toolbar .ant-form {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 10px !important;
  width: 100% !important;
  max-width: 100% !important;
}

.device-control-toolbar .ant-form > .ant-space {
  flex: 0 1 auto !important;
  flex-wrap: wrap !important;
  max-width: 100% !important;
}

.device-control-toolbar .ant-divider-vertical {
  display: none !important;
}

.device-control-toolbar .ant-form > div:last-of-type {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: 0 !important;
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.device-control-toolbar .ant-form-item {
  margin-bottom: 0 !important;
  margin-inline-end: 0 !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.device-control-toolbar .ant-form-item-label > label,
.device-control-toolbar .ant-select-selection-item,
.device-control-toolbar .ant-input {
  font-size: 13px !important;
}

.device-control-toolbar .ant-input,
.device-control-toolbar .ant-select {
  width: min(132px, calc(50vw - 28px)) !important;
  max-width: 100% !important;
}

.device-control-toolbar .ant-select .ant-select-selector {
  max-width: 100% !important;
}

.device-control-toolbar .ant-btn {
  flex-shrink: 0 !important;
}

.device-control-page {
  overflow-x: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.device-control-page .ant-row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.device-control-page .device-card.ant-card,
.device-card.ant-card {
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

[data-theme="dark"] .device-control-page .device-card.ant-card,
[data-theme="dark"] .device-card.ant-card {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.device-card .ant-card-body {
  padding: 14px 16px !important;
}

.device-card .ant-card-head {
  min-height: 44px !important;
  padding: 0 16px !important;
}

.device-card .ant-card-head-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--dc-text, #1f2937) !important;
  white-space: normal !important;
  line-height: 1.4 !important;
  padding: 10px 0 !important;
}

.device-card .ant-btn {
  font-size: 13px !important;
  height: auto !important;
  min-height: 32px !important;
  padding: 4px 12px !important;
}

.device-card .ant-btn-sm {
  min-height: 30px !important;
  font-size: 13px !important;
}

[data-theme="dark"] .device-card .ant-card-head-title {
  color: #e6edf3 !important;
}

/* ===== control right panel：不横向撑破屏幕 ===== */
html.control-device-page {
  overflow-x: hidden !important;
}

.control-tabs-wrapper {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.control-tabs-wrapper .ant-tabs-content,
.control-tabs-wrapper .ant-tabs-tabpane {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
}

.control-tabs-wrapper .ant-table-wrapper,
.control-tabs-wrapper .ant-table,
.control-tabs-wrapper .ant-spin-nested-loading,
.control-tabs-wrapper .ant-spin-container {
  width: 100% !important;
  max-width: 100% !important;
}

.control-tabs-wrapper .ant-table-cell {
  white-space: normal !important;
  word-break: break-word !important;
  font-size: 13px !important;
  padding: 8px 10px !important;
}