/* ==========================================================================
   TY · 厂商层覆盖（唯一一层，替代 element.qr.css / change.qr.css 的散乱覆盖）
   目标：把 app.min.css / bootstrap 改版里的出厂蓝 #0064ff 与浅色硬编码
        全部收敛到 ty.tokens.css 的黑白令牌上。必须在 ty.tokens.css 之后加载。
   ========================================================================== */

/* --------------------------------------------------------------- 链接与文字 */
a {
  color: var(--ty-text-2);
  transition: color .16s ease;
}

a:hover {
  color: var(--ty-text);
}

.text-primary,
.text-indigo,
.text-info,
.text-success,
.text-warning,
.text-danger {
  color: var(--ty-text) !important;
}

.text-muted,
.text-body {
  color: var(--ty-text-2) !important;
}

.text-white {
  color: var(--ty-text) !important;
}

/* --------------------------------------------------------------- 按钮 */
.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger {
  background: var(--ty-accent) !important;
  border-color: var(--ty-accent) !important;
  color: var(--ty-on-accent) !important;
  box-shadow: none !important;
}

.btn-primary:hover,
.btn-success:hover,
.btn-info:hover,
.btn-warning:hover,
.btn-danger:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled).active {
  background: var(--ty-accent-2) !important;
  border-color: var(--ty-accent-2) !important;
  color: var(--ty-on-accent) !important;
}

.btn-outline-primary,
.btn-outline-success,
.btn-outline-info,
.btn-outline-danger,
.btn-outline-secondary {
  background: transparent !important;
  border-color: var(--ty-border-2) !important;
  color: var(--ty-text) !important;
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-danger:hover,
.btn-outline-success:hover,
.btn-outline-info:hover {
  background: var(--ty-surface-2) !important;
  color: var(--ty-text) !important;
}

.btn-link {
  color: var(--ty-text) !important;
}

.btn-light,
.btn-soft-primary,
.btn-soft-secondary,
.btn-secondary {
  background: var(--ty-surface-2) !important;
  border-color: var(--ty-border) !important;
  color: var(--ty-text) !important;
}

.btn-light:hover,
.btn-soft-primary:hover,
.btn-soft-secondary:hover {
  background: var(--ty-surface) !important;
  border-color: var(--ty-border-2) !important;
  color: var(--ty-text) !important;
}

.btn-icon.btn-sm,
.header .btn-icon {
  color: var(--ty-text-2) !important;
}

/* --------------------------------------------------------------- 徽章 */
.badge-soft-primary,
.badge-soft-info,
.badge-soft-success,
.badge-primary,
.badge-light {
  /* Bootstrap 硬编码 #eff2f7 浅灰底，暗色下会浮成亮白药丸；归进令牌组由令牌分模式 */
  background: var(--ty-surface-2) !important;
  color: var(--ty-text) !important;
}
a.badge-light:hover,
a.badge-light:focus {
  background: var(--ty-surface-3) !important;
  color: var(--ty-text) !important;
}

.badge-soft-danger,
.badge-danger {
  background: var(--ty-err-bg) !important;
  color: var(--ty-err) !important;
}

.badge-soft-warning,
.badge-warning {
  background: var(--ty-warn-bg) !important;
  color: var(--ty-warn) !important;
}

/* --------------------------------------------------------------- 页签 */
.nav-tabs {
  border-bottom-color: var(--ty-border) !important;
}

.nav-tabs .nav-link {
  color: var(--ty-text-2);
  border-color: transparent;
}

.nav-tabs .nav-link:hover {
  color: var(--ty-text);
  border-color: transparent;
}

.nav-tabs .nav-link.active,
.nav-tabs-custom .nav-item .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--ty-text) !important;
  background: transparent;
  border-color: transparent;
  border-bottom-color: var(--ty-accent) !important;
}

/* --------------------------------------------------------------- 表单 */
input.form-control,
textarea.form-control,
select.form-control,
.form-control,
.custom-select,
.iam-input-text,
.login_right .form-control,
.auth-full-page-content .form-control,
.card .form-control {
  background: var(--ty-surface-2) !important;
  border: 1px solid var(--ty-border) !important;
  color: var(--ty-text) !important;
}

.form-control::placeholder {
  color: var(--ty-text-3) !important;
}

.form-control:focus,
.custom-select:focus,
.iam-input-text:focus {
  background: var(--ty-surface) !important;
  border-color: var(--ty-text-3) !important;
  color: var(--ty-text) !important;
  box-shadow: 0 0 0 3px var(--ty-ring) !important;
}

.form-control:disabled,
.form-control[readonly],
input:disabled {
  background: var(--ty-bg-2) !important;
  color: var(--ty-text-3) !important;
}

.input-group-text {
  background: var(--ty-surface) !important;
  border-color: var(--ty-border) !important;
  color: var(--ty-text-2) !important;
}

label,
.custom-control-label,
.col-form-label {
  color: var(--ty-text-2);
}

.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--ty-accent) !important;
  border-color: var(--ty-accent) !important;
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 2px var(--ty-ring) !important;
}

/* --------------------------------------------------------------- 卡片与容器 */
.card,
.ty-card {
  background: var(--ty-surface) !important;
  border-color: var(--ty-border) !important;
  color: var(--ty-text) !important;
}

