/*
 * 主题公共样式 - 供 light/dark 共用，所有颜色/尺寸通过各主题文件中的 CSS 变量控制
 * 加载顺序：theme-light.css、theme-dark.css 先定义变量，theme-style.css 最后加载应用
 */

/* ================= 通用 ================= */
/* 通用文本 */
body,
html {
  background: var(--el-bg-color);
  color: var(--el-text-color-primary);
}

/* ================= 字号定制（两主题均为 13px） ================= */
/* 全局字号 */
html,
body,
html
  :is(
    .el-form,
    .el-form-item,
    .el-form-item__label,
    .el-form-item__content,
    .el-radio,
    .el-checkbox,
    .el-select,
    .el-input__inner
  ),
html .el-button,
html .el-table,
html .el-table :is(th.el-table__cell, td.el-table__cell),
html .el-table :is(.el-input__inner, .el-select, .el-select__placeholder, .cell),
html .el-select-dropdown,
html .el-select-dropdown__item,
html .el-select-dropdown__item span,
html .sidebar :is(.el-menu-item, .el-sub-menu__title),
html .el-switch,
html .el-switch__label * {
  font-size: 13px !important;
  font-weight: 400 !important;
}

/* ================= 尺寸（按钮/输入/分页） ================= */
/* 按钮统一高度 30px，字体 */
html .el-button {
  height: 30px !important;
  line-height: 30px !important;
  padding: 0 16px !important;
  font-family: 'AlibabaPuHuiTi-Light' !important;
}

/* 默认按钮：width 两主题相同 */
html
  .el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(
    .el-button--info
  ):not(.is-link):not(.is-text):not(.cancel-btn) {
  width: 142px;
}

/* primary 按钮：width、background-color、color 两主题相同 */
html .el-button--primary {
  width: 142px;
  background-color: var(--app-btn-primary-bg) !important;
  color: var(--app-btn-primary-text-color) !important;
}

/* danger 按钮（非 small）：width、background-color 两主题相同 */
html .el-button--danger:not(.el-button--small) {
  width: 142px;
  background-color: transparent !important;
}

/* primary small 按钮：width、background-color、border-color 两主题相同 */
html .el-button--primary.el-button--small {
  width: auto !important;
  background-color: transparent !important;
  border-color: transparent !important;
}

html .el-button--primary.el-button--small:hover,
html .el-button--primary.el-button--small:focus,
html .el-button--primary.el-button--small:active {
  background-color: transparent !important;
  border-color: transparent !important;
}

/* primary small disabled：background-color、border-color 两主题相同 */
html .el-button--primary.el-button--small.is-disabled,
html .el-button--primary.el-button--small.is-disabled:hover,
html .el-button--primary.el-button--small.is-disabled:focus {
  background-color: transparent !important;
  border-color: transparent !important;
}

/* 表格操作列废弃按钮：两主题完全相同 */
html .table-ops .el-button--danger:not(.is-disabled) {
  background-color: transparent !important;
  border-color: #ff2222 !important;
  color: #ff2222 !important;
}

/* el-space 按钮：width、height、border-radius、font 两主题相同 */
html
  .el-space
  .el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(
    .el-button--info
  ):not(.is-link):not(.is-text):not(.cancel-btn) {
  width: 75px !important;
  height: 27px !important;
  border-radius: 10px !important;
  font-family: AlibabaPuHuiTi-Regular !important;
  font-size: 14px !important;
}

/* Switch 禁用选中态：opacity 两主题相同 */
html .el-switch.is-disabled.is-checked .el-switch__core {
  opacity: 0.55;
}

/* 输入与选择框统一高度 32px */
html :is(.el-input__wrapper, .el-select__wrapper) {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 11px;
  border-radius: 8px;
}

html .el-input__wrapper input {
  height: 32px !important;
  line-height: 35px !important;
}

/* 选择框内部文字字号 13px，多选 tag 内文字 */
html .el-select,
html .el-select :is(.el-select__placeholder, .el-select__selected-item, .el-select__selection, input),
html .el-select .el-tag {
  font-size: 13px !important;
}

/* 分页字号统一 13px */
html .el-pagination,
html
  .el-pagination
  :is(.el-pager li, .btn-prev, .btn-next, .el-pagination__jump, .el-pagination__sizes, .el-pagination__total),
html .el-pagination .el-select__selected-item,
html .el-pagination .el-select__placeholder,
html .el-pagination .el-select input,
html .el-pagination .el-pagination__editor input {
  font-size: 13px !important;
  font-weight: 400 !important;
}

