/**
 * ZT_SANDBOX_INFO_SKIN_20260802
 * 控制设备页（.info-page）按 ui_sandbox 换皮：
 * - 左双机：开启/关闭/截图/后台/主页/返回 按钮条对齐沙盒
 * - 中间画面宽高/padding 冻结为现网，禁止拉满变形
 * - 右栏 Tab + 功能面板浅色对齐沙盒
 * 不改业务 DOM / 事件
 */

/* ========== 页面底与顶栏 ========== */
body:has(.info-page),
.info-page.zt-full-ready,
.info-page {
  --zt-bg: #F8FAFC !important;
  --zt-panel: #FFFFFF !important;
  --zt-line: #E2E8F0 !important;
  --zt-text: #0F172A !important;
  --zt-muted: #64748B !important;
  --zt-accent: #2563EB !important;
  --zt-ok: #16A34A !important;
  --zt-bad: #EF4444 !important;
  background: #F8FAFC !important;
  background-image: none !important;
  color: #0F172A !important;
}

.info-page .zt-top-meta {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}
.info-page .zt-pill {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}
.info-page .zt-pill .k { color: #94A3B8 !important; }
.info-page .zt-pill .v { color: #0F172A !important; }

.info-page .zt-work {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

.info-page .phone-pass-compact,
.info-page .conn-status-text,
.info-page .device-id-hint {
  color: #334155 !important;
}

/* ========== 左双机：几何冻结（画面尺寸） ========== */
/* 禁止改 image-wrapper / image-slot / canvas / img 的宽高与决定画面大小的 padding */
.info-page .screens-column .image-wrapper {
  /* 仅换机框色，不改 padding / width / height / border-radius */
  background: linear-gradient(165deg, #334155, #1e293b) !important;
  box-shadow:
    0 8px 24px rgba(15, 23, 42, 0.12),
    inset 0 0 0 2px #CBD5E1,
    inset 0 0 0 6px #0f172a !important;
}
.info-page .screens-column .image-slot,
.info-page .screens-column .image-wrapper img,
.info-page .screens-column .image-wrapper canvas,
.info-page .screens-column .screenlayers,
.info-page .screens-column .screen-placeholder {
  /* 故意不写 width/height/max-width/max-height，保留现网原尺寸 */
  box-sizing: border-box;
}
.info-page .screens-column {
  /* 保持 dual_cabin 既有 max-width:48% 等，不套 sandbox flex:1 拉高 */
  align-self: flex-start !important;
  height: auto !important;
  max-height: none !important;
}
.info-page .image-box-group,
.info-page .image-box {
  height: auto !important;
  max-height: none !important;
}

/* ========== 左双机：上/下按钮条对齐 sandbox .ph-btn ========== */
.info-page .button-container,
.info-page .nav-row,
.info-page .screen-nav-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  align-items: stretch !important;
  justify-content: center !important;
  margin: 0 0 4px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.info-page .nav-row,
.info-page .screen-nav-row {
  margin: 4px 0 0 !important;
}

/* 选择器需压过 index.html 霓虹渐变（含 :not 链） */
html body .info-page .button-container button:not(.btn-upload),
html body .info-page .button-container button:not(.btn-reconnect):not([type="error"]):not(.btn-upload),
html body .info-page .nav-row button:not([type="error"]),
html body .info-page .screen-nav-row button:not([type="error"]),
html body .info-page .button-container .n-button,
html body .info-page .nav-row .n-button,
html body .info-page .screen-nav-row .n-button,
html body .info-page .screen-nav-row button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: 4px 0 !important;
  min-height: 0 !important;
  height: auto !important;
  line-height: 1.2 !important;
  border-radius: 6px !important;
  border: none !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  background: #2563EB !important;
  background-image: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
html body .info-page .button-container button:hover,
html body .info-page .nav-row button:hover,
html body .info-page .screen-nav-row button:hover,
html body .info-page .button-container .n-button:hover,
html body .info-page .nav-row .n-button:hover,
html body .info-page .screen-nav-row .n-button:hover {
  background: #1D4ED8 !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

/* 关闭 / 次要：灰底（对齐 sandbox .ph-btn.off） */
html body .info-page .button-container button[type="error"],
html body .info-page .button-container button.btn-reconnect,
html body .info-page .button-container .n-button--error-type,
html body .info-page .nav-row button[type="error"],
html body .info-page .nav-row .n-button--error-type,
html body .info-page button[type="error"],
html body .info-page .n-button--error-type {
  background: #94A3B8 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  box-shadow: none !important;
}
html body .info-page .button-container button[type="error"]:hover,
html body .info-page .button-container .n-button--error-type:hover {
  background: #64748B !important;
  background-image: none !important;
}

/* 截图下拉：对齐 sandbox .ph-shot select */
.info-page .button-container select,
.info-page .button-container .n-base-selection,
.info-page .button-container .n-select {
  flex: 1.1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 4px 2px !important;
  border-radius: 6px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  border: 1.5px solid #2563EB !important;
  background: #EFF6FF !important;
  color: #2563EB !important;
  -webkit-text-fill-color: #2563EB !important;
  outline: none !important;
  box-shadow: none !important;
}
.info-page .button-container .n-base-selection-label,
.info-page .button-container .n-base-selection-input,
.info-page .button-container .n-base-selection-placeholder {
  color: #2563EB !important;
  -webkit-text-fill-color: #2563EB !important;
  background: transparent !important;
}

.info-page .screen-placeholder {
  color: #94A3B8 !important;
  background: #0f172a !important;
}

/* ========== 右栏 Tab：hall-tab 皮 ========== */
.info-page .n-tabs-nav,
.info-page .n-tabs-nav-scroll-wrapper,
.info-page .n-tabs-nav-scroll-content,
.info-page .n-tabs-wrapper,
.info-page .zt-chipbar {
  background: #FFFFFF !important;
  border-bottom: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
}

.info-page .n-tabs-tab,
.info-page .n-tabs-tab .n-tabs-tab__label,
.info-page .n-tabs-tab span,
.info-page .zt-syn-tab.n-tabs-tab,
.info-page .zt-chip,
.info-page .zt-fig2-tabchip {
  color: #64748B !important;
  -webkit-text-fill-color: #64748B !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-bottom: 2.5px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 10px 12px !important;
  height: auto !important;
  line-height: 1.3 !important;
}

.info-page .n-tabs-tab:hover,
.info-page .zt-chip:hover,
.info-page .zt-syn-tab:hover {
  color: #2563EB !important;
  -webkit-text-fill-color: #2563EB !important;
  background: #F0F9FF !important;
}

.info-page .n-tabs-tab.n-tabs-tab--active,
.info-page .n-tabs-tab.n-tabs-tab--active .n-tabs-tab__label,
.info-page .n-tabs-tab.n-tabs-tab--active span,
.info-page .zt-syn-tab.n-tabs-tab--active,
.info-page .zt-chip.active {
  color: #2563EB !important;
  -webkit-text-fill-color: #2563EB !important;
  font-weight: 700 !important;
  border-bottom-color: #2563EB !important;
  background: #EFF6FF !important;
  background-image: none !important;
  box-shadow: none !important;
}

.info-page .n-tabs .n-tabs-bar,
.info-page .n-tabs .n-tabs-ink-bar {
  background-color: #2563EB !important;
}

/* ========== 右栏功能面板 ========== */
.info-page #zt-shared-panel,
.info-page .zt-inline-panel,
.info-page .zt-main-view {
  background: #F8FAFC !important;
  color: #0F172A !important;
  border-color: #E2E8F0 !important;
}

.info-page .zt-inline-panel {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

.info-page .zt-inline-head,
.info-page .zt-inline-hint,
.info-page .zt-inline-toolbar {
  color: #334155 !important;
}

.info-page .zt-inline-input,
.info-page .zt-inline-panel input,
.info-page .zt-inline-panel textarea,
.info-page .zt-inline-panel select,
.info-page #zt-shared-panel input,
.info-page #zt-shared-panel textarea,
.info-page #zt-shared-panel select {
  background: #F8FAFC !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 8px !important;
  color: #0F172A !important;
  -webkit-text-fill-color: #0F172A !important;
}

.info-page .zt-inline-panel button,
.info-page #zt-shared-panel button.zt-chip,
.info-page #zt-shared-panel .zt-adb-btn,
.info-page .button-row button:not([type="error"]) {
  border-radius: 8px !important;
  font-weight: 700 !important;
}

/* 主操作蓝 */
.info-page .zt-inline-panel button[type="primary"],
.info-page .zt-inline-panel .n-button--primary-type,
.info-page #zt-shared-panel .zt-adb-btn-blue,
.info-page #zt-shared-panel .n-button--primary-type {
  background: #2563EB !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border: none !important;
}

/* 表格/日志 */
.info-page .zt-oplog-table-wrap,
.info-page .zt-inline-pre {
  background: #0B1120 !important;
  border: 1px solid #1E293B !important;
  border-radius: 12px !important;
  color: #E2E8F0 !important;
}
.info-page .zt-oplog-table th {
  background: #0B1120 !important;
  color: #93C5FD !important;
}
.info-page .zt-oplog-table td {
  color: #E2E8F0 !important;
  border-bottom-color: #1E293B !important;
}

.info-page .zt-alb-name,
.info-page .zt-alb-placeholder {
  color: #64748B !important;
}
.info-page .zt-alb-thumb {
  border-color: #E2E8F0 !important;
  border-radius: 8px !important;
}

.info-page .zt-perm-light {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
}

/* 通用 Naive 控件在 Info 内可读 */
.info-page .n-input,
.info-page .n-input__input-el,
.info-page .n-base-selection,
.info-page .n-base-selection-label {
  color: #0F172A !important;
  -webkit-text-fill-color: #0F172A !important;
  background: #FFFFFF !important;
}
.info-page .n-button:not(.n-button--primary):not(.n-button--error):not(.n-button--warning):not(.n-button--success) {
  color: #334155 !important;
  --n-text-color: #334155 !important;
  --n-color: #FFFFFF !important;
  --n-border: 1px solid #E2E8F0 !important;
}
.info-page .n-button--primary {
  --n-color: #2563EB !important;
  --n-text-color: #FFFFFF !important;
  color: #FFFFFF !important;
}
.info-page .n-button--error,
.info-page .n-button--error-type {
  --n-color: #EF4444 !important;
  --n-text-color: #FFFFFF !important;
  color: #FFFFFF !important;
}

/* 覆盖 index.html 里 info-page 强制青蓝霓虹按钮（仅非左机区已单独处理） */
.info-page .usdt-btns button:not([type="error"]),
.info-page .button-row button:not([type="error"]) {
  background: #2563EB !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: none !important;
}

/* ========== 基础操作三栏：对齐 sandbox 卡片网格 ========== */
.info-page .tabs-wrapper,
.info-page .basic-ops-scroll {
  background: #F8FAFC !important;
  color: #0F172A !important;
}
.info-page .basic-ops-three-cols {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
}
.info-page .basic-op-col,
.info-page .basic-op-block {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  padding: 12px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  color: #0F172A !important;
}
.info-page .op-btn-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
}
.info-page .op-btn-grid button,
.info-page .op-btn-grid .n-button,
.info-page .basic-op-col button.n-button--primary,
.info-page .basic-pay-grid button {
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 9px 4px !important;
  border: none !important;
  box-shadow: none !important;
  background: linear-gradient(135deg, #3B82F6, #2563EB) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
.info-page .op-btn-grid button[type="error"],
.info-page .op-btn-grid .n-button--error-type {
  background: linear-gradient(135deg, #F87171, #EF4444) !important;
}

/* 顶栏信息：压成 sandbox info-strip 密度（不删节点，只压缩） */
.info-page .zt-top-meta .row {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 4px !important;
}
.info-page .zt-top-meta .zt-pill {
  min-height: 36px !important;
  padding: 4px 8px !important;
}
.info-page .zt-top-meta .zt-pill .k { font-size: 10px !important; }
.info-page .zt-top-meta .zt-pill .v { font-size: 12px !important; }

/* iframe embed：尽量隐藏 Vue 外层「设备详情」壳干扰 */
html body.zt-pearl-v1 .n-layout-header,
html body.zt-pearl-v1 .admin-header {
  background: #FFFFFF !important;
  border-bottom: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
}

/* 左栏背景浅灰对齐 sandbox */
.info-page .screens-column,
.info-page .image-container {
  background: #F8FAFC !important;
}

/* ========== 控制页整页：去掉旧侧栏，贴近 sandbox 二级页 ========== */
html body:has(.info-page) .n-layout-sider,
html body:has(.info-page) .sidebar,
html body:has(.info-page) .sidebar-body,
html body:has(.info-page) .panel-layout > aside,
html body.zt-pearl-v1:has(.info-page) .n-layout-sider {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
}
html body:has(.info-page) .n-layout,
html body:has(.info-page) .n-layout-content,
html body:has(.info-page) .panel-layout {
  background: #F8FAFC !important;
}
html body:has(.info-page) .n-layout-header,
html body:has(.info-page) .admin-header {
  background: #FFFFFF !important;
  border-bottom: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
  min-height: 48px !important;
}

/* iframe embed（从 devices_new 进）：隐藏 Vue 顶栏，只留双机+Tab */
html body.zt-pearl-v1 .n-layout-header,
html body.zt-pearl-v1 .panel-layout .logo,
html body.zt-pearl-v1 .sidebar {
  display: none !important;
}

/* 密码条：对齐 sandbox pwd-bar */
.info-page .phone-pass-compact {
  display: flex !important;
  align-items: stretch !important;
  background: #fff !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  font-size: 11px !important;
  color: #334155 !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
}

/* Tab 标签完整露出（横向滚动，像 sandbox hall-tabs） */
.info-page .n-tabs-nav-scroll-content,
.info-page .tabs-wrapper .n-tabs-nav {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  white-space: nowrap !important;
}