.card-header,
.card-footer {
  background: var(--ty-surface-2) !important;
  border-color: var(--ty-border) !important;
  color: var(--ty-text) !important;
}

.card-title,
.card-subtitle {
  color: var(--ty-text) !important;
}

/* change.qr.css 里还有一批硬编码：
   .page-title-box h4 / .card / .card-title / .modal-title { color:#000 }
   以及 .card-title / .modal-title { border-left:3px solid #0064ff }。
   .card 和 .card-title 上面已经用 !important 压住了，但页标题没覆盖到，
   深色模式下「提交工单」这种 H4 是纯黑字压在深底上、直接看不见。
   出厂蓝左竖条也是厂商 chrome，YXVM 版式里没有，一并去掉。 */
.page-title-box h4,
.page-title-box .page-title {
  color: var(--ty-text) !important;
}

.page-title-box .breadcrumb { color: var(--ty-text-3) !important; }

.card-title,
.modal-title {
  border-left: 0 !important;
  padding-left: 0 !important;
}

.mf_box { background-color: var(--ty-surface) !important; }

.dropdown-menu,
.bootstrap-select .dropdown-menu {
  background: var(--ty-surface) !important;
  border: 1px solid var(--ty-border) !important;
  box-shadow: var(--ty-shadow) !important;
}

.dropdown-item {
  color: var(--ty-text-2) !important;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
  background: var(--ty-surface-2) !important;
  color: var(--ty-text) !important;
}

.dropdown-divider {
  border-top-color: var(--ty-border) !important;
}

/* --------------------------------------------------------------- 表格 */
.table {
  color: var(--ty-text-2) !important;
  background: transparent;
}

.table th,
.table td {
  border-color: var(--ty-border) !important;
}

.table thead th,
.table-bordered thead th {
  background: var(--ty-surface-2) !important;
  color: var(--ty-text) !important;
  border-color: var(--ty-border) !important;
}

.table-hover tbody tr:hover,
.table tbody tr:hover {
  background: var(--ty-surface-2) !important;
  color: var(--ty-text) !important;
}

.table td .dropup .dropdown-toggle::after,
.dropdown-toggle::after {
  border-top-color: currentColor;
}

/* --------------------------------------------------------------- 分页 */
.pagination .page-link {
  background: var(--ty-surface);
  border-color: var(--ty-border);
  color: var(--ty-text-2);
}

.pagination .page-item.active .page-link {
  background: var(--ty-accent) !important;
  border-color: var(--ty-accent) !important;
  color: var(--ty-on-accent) !important;
}

.pagination .page-link:hover {
  background: var(--ty-surface-2);
  color: var(--ty-text);
}

/* --------------------------------------------------------------- 弹窗与提示 */
.modal-content {
  background: var(--ty-surface) !important;
  border: 1px solid var(--ty-border) !important;
  color: var(--ty-text) !important;
}

.modal-header,
.modal-footer {
  border-color: var(--ty-border) !important;
}

.modal-title {
  color: var(--ty-text) !important;
}

.close {
  color: var(--ty-text-2) !important;
  text-shadow: none !important;
  opacity: 1;
}

.close:hover {
  color: var(--ty-text) !important;
}

.jconfirm .jconfirm-box {
  background: var(--ty-surface) !important;
  color: var(--ty-text) !important;
  border-radius: 14px !important;
}

.jconfirm .jconfirm-title-c .jconfirm-title {
  color: var(--ty-text) !important;
}

.jconfirm .jconfirm-content {
  color: var(--ty-text-2) !important;
}

#toast-container > div {
  background: var(--ty-surface) !important;
  color: var(--ty-text) !important;
  border: 1px solid var(--ty-border) !important;
  box-shadow: var(--ty-shadow) !important;
  opacity: 1;
}

/* --------------------------------------------------------------- 侧栏激活态 */
#sidebar-menu ul li a.active,
#sidebar-menu ul li .mm-active,
.mm-active,
.mm-active > a,
.mm-active > a.has-arrow,
.vertical-menu #side-menu > li > a.active {
  color: var(--ty-text) !important;
}

/* --------------------------------------------------------------- 全局细节 */
hr,
.border,
.border-top,
.border-bottom,
.border-left,
.border-right {
  border-color: var(--ty-border) !important;
}

.bg-light {
  background: var(--ty-bg-2) !important;
}

.bg-white {
  background: var(--ty-surface) !important;
}

.bg-secondary,
.bg-primary:not(.ty-cta) {
  background: var(--ty-surface-2) !important;
}

::selection {
  background: var(--ty-accent);
  color: var(--ty-on-accent);
}

/* --------------------------------------------------------- 注册/找回密码页 */
/* 厂商的 .auth-full-page-content 本身是 flex 行容器，给它加 max-width
   会把里面的表单挤扁（实测 165px）。所以容器保持原样，只把内层
   .login_right 收成一张居中的卡，与登录页同一套版式。 */