/* ================= 侧边栏结构 ================= */
html .sidebar {
  width: var(--app-sidebar-width, 236px) !important;
  border-radius: var(--app-sidebar-radius) !important;
  overflow: hidden;
  border: 1px solid var(--app-sidebar-border-color) !important;
  margin: 20px 0 0 20px;
}

html .sidebar .el-menu {
  --el-menu-item-height: 35px !important;
  background-color: transparent !important;
  border-right: none !important;
  padding: 2px !important;
}

/* 侧边栏菜单项统一高度 35px */
html .sidebar :is(.el-menu-item, .el-sub-menu__title) {
  height: 35px !important;
  line-height: 35px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

html .sidebar .el-sub-menu__title {
  font-weight: 400 !important;
  font-family: 'AlibabaPuHuiTi-Regular';
}

html .sidebar .el-menu-item {
  font-family: 'AlibabaPuHuiTi-Light';
}

/* ================= 页面容器 ================= */
/* 页面容器左内边距归零 */
.page-container {
  padding-left: 0 !important;
  padding-top: 0 !important;
  padding-right: 0 !important;
}

.content-wrapper {
  color: var(--el-text-color-primary) !important;
  padding: 0 !important;
}

html :is(.content-wrapper, .main-content, .page-container, .el-container, .el-main) {
  background-color: transparent !important;
}

/* ================= 卡片 / 弹窗 ================= */
html .el-card {
  color: var(--el-text-color-primary) !important;
}

html .el-card .el-card__header {
  border-bottom: 1px solid var(--el-border-color) !important;
}

html .el-card.query-card .form-actions {
  margin-right: 0 !important;
}

/* 查询区卡片透明背景 */
html .el-card.query-card,
html .query-card {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 查询区卡片 body 左右内边距归零 */
html .el-card.query-card .el-card__body,
html .query-card .el-card__body {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 弹窗、下拉、选择器等浮层背景 */
html .el-dialog,
html .el-message-box,
html .el-popper,
html .el-dropdown-menu,
html .el-select-dropdown,
html .el-picker-panel,
html .el-tooltip__popper {
  background-color: var(--el-bg-color-overlay) !important;
  color: var(--el-text-color-primary) !important;
  border-color: var(--el-border-color-lighter) !important;
}

html :is(.table-card) :is(.el-card__body) {
  padding: 10px 20px !important;
}

/* ================= 输入 / 表单 ================= */
/* 输入等表单控件底色与边框 */
html :is(.el-input__wrapper, .el-select__wrapper, .el-textarea__inner) {
  background-color: var(--el-fill-color-blank) !important;
  color: var(--el-text-color-primary) !important;
  box-shadow: 0 0 0 1px var(--el-border-color) inset !important;
}

html .el-input__inner::placeholder,
html .el-input__wrapper input::placeholder,
html .el-select__input::placeholder,
html .el-textarea__inner::placeholder {
  color: var(--el-text-color-placeholder) !important;
}

/* html .el-select__placeholder {
  color: var(--el-text-color-placeholder) !important;
  opacity: 1 !important;
} */
html .el-select__wrapper.is-disabled .el-select__selected-item {
  color: var(--el-text-color-regular);
}

/* form 参数列对齐 */
html form :is(label, .el-form-item__label) {
  height: 32px !important;
  line-height: 32px !important;
}

/* ================= 表格 ================= */
/* 去除表格垂直分割线与顶部边框 */
html .el-table th.el-table__cell,
html .el-table td.el-table__cell {
  border-right: none !important;
  border-left: none !important;
}

html .el-table thead th.el-table__cell {
  border-top: none !important;
}

/* 行 hover 统一覆盖（含固定列/striped/单元格 hover） */
html .el-table__body tr.hover-row > td,
html .el-table__fixed-body-wrapper .el-table__body tr:hover > td,
html .el-table__fixed-right .el-table__body tr:hover > td,
html .el-table--striped .el-table__body tr.el-table__row--striped:hover > td,
html .el-table__body tr:hover > td,
html .el-table--enable-row-hover .el-table__body tr:hover > td,
html .el-table__body td.el-table__cell:hover {
  background-color: var(--el-table-row-hover-bg-color) !important;
}

/* 当前(选中)行背景与指示条 */
html .el-table__body tr.current-row > td,
html .el-table__body tr.current-row:hover > td {
  background-color: var(--el-table-row-selected-bg-color) !important;
}

html .el-table__body tr.current-row > td:first-child,
html .el-table__body tr[aria-selected='true'] > td:first-child {
  box-shadow: inset 3px 0 0 var(--el-table-row-selected-bar-color);
}

html .el-table__body tr[aria-selected='true'] > td {
  background-color: var(--el-table-row-selected-bg-color) !important;
}

html .el-table__body tr.current-row > td.el-table-column--selection,
html .el-table__body tr[aria-selected='true'] > td.el-table-column--selection {
  background-color: var(--el-table-row-selected-bg-color) !important;
}

/* 透明表格：所有层级背景置透明（保留 hover 高亮） */
html
  :is(
    .el-table,
    .el-table__inner-wrapper,
    .el-table__header-wrapper,
    .el-table__body-wrapper,
    .el-table__footer-wrapper,
    .el-table__empty-block,
    .el-table__fixed,
    .el-table__fixed-right,
    .el-table__fixed-header-wrapper,
    .el-table__fixed-body-wrapper,
    .el-table__fixed-footer-wrapper,
    .el-table__border-left-patch,
    .el-table__border-bottom-patch
  ) {
  background-color: transparent !important;
}

html .el-table :is(thead, tbody, tfoot) tr {
  background-color: transparent !important;
}

html .el-table :is(th.el-table__cell, td.el-table__cell) {
  background-color: transparent !important;
}

html .el-table thead th.el-table__cell {
  background-color: transparent !important;
}

html .el-table--striped .el-table__body tr.el-table__row--striped td,
html .el-table__fixed-body-wrapper .el-table__body td.el-table__cell {
  background-color: transparent !important;
}

html .el-table :is(th.el-table__cell, td.el-table__cell),
html .el-table thead {
  color: var(--el-text-color-primary) !important;
}

/* 表格容器溢出时允许横向滚动 */
html :is(.el-table__body-wrapper, .el-table__footer-wrapper) {
  overflow: auto !important;
}

/* 统一：表头与内容单元格高度一致 */
html .el-table :is(th.el-table__cell, td.el-table__cell) {
  height: 40px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  vertical-align: middle !important;
}

html .el-table :is(th.el-table__cell .cell, td.el-table__cell .cell) {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  line-height: 1.2 !important;
}

/* 表格选择列单元格内用 flex 完整垂直水平居中复选框 */
html .el-table td.el-table-column--selection .cell,
html .el-table th.el-table-column--selection .cell {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

html .el-table .el-checkbox .el-checkbox__inner {
  background-color: transparent !important;
  width: 23px;
  height: 23px;
  border-radius: 4px !important;
}

html .el-table .el-checkbox.is-checked .el-checkbox__inner::after,
html .el-table .el-checkbox.is-indeterminate .el-checkbox__inner::after {
  border-width: 3px !important;
  width: 4px;
  height: 8px;
  top: 10px;
  left: 10px;
}

/* 表格操作列：使用半不透明背景覆盖底层颜色 */
html .el-table thead tr th:last-child,
html .el-table .el-table__body tr td:last-child {
  background-color: var(--app-table-ops-bg) !important;
}

html .el-table__fixed-right .el-table__fixed-header-wrapper thead tr th:last-child,
html .el-table__fixed-right .el-table__fixed-body-wrapper tr td:last-child {
  background-color: var(--app-table-ops-bg) !important;
}

/* 操作列 hover 与整行保持一致 */
html .el-table__body tr:hover > td:last-child,
html .el-table--enable-row-hover .el-table__body tr:hover > td:last-child,
html .el-table__body tr.hover-row > td:last-child,
html .el-table__fixed-body-wrapper .el-table__body tr:hover > td:last-child,
html .el-table__fixed-right .el-table__body tr:hover > td:last-child,
html .el-table--striped .el-table__body tr.el-table__row--striped:hover > td:last-child {
  background-color: var(--el-table-row-hover-bg-color) !important;
}

html .el-table__fixed-right .el-table__fixed-body-wrapper tr:hover > td {
  background-color: var(--el-table-row-hover-bg-color) !important;
}

/* 仅针对“操作列”着色：标记类 is-ops-col */
html .el-table :is(th.el-table__cell.is-ops-col, td.el-table__cell.is-ops-col),
html .el-table__fixed-right :is(th.el-table__cell.is-ops-col, td.el-table__cell.is-ops-col) {
  background-color: var(--app-table-ops-bg) !important;
}

/* 修正：最后一列但未标记为操作列时不加底色 */
html .el-table thead tr th:last-child:not(.is-ops-col),
html .el-table .el-table__body tr td:last-child:not(.is-ops-col),
html .el-table__fixed-right .el-table__fixed-header-wrapper thead tr th:last-child:not(.is-ops-col),
html .el-table__fixed-right .el-table__fixed-body-wrapper tr td:last-child:not(.is-ops-col) {
  background-color: transparent !important;
}

html .el-table__body tr:hover > td.el-table__cell.is-ops-col,
html .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell.is-ops-col,
html .el-table__body tr.hover-row > td.el-table__cell.is-ops-col,
html .el-table__fixed-body-wrapper .el-table__body tr:hover > td.el-table__cell.is-ops-col,
html .el-table__fixed-right .el-table__body tr:hover > td.el-table__cell.is-ops-col {
  background-color: var(--el-table-row-hover-bg-color) !important;
}

/* 表格 loading  spinner 品牌色 */
html .el-table .el-loading-spinner .el-loading-text,
html .el-table .el-loading-spinner .path,
html .el-table .el-loading-spinner .el-icon-loading {
  color: var(--app-brand-color) !important;
}

/* ================= 下拉项 ================= */
html .el-dropdown-menu__item:hover,
html .el-select-dropdown__item.hover {
  color: var(--el-text-color-primary) !important;
}

/* ================= 分页 ================= */
/* Pagination 总体等比例缩小至 26px 高度 */
html .el-pagination {
  --app-pag-height: 26px;
  --app-pag-font: 12px;
  font-size: var(--app-pag-font) !important;
  line-height: var(--app-pag-height) !important;
}

html .el-pagination :is(.btn-prev, .btn-next) {
  height: var(--app-pag-height) !important;
  line-height: var(--app-pag-height) !important;
  min-width: var(--app-pag-height) !important;
  padding: 0 6px !important;
}

html .el-pagination .el-pager li,
html .el-pagination.is-background .el-pager li {
  height: var(--app-pag-height) !important;
  line-height: var(--app-pag-height) !important;
  min-width: calc(var(--app-pag-height) - 2px) !important;
  padding: 0 8px !important;
}

html .el-pagination__sizes .el-select .el-select__wrapper {
  height: var(--app-pag-height) !important;
  min-height: var(--app-pag-height) !important;
  padding: 0 6px !important;
}

html .el-pagination__sizes .el-select :is(.el-select__selected-item, .el-select__placeholder) {
  line-height: var(--app-pag-height) !important;
  font-size: var(--app-pag-font) !important;
}

html .el-pagination__editor.el-input .el-input__wrapper {
  height: var(--app-pag-height) !important;
  min-height: var(--app-pag-height) !important;
  padding: 0 6px !important;
}

html .el-pagination__editor .el-input__inner {
  height: calc(var(--app-pag-height) - 2px) !important;
  line-height: calc(var(--app-pag-height) - 2px) !important;
  font-size: var(--app-pag-font) !important;
}

html .el-pagination :is(.el-pagination__total, .el-pagination__jump) {
  line-height: var(--app-pag-height) !important;
  font-size: var(--app-pag-font) !important;
}

/* Pagination 统一品牌色（背景型与普通型） */
html .el-pagination .el-pager li.is-active,
html .el-pagination.is-background .el-pager li.is-active {
  background-color: var(--app-brand-color) !important;
  border-color: var(--app-brand-color) !important;
  color: #fff !important;
}

html .el-pagination .el-pager li.is-active:hover,
html .el-pagination.is-background .el-pager li.is-active:hover {
  background-color: var(--app-brand-color-hover) !important;
  border-color: var(--app-brand-color-hover) !important;
}

html .el-pagination .el-pager li:not(.is-active):hover {
  color: var(--app-brand-color) !important;
}

html .el-pagination :is(.btn-prev, .btn-next):hover {
  color: var(--app-brand-color) !important;
}

html .el-pagination__editor.el-input.is-focus .el-input__wrapper {
  box-shadow: 0 0 0 1px var(--app-brand-color) inset !important;
}

/* ================= Dialog ================= */
html .el-dialog:not(.video-container-review) {
  width: 720px !important;
  max-width: 720px !important;
  max-height: 70vh !important;
}

/* 直播拉流管理：加宽；固定视窗高度 + flex 链 */
html .el-dialog.pull-stream-manage-dialog:not(.video-container-review),
html[data-theme='light'] .el-dialog.pull-stream-manage-dialog:not(.video-container-review),
html[data-theme='dark'] .el-dialog.pull-stream-manage-dialog:not(.video-container-review) {
  width: min(86vw, 1380px) !important;
  max-width: 1380px !important;
  height: 88vh !important;
  max-height: 88vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

html .el-dialog.pull-stream-manage-dialog .el-dialog__body,
html[data-theme='light'] .el-dialog.pull-stream-manage-dialog .el-dialog__body,
html[data-theme='dark'] .el-dialog.pull-stream-manage-dialog .el-dialog__body {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html .el-dialog.pull-stream-manage-dialog .pull-stream-manage-inner {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  height: 100% !important;
  width: 100% !important;
}

html .el-dialog.pull-stream-manage-dialog .pull-stream-table-wrap {
  position: relative !important;
  min-height: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
html .el-dialog.pull-stream-manage-dialog .pull-stream-table-fill {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  min-width: 0 !important;
}

html .el-dialog__title {
  font-family: 'AlibabaPuHuiTi-Regular';
}

html :is(.el-overlay-dialog, .el-dialog__wrapper) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html .el-dialog {
  background-color: var(--el-bg-color-overlay) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: auto !important;
}

/* 顶部整条标题栏（品牌色） */
html .el-dialog__header {
  margin: 0 !important;
  padding: 0 !important;
  height: 44px !important;
  background: linear-gradient(180deg, var(--app-dialog-header-start), var(--app-dialog-header-end)) !important;
  border-bottom: none !important;
  display: flex !important;
  align-items: center !important;
}

html .el-dialog__title {
  color: #fff !important;
  margin-left: 20px !important;
  line-height: 1 !important;
}

html .el-dialog__headerbtn .el-dialog__close {
  color: #fff !important;
  font-size: 18px !important;
}

html .el-dialog__body {
  padding: 15px 20px 0 20px !important;
  border-bottom: none !important;
  max-height: calc(70vh - 44px - 90px) !important;
  overflow-y: auto !important;
}

html .el-dialog__footer {
  background-color: var(--el-bg-color-overlay) !important;
  padding: 14px 30px 14px 20px !important;
}

/* ================= 面包屑 ================= */
html .breadcrumb :is(.el-breadcrumb__item:first-child) {
  font-family: 'AlibabaPuHuiTi-Regular';
}

/* ================= 响应式 ================= */
@media (max-width: 1600px) {
  html .sidebar {
    width: 200px !important;
  }
}

@media (max-width: 1366px) {
  html .sidebar {
    width: 200px !important;
  }
}

/* 矮屏（<= 768px 高度）：弹窗自适应视口 */
@media (max-height: 768px) {
  html .el-dialog {
    width: clamp(320px, 90vw, 720px) !important;
    max-height: 86vh !important;
  }
  html .el-dialog.pull-stream-manage-dialog:not(.video-container-review),
  html[data-theme='light'] .el-dialog.pull-stream-manage-dialog:not(.video-container-review),
  html[data-theme='dark'] .el-dialog.pull-stream-manage-dialog:not(.video-container-review) {
    width: min(86vw, 1380px) !important;
    max-width: 1380px !important;
    height: 86vh !important;
    max-height: 86vh !important;
  }
}



/* ksp相关页面的样式保持本来样式 --- start --- */
/* 登录页 */
html .login-default-container .el-input__wrapper {
  background-color: var(--el-input-bg-color, var(--el-fill-color-blank)) !important;
  box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset !important;
}
html .login-default-container .el-input__inner,
html .login-default-container .el-input__wrapper input,
html .login-default-container .el-select__input {
  color: #1b1b1b !important;
}
html .login-default-container .el-button.el-button--primary {
  background-color: var(--el-button-bg-color) !important;
}
html .login-default-container .el-button.el-button--primary:hover,
html .login-default-container .el-button.el-button--primary.is-disabled:hover {
  background-color: var(--el-button-hover-bg-color) !important;
  border-color: var(--el-button-hover-border-color) !important;
  color: var(--el-button-hover-text-color) !important;
}
html .login-default-container .el-button.el-button--primary.is-disabled,
html .login-default-container .el-button.el-button--primary.is-disabled:hover {
  background-color: var(--el-button-disabled-bg-color) !important;
  border-color: var(--el-button-disabled-border-color) !important;
  color: var(--el-button-disabled-text-color) !important;
}
/* ksp相关页面的样式保持本来样式 --- end  */