/* ============================================================
   Vault 购物车 · 暗色模式补丁
   ------------------------------------------------------------
   问题：会员端的 ty.vendor.css 里 `.card { background: var(--ty-surface) !important }`
   是无条件的，但购物车页在它之后还加载了 configureproduct.css / topbar.css /
   custom.css，这些厂商文件把 .card / .smc-card / .ordersummary / .form-control
   等一类表面写死成 #fff。文字侧却已经跟着 --ty-text 变成近白 (#f3f5f7)，
   于是暗色下出现「白底 + 近白字」，订单汇总的 测速 / 总价 / 金额 直接隐形
   （实测对比度差仅 0.04）。

   做法：这张表必须排在所有购物车自有 CSS 之后，并带 !important。
   全部规则挂在暗色条件下，浅色模式一行都不会被影响，不存在回归。

   暗色判定与 ty.tokens.css 保持一致：跟随系统 prefers-color-scheme，
   或 ty.theme.js 写入的 html[data-theme="dark"] 强制。
   ============================================================ */

/* 两个条件共用一份声明，用 :is() 收敛写法 */
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .card-back,
html[data-theme="dark"] .smc-card,
html[data-theme="dark"] .configoption_form,
html[data-theme="dark"] .no-data,
html[data-theme="dark"] .products-nav,
html[data-theme="dark"] .secondgroup_box,
html[data-theme="dark"] .product-wrap-box,
html[data-theme="dark"] .ty-filter-box {
  background: var(--ty-surface) !important;
  border-color: var(--ty-border) !important;
  color: var(--ty-text) !important;
}

/* 表格里那些被写死 #212529 / #495057 的单元格文字 */
html[data-theme="dark"] .ordersummary,
html[data-theme="dark"] .ordersummary th,
html[data-theme="dark"] .ordersummary td,
html[data-theme="dark"] .configoption_total,
html[data-theme="dark"] .configoption_total td,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th {
  background: transparent !important;
  border-color: var(--ty-line) !important;
  color: var(--ty-text-2) !important;
}

/* 被厂商 Bootstrap 的 .text-dark / .color-999 之类压住的局部文字 */
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .color-999,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .font-weight-bold.text-dark {
  color: var(--ty-text) !important;
}
html[data-theme="dark"] .color-999 { color: var(--ty-text-3) !important; }

/* 输入控件：厂商把 background-color 写成 #fff 并配深色文字 */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .custom-select,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .bootstrap-select .dropdown-toggle {
  background-color: var(--ty-surface-2) !important;
  border-color: var(--ty-border) !important;
  color: var(--ty-text) !important;
}
html[data-theme="dark"] .form-control::placeholder { color: var(--ty-text-3) !important; }

/* 下拉面板（bootstrap-select）也是硬白底 */
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .bootstrap-select .dropdown-menu,
html[data-theme="dark"] .dropdown-item {
  background-color: var(--ty-surface) !important;
  border-color: var(--ty-border) !important;
  color: var(--ty-text-2) !important;
}
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus,
html[data-theme="dark"] .bootstrap-select .dropdown-item.active {
  background-color: var(--ty-surface-2) !important;
  color: var(--ty-text) !important;
}

/* 周期选择那一排按钮：选中态是粉渐变，未选中是白底深字 */
html[data-theme="dark"] .btn-outline-primary,
html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .cycle-btn,
html[data-theme="dark"] .paycycle li a {
  background-color: var(--ty-surface-2) !important;
  border-color: var(--ty-border) !important;
  color: var(--ty-text-2) !important;
}

/* 分隔线与浅色底纹 */
html[data-theme="dark"] hr,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom {
  border-color: var(--ty-line) !important;
}
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-white {
  background-color: var(--ty-surface) !important;
}

/* 系统偏好暗色、但还没被 data-theme 显式标记时的兜底（首帧防闪白） */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .card,
  html:not([data-theme="light"]) .card-body,
  html:not([data-theme="light"]) .smc-card,
  html:not([data-theme="light"]) .ordersummary,
  html:not([data-theme="light"]) .form-control {
    background: var(--ty-surface) !important;
    background-color: var(--ty-surface) !important;
    color: var(--ty-text) !important;
  }
}