.auth-full-page-content {
  display: block !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.auth-full-page-content .login_right {
  width: 100% !important;
  max-width: 560px;
  margin: clamp(16px, 5vh, 56px) auto !important;
  padding: clamp(22px, 3.4vw, 34px);
  background: var(--ty-surface);
  border: 1px solid var(--ty-border);
  border-radius: 22px;
  box-shadow: var(--ty-shadow);
}

.auth-full-page-content .form-control {
  height: 46px;
  border-radius: 12px !important;
}

.auth-full-page-content .btn {
  border-radius: 12px !important;
}

.auth-full-page-content .btn-block,
.auth-full-page-content button[type="submit"] {
  height: 48px;
  font-weight: 700;
  letter-spacing: .01em;
}

.auth-full-page-content .qrebg,
.auth-full-page-content .item {
  background: none !important;
  box-shadow: none !important;
}

.auth-full-page-content .nav-tabs {
  gap: 4px;
  margin-bottom: 22px;
}

.auth-full-page-content .nav-tabs .nav-link {
  white-space: nowrap;
  font-size: 14.5px;
  padding: 10px 18px;
}

@media (max-width: 575.98px) {
  .auth-full-page-content .login_right {
    border-radius: 16px;
    padding: 20px 16px;
    margin-top: 12px;
    margin-bottom: 12px;
  }
}

/* --------------------------------------------------- 浏览器自动填充底色
   Chrome 的 :-webkit-autofill 是浏览器自绘，background 覆盖不掉。
   不要用 inset 0 0 0 1000px box-shadow：元素尺寸为 0 时（被 JS 隐藏的
   验证码/密码框）那 1000px 会糊出一大块亮色，出现在卡片上像一道白斑。
   改用超长 transition 冻结 Chrome 的填充底色，无副作用。 */
/* 选择器要压过厂商/旧版可能带的 :root[data-theme=...] 前缀：
   两条都带 !important 时先比特异性再比顺序，特异性不够就盖不掉 */
body input:-webkit-autofill,
body input:-webkit-autofill:hover,
body input:-webkit-autofill:focus,
body input:-webkit-autofill:active,
body textarea:-webkit-autofill,
body select:-webkit-autofill,
:root[data-theme="dark"] input:-webkit-autofill,
:root[data-theme="dark"] input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ty-text);
  caret-color: var(--ty-text);
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  border-radius: 12px;
  transition: background-color 99999s ease-in-out 0s;
}



/* 购物车兼容层已撤销：这组令牌现在由 ty.tokens.css 单一来源定义，
   不再需要带 !important 的强制覆盖。 */

/* 购物车页面同样要显式画底，不能靠浏览器默认画布 */
body:has(.ty-cart-page),
body:has(.ty-products-banner) {
  background-color: var(--ty-bg);
}


/* ============================================================ 拟态白阴影
   厂商 change.qr.css / global.css 给表单控件加了一对新拟态阴影
   （白 -8px -8px + 暗 8px 8px），是为浅色底设计的。
   深色主题下白色那半会在控件上方糊出一条亮带，必须整体关掉。 */
.form-control,
.custom-select,
select,
textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
.iam-input-text,
.input-group-text,
.custom-file-label,
.card,
.card-header,
.card-footer,
.modal-content,
.dropdown-menu,
.table,
.btn {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

/* 焦点态保留一个克制的环，别回到白晕 */
.form-control:focus,
.custom-select:focus,
select:focus,
textarea:focus,
.iam-input-text:focus,
.input-group-text:focus {
  box-shadow: 0 0 0 3px rgba(var(--ty-hi-rgb), .08) !important;
}


/* ============================================================ 内容居中留白
   YXVM 的内容不是贴到屏幕边缘，而是居中一条，两侧留灰底。 */
.page-content > .container-fluid {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(16px, 3vw, 32px);
  padding-right: clamp(16px, 3vw, 32px);
}


/* ============================================================ 表格不再撑满剩余高度
   厂商 .table-responsive { min-height: calc(100vh - 650px) } 和
   .user-center_calc { height: calc(100vh - 505px); min-height: 400px }
   会让只有一行表头的空表格占掉 700+ 像素，把页面顶出滚动条。
   改成随内容收缩；行数多时页面正常滚动。 */
.table-responsive,
.table-container,
.user-center_calc,
.ty-ca .table-responsive {
  min-height: 0 !important;
  height: auto !important;
}

/* 概览页纵向收紧：去掉撑高的固定高度类 */
.ty-ca .user-center_h300 { height: auto !important; min-height: 0 !important; }


/* ============================================================ 空状态压缩
   空表格的「没有任何内容」一行会吃掉 230px（插画 + 上下内距），
   是概览页多出滚动条的最后一段。压到够看就行。 */
.no-data {
  min-height: 0 !important;
  padding: 14px 0 !important;
  flex-direction: column;
  gap: 4px;
}

.no-data img,
#sourceListBox .no-data img,
.user-center_resources .no-data img {
  max-height: 88px !important;
  width: auto !important;
}

/* 资源列表表头与标题的纵向间距也收一点 */
#sourceListBox > .card-title { margin-bottom: 14px !important; }
#sourceListBox .table-footer { margin-top: 8px !important; }


/* ============================================================ 概览页免滚动
   厂商写死的 #sourceListBox { min-height: 420px } 与 .page-content 的
   60px 底部内距，内容不足时白白顶出滚动条。 */
#sourceListBox {
  min-height: 0 !important;
}

.page-content {
  padding-bottom: 20px !important;
}


/* ============================================================ 内容区铺满
   厂商 .page-content 是 padding: 24px 12px 60px 0 —— 侧边栏时代留下的左右
   不对称，也是「整体偏左」的来源。横向内距统一交给 .container-fluid。
   再用 :has(.ty-ca) 只在用户中心把高度往下传，让资源列表卡片吃掉底部灰底；
   不支持 :has() 的浏览器退回原样，且完全不影响其它页面。 */
.page-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* .main-content 的高度是 body flex 拉出来的（height 仍是 auto），
   所以子元素写 min-height:100% 不解析，必须继续用 flex 往下传 */
.main-content:has(.ty-ca) {
  display: flex;
  flex-direction: column;
}

.page-content:has(> .container-fluid .ty-ca) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.page-content:has(> .container-fluid .ty-ca) > .container-fluid {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}


/* ============================================================ 列表页美化
   服务列表 / 账单 / 工单 / 交易 这类表格页（厂商 .table-container 一套）。
   只针对厂商专有类名，不会波及表单和详情页的正文。 */

/* 状态徽章：厂商是纯色高饱和底（亮绿/亮红）压白字，和品牌不搭。
   改成带点的淡色胶囊，和概览页资源列表那套一致。 */
.badge[class*="status-"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.7;
  /* 原来只写了 background:none，把厂商的高饱和底色清掉了，
     却没声明 color —— 厂商为绿底/红底设计的白字就留在透明背景上，
     浅色模式下「已支付」变成白字压白底，完全隐形。这里补齐。 */
  color: var(--ty-text-2);
  background: var(--ty-surface-2);
  border-color: var(--ty-border);
}

/* 按语义分组，底色用令牌的 10%~12% 淡色，文字用同色系深色，
   暗色下令牌自带更亮的变体，不需要另写一套 */
.badge[class*="status-"][class*="success"],
.badge[class*="status-"][class*="paid"],
.badge[class*="status-"][class*="active"],
.badge[class*="status-"][class*="online"],
.badge[class*="status-"][class*="running"],
.badge[class*="status-"][class*="complete"] {
  color: var(--ty-ok);
  background: var(--ty-ok-bg);
}

.badge[class*="status-"][class*="suspend"],
.badge[class*="status-"][class*="delete"],
.badge[class*="status-"][class*="cancel"],
.badge[class*="status-"][class*="fail"],
.badge[class*="status-"][class*="unpaid"],
.badge[class*="status-"][class*="overdue"],
.badge[class*="status-"][class*="reject"] {
  color: var(--ty-err);
  background: var(--ty-err-bg);
}

.badge[class*="status-"][class*="pending"],
.badge[class*="status-"][class*="process"],
.badge[class*="status-"][class*="await"],
.badge[class*="status-"][class*="unactive"] {
  color: var(--ty-warn);
  background: var(--ty-warn-bg);
}

.badge[class*="status-"][class*="refund"],
.badge[class*="status-"][class*="expire"],
.badge[class*="status-"][class*="upgrade"] {
  color: var(--ty-info);
  background: var(--ty-info-bg);
}

.badge[class*="status-"]::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 5px;
}

.status-active, .badge.status-active {
  color: var(--ty-ok) !important;
  background: var(--ty-ok-bg) !important;
  border-color: var(--ty-ok-bg) !important;
}

.status-pending, .status-unpaid, .badge.status-pending {
  color: var(--ty-warn) !important;
  background: var(--ty-warn-bg) !important;
  border-color: var(--ty-warn-bg) !important;
}

.status-suspended, .status-expired, .status-terminated,
.status-fraud, .badge.status-suspended {
  color: var(--ty-err) !important;
  background: var(--ty-err-bg) !important;
  border-color: var(--ty-err-bg) !important;
}

/* 表格容器 */
.table-container .table-header { padding: 4px 0 14px; }

.table-filter .row { align-items: center; gap: 10px; }
.table-filter .col { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }

/* 筛选条上的下拉：圆角 + 与按钮等高 */
.table-filter .bootstrap-select,
.table-filter .dropdown-toggle { min-width: 200px; }

.table-filter .bootstrap-select .dropdown-toggle {
  padding: 8px 32px 8px 13px !important;
  border: 1px solid var(--ty-border-2) !important;
  border-radius: 11px !important;
  background-color: var(--ty-surface) !important;
  background-image: none !important;
  font-size: 13px;
  color: var(--ty-text-2) !important;
  box-shadow: none !important;
}

.table-filter .btn { min-height: 38px; border-radius: 11px !important; font-size: 13px; }

/* 表头：厂商是 bg-light 的一条重灰带，收成极淡 + 小字重 */
.tablelist > thead > tr > th,
.table-container thead > tr > th {
  padding: 10px 12px;
  background: var(--ty-surface-2) !important;
  border-bottom: 1px solid var(--ty-border) !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ty-text-3) !important;
  white-space: nowrap;
}

.table-container tbody > tr > td { vertical-align: middle; }

/* 表格里的产品名 + 实例号：主副两行拉开层级 */
.table-container tbody a.text-dark,
.table-container tbody .font-weight-bold {
  display: block;
  font-weight: 650;
  color: var(--ty-text) !important;
}

.table-container tbody small,
.table-container tbody .text-muted {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--ty-text-3) !important;
}

/* 底部工具条与分页 */
.table-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
}

.table-footer .btn { min-height: 34px; border-radius: 10px !important; font-size: 12.5px; }

.pagination { gap: 4px; }

.pagination .page-item .page-link {
  min-width: 30px;
  height: 30px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ty-border);
  border-radius: 9px !important;
  background: var(--ty-surface);
  font-size: 12.5px;
  color: var(--ty-text-2) !important;
  box-shadow: none !important;
}

.pagination .page-item.active .page-link {
  background: var(--ty-accent);
  border-color: var(--ty-accent);
  color: var(--ty-on-accent) !important;
  font-weight: 650;
}

.pagination .page-item .page-link:hover {
  background: var(--ty-surface-2);
  color: var(--ty-text) !important;
}

.pagination .page-item.active .page-link:hover { background: var(--ty-accent); }

/* 每页条数选择器 */
.table-pageinfo,
.table-pageinfo select {
  font-size: 12.5px;
  color: var(--ty-text-3);
}

.table-pageinfo select {
  padding: 3px 8px;
  border: 1px solid var(--ty-border);
  border-radius: 7px;
  background: var(--ty-surface);
  color: var(--ty-text-2);
}


/* 状态列里的实时电源指示点（.dots，onclick=getSingleStatus）。
   它是功能元素不是装饰，不能隐藏；但厂商让它单独占一行、
   状态未返回时是 unknown_color 灰点，看着像残留。
   改成和状态徽章同行内联，并给三种状态色。 */
.table-container tbody td:has(> .dots) {
  white-space: nowrap;
}

.table-container .dots,
.dots {
  /* 厂商把 .dots 设成 position:absolute（td 上是 position:relative），
     而绝对定位会让 inline-block 被 blockify 成 block —— 这就是为什么
     加了 !important 的 inline-block 计算值仍是 block，也是那个点
     看起来脱离行列的原因。先归位到正常流，再内联。 */
  position: static !important;
  display: inline-block !important;
  width: 9px;
  height: 9px;
  margin: 0 8px 0 0 !important;
  vertical-align: middle;
  border-radius: 50%;
  background: var(--ty-border-2);
  box-shadow: none !important;
  cursor: pointer;
}

.dots.unknown_color { background: var(--ty-border-2); }
.dots.green_color, .dots.on_color { background: var(--ty-ok); }
.dots.red_color, .dots.off_color { background: var(--ty-err); }


/* ============================================================ 暗色 · 厂商新拟态阴影
   global.css 里有一批「浮雕」写法，颜色全是浅灰/纯白：
     .table-responsive { box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9 }
     .addfunds-payment { box-shadow: 8px 8px 20px rgba(55,99,170,.1), -8px -8px 20px #fff;
                         border: 2px solid #fff }
     以及 .ticket-item / .type-item / .btn-light / 行 hover 的 #f5f7fa
   浅色下是立体感，暗色下就是一圈亮白矩形 —— 即用户反馈的「每个页面都有这个框」。
   只认 data-theme=dark：ty.theme.js 会把三态（跟随系统/暗/浅）解析成显式的
   light|dark 写到 html 上，所以这一个钩子就够，且不会误伤浅色。
   脚本没跑起来时才由下面的媒体查询兜底。 */

:root[data-theme="dark"] .table-responsive { box-shadow: none; }
:root[data-theme="dark"] .table-container { box-shadow: none; }
:root[data-theme="dark"] .table-header { box-shadow: none; }
:root[data-theme="dark"] .table-footer { box-shadow: none; }
:root[data-theme="dark"] .addfunds-payment { box-shadow: none; border-color: var(--ty-border); }
:root[data-theme="dark"] .addfunds-payment.active { box-shadow: none; border-color: var(--ty-accent); background-image: none; background-color: var(--ty-surface-2); }
:root[data-theme="dark"] .addfunds-payment:hover { box-shadow: none; border-color: var(--ty-accent); background-image: none; background-color: var(--ty-surface-2); }
:root[data-theme="dark"] .ticket-item { box-shadow: none; }
:root[data-theme="dark"] .ticket-item:hover { box-shadow: none; }
:root[data-theme="dark"] .type-item { box-shadow: none; }
:root[data-theme="dark"] .table-responsive tbody tr:hover td { background-color: var(--ty-surface-2); }
:root[data-theme="dark"] .btn-light { background-color: var(--ty-surface-2); color: var(--ty-text); border-color: var(--ty-border); }
:root[data-theme="dark"] .btn-light:hover { background-color: var(--ty-surface-2); color: var(--ty-text); border-color: var(--ty-border); }
:root[data-theme="dark"] .powerimg { box-shadow: none; }
:root[data-theme="dark"] .cancelBtn { box-shadow: none; }
:root[data-theme="dark"] .security-avatar { box-shadow: none; }
:root[data-theme="dark"] .security-logo { box-shadow: none; }

@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .table-responsive { box-shadow: none; }
:root:not([data-theme="light"]) .table-container { box-shadow: none; }
:root:not([data-theme="light"]) .table-header { box-shadow: none; }
:root:not([data-theme="light"]) .table-footer { box-shadow: none; }
:root:not([data-theme="light"]) .addfunds-payment { box-shadow: none; border-color: var(--ty-border); }
:root:not([data-theme="light"]) .addfunds-payment.active { box-shadow: none; border-color: var(--ty-accent); background-image: none; background-color: var(--ty-surface-2); }
:root:not([data-theme="light"]) .addfunds-payment:hover { box-shadow: none; border-color: var(--ty-accent); background-image: none; background-color: var(--ty-surface-2); }
:root:not([data-theme="light"]) .ticket-item { box-shadow: none; }
:root:not([data-theme="light"]) .ticket-item:hover { box-shadow: none; }
:root:not([data-theme="light"]) .type-item { box-shadow: none; }
:root:not([data-theme="light"]) .table-responsive tbody tr:hover td { background-color: var(--ty-surface-2); }
:root:not([data-theme="light"]) .btn-light { background-color: var(--ty-surface-2); color: var(--ty-text); border-color: var(--ty-border); }
:root:not([data-theme="light"]) .btn-light:hover { background-color: var(--ty-surface-2); color: var(--ty-text); border-color: var(--ty-border); }
:root:not([data-theme="light"]) .powerimg { box-shadow: none; }
:root:not([data-theme="light"]) .cancelBtn { box-shadow: none; }
:root:not([data-theme="light"]) .security-avatar { box-shadow: none; }
:root:not([data-theme="light"]) .security-logo { box-shadow: none; }
}


/* ===================================================== 机器列表：去掉状态筛选框
   service.tpl 等 11 个模板里的 #statusSel 是 multiple 多选框，
   默认值被 JS 写死成 Pending/Active/Suspended（service.tpl:11-16）。
   实测：后端在 URL 不带 domain_status[] 时本来就返回全部机器
   （/service?groupid=305&limit=100 与 加上全部 8 个状态参数 结果一致，
   而只传 Pending 时返回 0 行），也就是说这个框只是把选中项显示出来，
   并不会真的筛选列表 —— 反而让人误以为有机器被藏起来了。按用户要求隐藏。

   只命中带 multiple 的那个：billing 的账单状态筛选、contract 的合同状态、
   contracthost 的时间排序都叫 #statusSel 但都不是 multiple，不受影响。 */
.bootstrap-select:has(select#statusSel[multiple]) {
  display: none !important;
}


/* ============================================================ 暗色 · 厂商组件色
   global.css 这批组件是按纯白背景写的：标题 color:#000、卡片 background:#fff、
   进度条 #f6f6f6、API 空态框 border:#ccc + 一张白底插画。
   暗色下表现为「黑字压深底看不见」和「突兀白块 / 白框」。
   统一改走令牌；两种暗色来源都覆盖，浅色模式一行不动。 */
:root[data-theme="dark"] .security-item-title { color: var(--ty-text); }
:root[data-theme="dark"] .security-item-title small { color: var(--ty-text-3); }
:root[data-theme="dark"] .security-item-desc { color: var(--ty-text-3); }
:root[data-theme="dark"] .security-info { background-color: var(--ty-surface-2); color: var(--ty-text); }
:root[data-theme="dark"] .security-username { color: var(--ty-text); }
:root[data-theme="dark"] .security-logo { background-color: var(--ty-surface-2); color: var(--ty-text); }
:root[data-theme="dark"] .security-label { color: var(--ty-text-3); }
:root[data-theme="dark"] .security-item-image { background-color: transparent; }
:root[data-theme="dark"] .api-apply { border-color: var(--ty-border); }
:root[data-theme="dark"] .api-apply img { opacity: .30; }
:root[data-theme="dark"] .progress { background-color: var(--ty-surface-2); }
:root[data-theme="dark"] .note-editable { color: var(--ty-text); }
:root[data-theme="dark"] .note-editor .note-toolbar { background-color: var(--ty-surface-2); color: var(--ty-text); }
:root[data-theme="dark"] .label-color { color: var(--ty-text-2) !important; }
:root[data-theme="dark"] .not_certified_title { color: var(--ty-text); }
:root[data-theme="dark"] .not_certified_text { color: var(--ty-text-3); }
:root[data-theme="dark"] .type-title { color: var(--ty-text); }
:root[data-theme="dark"] .type-desc { color: var(--ty-text-3); }
:root[data-theme="dark"] .type-item { border-color: var(--ty-border); }
:root[data-theme="dark"] .news-item a { color: var(--ty-text-2); }
:root[data-theme="dark"] .kb-link { color: var(--ty-text-2); }
:root[data-theme="dark"] .knowledgebase .card-title a { color: var(--ty-text-2); border-bottom-color: var(--ty-line); }
:root[data-theme="dark"] .kb-item .date { color: var(--ty-text-3); }
:root[data-theme="dark"] .pay-title { color: var(--ty-text); }
:root[data-theme="dark"] .pay-amount { color: var(--ty-text); }
:root[data-theme="dark"] .affiliates-item-title { color: var(--ty-text); }
:root[data-theme="dark"] .affiliates-item-text { color: var(--ty-text-3); }
:root[data-theme="dark"] .form-control-label { color: var(--ty-text-3); }
:root[data-theme="dark"] .form-control:disabled { background-color: var(--ty-surface-2); color: var(--ty-text-3); }
:root[data-theme="dark"] .form-control[readonly] { background-color: var(--ty-surface-2); color: var(--ty-text-3); }
:root[data-theme="dark"] .input-group-prepend span { background-color: var(--ty-surface-2); color: var(--ty-text-2); border-color: var(--ty-border); }
:root[data-theme="dark"] .input-group-text { background-color: var(--ty-surface-2); color: var(--ty-text-2); border-color: var(--ty-border); }

@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .security-item-title { color: var(--ty-text); }
:root:not([data-theme="light"]) .security-item-title small { color: var(--ty-text-3); }
:root:not([data-theme="light"]) .security-item-desc { color: var(--ty-text-3); }
:root:not([data-theme="light"]) .security-info { background-color: var(--ty-surface-2); color: var(--ty-text); }
:root:not([data-theme="light"]) .security-username { color: var(--ty-text); }
:root:not([data-theme="light"]) .security-logo { background-color: var(--ty-surface-2); color: var(--ty-text); }
:root:not([data-theme="light"]) .security-label { color: var(--ty-text-3); }
:root:not([data-theme="light"]) .security-item-image { background-color: transparent; }
:root:not([data-theme="light"]) .api-apply { border-color: var(--ty-border); }
:root:not([data-theme="light"]) .api-apply img { opacity: .30; }
:root:not([data-theme="light"]) .progress { background-color: var(--ty-surface-2); }
:root:not([data-theme="light"]) .note-editable { color: var(--ty-text); }
:root:not([data-theme="light"]) .note-editor .note-toolbar { background-color: var(--ty-surface-2); color: var(--ty-text); }
:root:not([data-theme="light"]) .label-color { color: var(--ty-text-2) !important; }
:root:not([data-theme="light"]) .not_certified_title { color: var(--ty-text); }
:root:not([data-theme="light"]) .not_certified_text { color: var(--ty-text-3); }
:root:not([data-theme="light"]) .type-title { color: var(--ty-text); }
:root:not([data-theme="light"]) .type-desc { color: var(--ty-text-3); }
:root:not([data-theme="light"]) .type-item { border-color: var(--ty-border); }
:root:not([data-theme="light"]) .news-item a { color: var(--ty-text-2); }
:root:not([data-theme="light"]) .kb-link { color: var(--ty-text-2); }
:root:not([data-theme="light"]) .knowledgebase .card-title a { color: var(--ty-text-2); border-bottom-color: var(--ty-line); }
:root:not([data-theme="light"]) .kb-item .date { color: var(--ty-text-3); }
:root:not([data-theme="light"]) .pay-title { color: var(--ty-text); }
:root:not([data-theme="light"]) .pay-amount { color: var(--ty-text); }
:root:not([data-theme="light"]) .affiliates-item-title { color: var(--ty-text); }
:root:not([data-theme="light"]) .affiliates-item-text { color: var(--ty-text-3); }
:root:not([data-theme="light"]) .form-control-label { color: var(--ty-text-3); }
:root:not([data-theme="light"]) .form-control:disabled { background-color: var(--ty-surface-2); color: var(--ty-text-3); }
:root:not([data-theme="light"]) .form-control[readonly] { background-color: var(--ty-surface-2); color: var(--ty-text-3); }
:root:not([data-theme="light"]) .input-group-prepend span { background-color: var(--ty-surface-2); color: var(--ty-text-2); border-color: var(--ty-border); }
:root:not([data-theme="light"]) .input-group-text { background-color: var(--ty-surface-2); color: var(--ty-text-2); border-color: var(--ty-border); }
}


/* ==================================================== 暗色 · 压过 Bootstrap 工具类
   Bootstrap 4 的 .bg-white / .bg-light 带 !important，
   上一轮 :root[data-theme=dark] .security-logo 虽然权重更高但没写 !important，
   important 对非 important 永远赢，所以那个 60px 白圆没被改掉。
   这里把两个背景工具类在暗色下整体重映射到令牌 ——
   一次性挡掉后续所有「组件加了 bg-white 就变白块」的同类问题。
   .text-white 不动：暗色下白字本来就是对的。 */
:root[data-theme="dark"] .bg-white { background-color: var(--ty-surface) !important; }
:root[data-theme="dark"] .bg-light { background-color: var(--ty-bg-2) !important; }
:root[data-theme="dark"] .security-logo { background-color: var(--ty-surface-2) !important; color: var(--ty-text) !important; }
:root[data-theme="dark"] .header-profile-user { background-color: var(--ty-surface-2) !important; }
:root[data-theme="dark"] .ty-back2top { color: var(--ty-on-accent) !important; }
:root[data-theme="dark"] .ty-back2top span { color: var(--ty-on-accent) !important; }
:root[data-theme="dark"] .ty-back2top i { color: var(--ty-on-accent) !important; }
:root[data-theme="dark"] .pls-back2top { color: var(--ty-on-accent) !important; }
:root[data-theme="dark"] .pls-back2top span { color: var(--ty-on-accent) !important; }

@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .bg-white { background-color: var(--ty-surface) !important; }
:root:not([data-theme="light"]) .bg-light { background-color: var(--ty-bg-2) !important; }
:root:not([data-theme="light"]) .security-logo { background-color: var(--ty-surface-2) !important; color: var(--ty-text) !important; }
:root:not([data-theme="light"]) .header-profile-user { background-color: var(--ty-surface-2) !important; }
:root:not([data-theme="light"]) .ty-back2top { color: var(--ty-on-accent) !important; }
:root:not([data-theme="light"]) .ty-back2top span { color: var(--ty-on-accent) !important; }
:root:not([data-theme="light"]) .ty-back2top i { color: var(--ty-on-accent) !important; }
:root:not([data-theme="light"]) .pls-back2top { color: var(--ty-on-accent) !important; }
:root:not([data-theme="light"]) .pls-back2top span { color: var(--ty-on-accent) !important; }
}


/* ==================================================== 暗色 · 分页与 btn-default
   全站巡检（21 页）结果：A.page-link 白底命中 11 个页面 —— Bootstrap 的
   .page-link 是组件类，不带 !important 的 bg-white 工具类重映射盖不住它。
   .btn-default / .btn-secondary 系（下拉筛选、每页条数）白底命中 4 个页面。
   分页当前页沿用 --ty-accent，跟按钮一样走反色，保持一致。 */
:root[data-theme="dark"] .page-link { background-color: var(--ty-surface); color: var(--ty-text-2); border-color: var(--ty-border); }
:root[data-theme="dark"] .page-item.disabled .page-link { background-color: var(--ty-bg-2); color: var(--ty-text-3); }
:root[data-theme="dark"] .page-item.active .page-link { background-color: var(--ty-accent); color: var(--ty-on-accent); border-color: var(--ty-accent); }
:root[data-theme="dark"] .page-item .page-link:hover { background-color: var(--ty-accent); color: var(--ty-on-accent); border-color: var(--ty-accent); }
:root[data-theme="dark"] .btn-default { background-color: var(--ty-surface-2) !important; color: var(--ty-text-2) !important; border-color: var(--ty-border) !important; }
:root[data-theme="dark"] .btn-default:focus { background-color: var(--ty-surface-2) !important; color: var(--ty-text-2) !important; border-color: var(--ty-border) !important; }
:root[data-theme="dark"] .btn-default:hover { background-color: var(--ty-line) !important; color: var(--ty-text) !important; border-color: var(--ty-border-2) !important; }
:root[data-theme="dark"] .btn-default:active { background-color: var(--ty-line) !important; color: var(--ty-text) !important; border-color: var(--ty-border-2) !important; }
:root[data-theme="dark"] .btn-default.active { background-color: var(--ty-line) !important; color: var(--ty-text) !important; border-color: var(--ty-border-2) !important; }
:root[data-theme="dark"] .show > .btn-default { background-color: var(--ty-line) !important; color: var(--ty-text) !important; border-color: var(--ty-border-2) !important; }
:root[data-theme="dark"] .btn-secondary { background-color: var(--ty-surface-2); color: var(--ty-text-2); border-color: var(--ty-border); }
:root[data-theme="dark"] .btn-secondary:hover { background-color: var(--ty-surface-2); color: var(--ty-text-2); border-color: var(--ty-border); }
:root[data-theme="dark"] .btn-secondary:focus { background-color: var(--ty-surface-2); color: var(--ty-text-2); border-color: var(--ty-border); }
:root[data-theme="dark"] .btn-outline-default { background-color: transparent; color: var(--ty-text-2); border-color: var(--ty-border); }
:root[data-theme="dark"] .btn-outline-secondary { background-color: transparent; color: var(--ty-text-2); border-color: var(--ty-border); }

@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .page-link { background-color: var(--ty-surface); color: var(--ty-text-2); border-color: var(--ty-border); }
:root:not([data-theme="light"]) .page-item.disabled .page-link { background-color: var(--ty-bg-2); color: var(--ty-text-3); }
:root:not([data-theme="light"]) .page-item.active .page-link { background-color: var(--ty-accent); color: var(--ty-on-accent); border-color: var(--ty-accent); }
:root:not([data-theme="light"]) .page-item .page-link:hover { background-color: var(--ty-accent); color: var(--ty-on-accent); border-color: var(--ty-accent); }
:root:not([data-theme="light"]) .btn-default { background-color: var(--ty-surface-2) !important; color: var(--ty-text-2) !important; border-color: var(--ty-border) !important; }
:root:not([data-theme="light"]) .btn-default:focus { background-color: var(--ty-surface-2) !important; color: var(--ty-text-2) !important; border-color: var(--ty-border) !important; }
:root:not([data-theme="light"]) .btn-default:hover { background-color: var(--ty-line) !important; color: var(--ty-text) !important; border-color: var(--ty-border-2) !important; }
:root:not([data-theme="light"]) .btn-default:active { background-color: var(--ty-line) !important; color: var(--ty-text) !important; border-color: var(--ty-border-2) !important; }
:root:not([data-theme="light"]) .btn-default.active { background-color: var(--ty-line) !important; color: var(--ty-text) !important; border-color: var(--ty-border-2) !important; }
:root:not([data-theme="light"]) .show > .btn-default { background-color: var(--ty-line) !important; color: var(--ty-text) !important; border-color: var(--ty-border-2) !important; }
:root:not([data-theme="light"]) .btn-secondary { background-color: var(--ty-surface-2); color: var(--ty-text-2); border-color: var(--ty-border); }
:root:not([data-theme="light"]) .btn-secondary:hover { background-color: var(--ty-surface-2); color: var(--ty-text-2); border-color: var(--ty-border); }
:root:not([data-theme="light"]) .btn-secondary:focus { background-color: var(--ty-surface-2); color: var(--ty-text-2); border-color: var(--ty-border); }
:root:not([data-theme="light"]) .btn-outline-default { background-color: transparent; color: var(--ty-text-2); border-color: var(--ty-border); }
:root:not([data-theme="light"]) .btn-outline-secondary { background-color: transparent; color: var(--ty-text-2); border-color: var(--ty-border); }
}