/* ==========================================================================
   sdv2.css —— 客户区「服务器详情页」改版样式 · 第四批（修正）
   --------------------------------------------------------------------------
   落点：themes/clientarea/lingsu/assets_custom/css/sdv2.css
   引入：themes/clientarea/lingsu/includes/head.tpl 一行 <link>（第 18 行）
   说明：assets_custom/ 是主题官方的二次开发安全区，主题更新不会覆盖。
   批次：一（01–05）/ 二（06–09）/ 三（10–13）/ 四（修正，本批）
   本批内容：流量进度条可见性修正 · 指标卡点击联动（A5）· 用量 tab 日期栏（A2）
   回滚：删除本文件 + 移除 head.tpl 中那一行 <link>（见各批报告第 5 节）。
   ========================================================================== */


/* ==========================================================================
   10 设计令牌（Design Tokens）
   --------------------------------------------------------------------------
   作用域说明：本文件同时被 detail 页与 chart.tpl 使用，
   · :root   —— 供 includes/chart.tpl 使用（该子模板被 cloud.tpl 与 zjmfcloud.tpl 共用，
                非 dcimcloud 产品页没有 #sd-v2 容器）
   · #sd-v2  —— 详情页最外层容器（zjmfcloud.tpl 的 .container-fluid），便于日后整体换肤
   命名统一加 --sdv2- 前缀，是惰性变量，不参与任何选择器匹配，不会影响主题原有样式。
   ========================================================================== */
:root,
#sd-v2 {
  /* 主色：直接继承主题令牌，改主题色时这里自动跟随 */
  --sdv2-primary:      var(--bs-global, #b074d1);
  --sdv2-primary-soft: var(--bs-global-1, #f2e9f8);
  --sdv2-primary-line: var(--bs-global-3, #d7b9e8);
  --sdv2-primary-a18:  rgba(176, 116, 209, .18);

  /* 面/底 */
  --sdv2-surface:      #ffffff;
  --sdv2-surface-soft: #fbfcfe;
  --sdv2-bg-head:      var(--sdv2-surface-soft);   /* 兼容批次二命名 */

  /* 文字 */
  --sdv2-text:         #1a1f36;
  --sdv2-text-sub:     #6b7280;
  --sdv2-text-mute:    #94a3b8;

  /* 线/状态 */
  --sdv2-border:       #e7eaf3;
  --sdv2-border-soft:  #eef1f7;
  --sdv2-danger:       #e31519;
  --sdv2-danger-soft:  #fef2f2;

  /* 圆角 */
  --sdv2-radius-sm:    8px;
  --sdv2-radius:       14px;
  --sdv2-radius-lg:    16px;

  /* 阴影 */
  --sdv2-shadow:       0 2px 8px rgba(31, 50, 82, .06);
  --sdv2-shadow-hover: 0 6px 20px rgba(31, 50, 82, .09);

  /* 动效 */
  --sdv2-ease:         .18s ease;
}


/* ==========================================================================
   07 顶部 Header —— 蓝色渐变大卡 → 白色卡片
   注意：状态文案仍取 host_data.domainstatus_desc（后端动态），未写死；
        状态徽章 .status-* 颜色保持主题原有实现。
   ========================================================================== */
#sdv2Header.server_header_box {
  background-image: none !important;
  background-color: var(--sdv2-surface);
  border: 1px solid var(--sdv2-border);
  border-radius: var(--sdv2-radius);
  box-shadow: var(--sdv2-shadow);
  color: var(--sdv2-text);
}

/* 原本的白色文字在白底上会「消失」，逐一改为深色 */
#sdv2Header .text-white { color: var(--sdv2-text) !important; }
#sdv2Header .text-white-50 { color: var(--sdv2-text-mute) !important; }
#sdv2Header h4.text-white { font-size: 20px; }

/* 浅色底上的分隔竖线 */
#sdv2Header .box_left_wrap { border-left-color: var(--sdv2-border) !important; }

/* 电源状态圆钮：改浅紫底 + 主色图标 */
#sdv2Header .powerimg {
  background-color: var(--sdv2-primary-soft) !important;
  box-shadow: 0 2px 10px rgba(176, 116, 209, .22) !important;
}
#sdv2Header .powerimg span,
#sdv2Header .powerimg i { color: var(--sdv2-primary) !important; }
#sdv2Header .powerimg .sprite { /* 若为雪碧图则保留图片本身 */
  color: inherit !important;
}

/* 操作按钮统一到主题主色 */
#sdv2Header .custom-button {
  background-color: var(--sdv2-primary) !important;
  border: 1px solid var(--sdv2-primary) !important;
  box-shadow: none !important;
  color: #fff !important;
}
#sdv2Header .custom-button:hover { filter: brightness(1.06); }

#sdv2Header .left_wrap_btn {
  background-color: var(--sdv2-surface) !important;
  color: var(--sdv2-primary) !important;
  border: 1px solid var(--sdv2-primary-line) !important;
  box-shadow: none !important;
}
#sdv2Header .left_wrap_btn:hover { background-color: var(--sdv2-primary-soft) !important; }

#sdv2Header .alarm { color: var(--sdv2-text-sub); }
#sdv2Header .dropdown-menu { border-color: var(--sdv2-border); }


/* ==========================================================================
   12 常用操作按钮宫格
   --------------------------------------------------------------------------
   ✅ 顺序约束已解除（批次四）：批次三时模板末尾的 remoteInfo 回调使用
      $('.service_module_button').eq(6) / .eq(7) **按索引**隐藏按钮，
      所以当时要求这些按钮的 DOM 顺序与数量必须与改造前完全一致。
      批次四已把那段改为按 data-func 精确选择（见 zjmfcloud.tpl 内 A1 注释），
      今后增删按钮或调整顺序都不会再隐藏错按钮，本节保留仅作历史说明。
      本宫格仍然只做「下拉菜单 → 宫格」的版式重排，
      onclick / data-func / data-type / data-desc 一字未改。
   ========================================================================== */
/* 说明：宫格容器用了 .col-12 才能换行，但 Bootstrap 的 .col-* 自带 15px 内边距，
   会让宫格比上方「名称 / 系统 / IP」信息块多缩进 15px。这里抵消掉，保证左对齐。 */
#sdv2Header .sdv2-op-wrap {
  margin-top: 14px;
  padding-left: 0;
  padding-right: 0;
}

.sdv2-op-inner {
  padding-top: 14px;
  border-top: 1px dashed var(--sdv2-border);
}

.sdv2-op-label {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--sdv2-text-mute);
}
.sdv2-op-label i {
  margin-right: 4px;
  font-size: 14px;
  color: var(--sdv2-primary);
  vertical-align: -2px;
}

/* 宫格：auto-fill + 1fr —— 宽屏自动排成一整行，窄屏自动折成两列，无需写断点 */
.sdv2-op-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
  gap: 8px;
}

.sdv2-op-btn {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  font-size: 13px;
  line-height: 38px;
  color: var(--sdv2-text);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--sdv2-surface);
  border: 1px solid var(--sdv2-border);
  border-radius: 10px;
  cursor: pointer;
  transition: color var(--sdv2-ease), background-color var(--sdv2-ease), border-color var(--sdv2-ease);
}
.sdv2-op-btn > i {
  margin-right: 6px;
  font-size: 15px;
  color: var(--sdv2-text-mute);
  vertical-align: -2px;
  transition: color var(--sdv2-ease);
}

.sdv2-op-btn:hover {
  color: var(--sdv2-primary);
  background: var(--sdv2-primary-soft);
  border-color: var(--sdv2-primary);
}
.sdv2-op-btn:hover > i { color: var(--sdv2-primary); }

.sdv2-op-btn:focus { outline: none; box-shadow: 0 0 0 3px var(--sdv2-primary-a18); }
.sdv2-op-btn:active { transform: translateY(1px); }

/* 关机 / 强制关机 / 重启 等破坏性操作：悬停转红，给用户一个「这一下要小心」的提示 */
.sdv2-op-danger:hover {
  color: var(--sdv2-danger);
  background: var(--sdv2-danger-soft);
  border-color: var(--sdv2-danger);
}
.sdv2-op-danger:hover > i { color: var(--sdv2-danger); }

/* 控制台 / VNC 用虚线边框区分（打开的是窗口，不改变实例状态） */
.sdv2-op-console { border-style: dashed; }


/* ==========================================================================
   06 左侧信息区 —— 拆成「服务器访问 / 流量使用 / 套餐信息」三张卡
   做法：模板里只插入了包裹层与标题，原有 DOM、条件渲染、事件绑定一律未动。
   ========================================================================== */
#sdv2Left > .card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#sdv2Left > .card > .card-body { padding: 0 !important; }
#sdv2Left .sdv2-side-card:last-child { margin-bottom: 0; }

.sdv2-side-card {
  margin-bottom: 16px;
  background: var(--sdv2-surface);
  border: 1px solid var(--sdv2-border);
  border-radius: var(--sdv2-radius);
  box-shadow: var(--sdv2-shadow);
  overflow: hidden;
}

.sdv2-side-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sdv2-text);
  background: var(--sdv2-bg-head);
  border-bottom: 1px solid var(--sdv2-border-soft);
}
.sdv2-side-card-head i {
  font-size: 17px;
  color: var(--sdv2-primary);
}

.sdv2-side-card-body { padding: 14px 16px; }

/* 卡片内部原本的灰色底块拉平，视觉上归属于外层卡片 */
#sdv2Left .sdv2-side-card-body .bg-gray,
#sdv2Left .sdv2-side-card-body .bg-light {
  background-color: transparent !important;
  box-shadow: none !important;
}
#sdv2Left .sdv2-side-card-body .card-body {
  padding: 0 !important;
  border-radius: 0 !important;
}
#sdv2Left .sdv2-side-card-body > .row {
  margin-left: 0;
  margin-right: 0;
}
#sdv2Left .sdv2-side-card-body > .row > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

/* 流量卡内部间距收紧（原为 mt-4 / mb-4，卡片里偏大） */
#sdv2Left .sdv2-card-traffic .mt-4 { margin-top: .5rem !important; }
#sdv2Left .sdv2-card-traffic .mb-4 { margin-bottom: .5rem !important; }
#sdv2Left .sdv2-card-traffic .mb-3 { margin-bottom: .75rem !important; }

/* 套餐卡：主价格与说明的排版微调 */
#sdv2Left .sdv2-card-plan .pre-money-box h3 { font-weight: 600; }
#sdv2Left .sdv2-card-plan section.text-gray p:last-child { margin-bottom: 0; }


/* ==========================================================================
   08 监控指标卡 —— 数量与顺序完全跟随 module_chart，不写死、不凑数
   ========================================================================== */
.sdv2-metric-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}
.sdv2-metric-row:empty { display: none; }

.sdv2-metric-card {
  display: flex;
  flex-direction: column;
  padding: 14px 16px 10px;
  background: var(--sdv2-surface);
  border: 1px solid var(--sdv2-border);
  border-radius: 12px;
  color: var(--sdv2-primary);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.sdv2-metric-card:hover {
  border-color: var(--sdv2-primary-line);
  box-shadow: var(--sdv2-shadow-hover);
}

.sdv2-metric-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.sdv2-metric-title {
  font-size: 13px;
  color: var(--sdv2-text-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sdv2-metric-val {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--sdv2-text);
  white-space: nowrap;
}
.sdv2-metric-val em {
  margin-left: 3px;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  color: var(--sdv2-text-mute);
}

.sdv2-metric-spark {
  width: 100%;
  height: 28px;
  margin: 8px 0 6px;
  color: var(--sdv2-primary);
  opacity: .85;
}

.sdv2-metric-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--sdv2-text-mute);
}


/* ==========================================================================
   09 全局侧边栏 —— 保守增强（不改 DOM，不影响结构）
   说明：侧边栏在 global.css 中已有较完整实现，这里只做三处正向微调。
   若需单独回滚本项，删除下面这小段即可，不影响 06/07/08。
   ========================================================================== */
/* ① 选中项字重加强，层级更清晰 */
.sidebar-nav-item.active { font-weight: 500; }
/* ② 悬停底色稍微加深，与主题紫保持一致 */
.sidebar-nav-item:hover { background: rgba(176, 116, 209, .07); }
/* ③ 滚动条更细，视觉更精致 */
.vertical-menu .simplebar-content-wrapper::-webkit-scrollbar { width: 4px; }


/* ==========================================================================
   13 空状态 / 加载态
   ========================================================================== */

/* 13-1 指标卡骨架屏：数据没回来时用「闪光条」占位，避免一片 -- 抖动 */
.sdv2-metric-card.is-loading .sdv2-metric-val,
.sdv2-metric-card.is-loading .sdv2-metric-peak,
.sdv2-metric-card.is-loading .sdv2-metric-avg {
  color: transparent;
  border-radius: 5px;
  background: linear-gradient(90deg, #eef1f7 25%, #f6f8fc 37%, #eef1f7 63%);
  background-size: 400% 100%;
  animation: sdv2Shimmer 1.4s ease infinite;
}
.sdv2-metric-card.is-loading .sdv2-metric-val { max-width: 108px; }
.sdv2-metric-card.is-loading .sdv2-metric-peak,
.sdv2-metric-card.is-loading .sdv2-metric-avg {
  display: inline-block;
  min-width: 66px;
  height: 12px;
}
.sdv2-metric-card.is-loading .sdv2-metric-spark { opacity: .3; }

@keyframes sdv2Shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* 13-2 指标卡空状态 */
.sdv2-metric-val.sdv2-metric-empty {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--sdv2-text-mute) !important;
}

/* 13-3 图表空状态：ECharts 在无数据时不画东西，这里盖一张「暂无数据」提示 */
.sdv2-chart-card { position: relative; }
.sdv2-chart-body { position: relative; }
.sdv2-chart-card.sdv2-is-empty .sdv2-chart-body::after {
  content: '暂无数据';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--sdv2-text-mute);
  background: rgba(255, 255, 255, .88);
  border-radius: var(--sdv2-radius-sm);
}

/* 13-4 尊重系统「减少动效」设置 */
@media (prefers-reduced-motion: reduce) {
  .sdv2-metric-card.is-loading .sdv2-metric-val,
  .sdv2-metric-card.is-loading .sdv2-metric-peak,
  .sdv2-metric-card.is-loading .sdv2-metric-avg {
    animation: none;
    background: var(--sdv2-border-soft);
  }
  .sdv2-op-btn,
  .sdv2-op-btn > i,
  .sdv2-metric-card { transition: none !important; }
}


/* ==========================================================================
   11 响应式断点（批次三集中整理）
   Bootstrap 4 栅格负责左右两栏（col-md-3 / col-md-9），这里只补它管不到的部分：
   指标卡列数、Header 内的信息块换行、操作宫格、卡片内距。
   ========================================================================== */
/* 大屏偏窄：指标卡 4 → 2 列（图表列数在 chart.tpl 内联样式里控制，见其 @media 1367px） */
@media screen and (max-width: 1367px) {
  .sdv2-metric-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 平板：Header 内的信息块由「一行排开」改为两列换行，去掉竖分隔线 */
@media screen and (max-width: 991.98px) {
  #sdv2Header.server_header_box { padding: 16px 16px 14px; }
  #sdv2Header .power_box { flex: 0 0 100%; margin-bottom: 10px; }
  #sdv2Header .box_left_wrap {
    flex: 0 0 calc(50% - 14px);
    padding-left: 0 !important;
    margin: 10px 14px 0 0 !important;
    border-left: 0 !important;
  }
  #sdv2Header .box_left_wrap h5 { font-size: 14px; word-break: break-all; }
  #sdv2Header .d-flex.justify-content-end { flex: 0 0 100%; }
}

/* 手机：指标卡 1 列；操作宫格 2 列；卡片内距收紧 */
@media screen and (max-width: 767.98px) {
  .sdv2-metric-row { gap: 10px; }
  .sdv2-op-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sdv2-side-card-body,
  .sdv2-side-card-head { padding-left: 13px; padding-right: 13px; }
}

@media screen and (max-width: 575px) {
  .sdv2-metric-row { grid-template-columns: 1fr; }
  .sdv2-metric-val { font-size: 22px; }
  .sdv2-metric-card { padding: 12px 13px 8px; }
  #sdv2Header .box_left_wrap { flex: 0 0 100%; margin-right: 0 !important; }
}


/* ==========================================================================
   14 流量进度条 —— 可见性修正（本批 bug 修复）
   --------------------------------------------------------------------------
   问题：百分比文案原先写在进度条「内部」（$('#totalProgress').text(..)）。
   Bootstrap 给 .progress-bar 设了 color:#fff，而 .progress 的轨道底色是 #f6f6f6，
   轨道又只有 0.625rem(10px) 高 —— 等于白字压白底，用量低时完全看不到，
   而且 10px 高的条里本来也塞不下一行文字。
   做法：文案挪到条外的 #totalProgressPct，并给轨道加内描边让它看得出是一条轨道。
   ========================================================================== */
/* 行内排布：进度条弹性占位 + 百分比 + 购买按钮，三者垂直居中 */
.sdv2-flow-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
/* 原进度条是固定 w-75（Bootstrap 工具类带 !important），
   改成弹性宽度，才腾得出位置给右侧百分比而不挤出卡片 */
.sdv2-flow-row > .progress {
  flex: 1 1 auto;
  width: auto !important;
  margin-bottom: 0;
}
.sdv2-flow-row > .btn { margin-left: 0 !important; }

#sdv2Left .sdv2-card-traffic .sdv2-flow-track {
  height: 8px;
  background-color: #eef1f7;
  box-shadow: inset 0 0 0 1px var(--sdv2-border-soft);
}

/* 关键：这枚百分比是深色文字，且带等宽数字，不会随进度条长度被裁掉 */
.sdv2-flow-pct {
  flex: 0 0 auto;
  min-width: 52px;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sdv2-text);
  text-align: right;
}
.sdv2-flow-pct.is-warn   { color: #cf7a00; }             /* 用量 ≥ 80% */
.sdv2-flow-pct.is-danger { color: var(--sdv2-danger); }  /* 用量 ≥ 100% */


/* ==========================================================================
   15 指标卡点击联动（本批 A5）
   --------------------------------------------------------------------------
   点击指标卡 → 高亮该卡 + 平滑滚动到下方对应图表 + 目标图表短暂描边。
   纯视觉反馈，不触发任何接口请求。
   ========================================================================== */
.sdv2-metric-card { cursor: pointer; }
.sdv2-metric-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sdv2-primary-a18);
}
.sdv2-metric-card.is-active {
  border-color: var(--sdv2-primary);
  box-shadow: var(--sdv2-shadow-hover);
}

/* 卡片右上角的「看图表」提示，平时隐藏，悬停/选中时淡入，避免平时太吵 */
.sdv2-metric-card .sdv2-metric-head::after {
  content: '\2198';
  font-size: 13px;
  line-height: 1;
  color: var(--sdv2-text-mute);
  opacity: 0;
  transition: opacity var(--sdv2-ease);
}
.sdv2-metric-card:hover .sdv2-metric-head::after { opacity: 1; }
.sdv2-metric-card.is-active .sdv2-metric-head::after {
  opacity: 1;
  color: var(--sdv2-primary);
}

/* 目标图表闪一下，把视线接过去 */
.chartbox .sdv2-chart-card { transition: border-color .25s ease, box-shadow .25s ease; }
.chartbox.sdv2-flash .sdv2-chart-card {
  border-color: var(--sdv2-primary);
  box-shadow: 0 0 0 3px var(--sdv2-primary-a18), var(--sdv2-shadow-hover);
}


/* ==========================================================================
   16 用量 tab（#dosage）日期栏 + 图表卡片（本批 A2）
   --------------------------------------------------------------------------
   原状：两个裸 date 输入框各套在 col-md-3 里、各占 25% 宽，中间只夹一个「至」，
         与上方主图表的工具栏完全不是一套视觉；而且接口回填的是 MM-DD 格式，
         <input type="date"> 判定非法 → 框里永远是空的。
   现改：统一成 .sdv2-dosage-bar 工具条，输入框的值由 JS 补全年份后写入。
   注：本节自带完整样式，**不依赖** includes/chart.tpl 的内联 <style>
      （module_chart 为空时该子模板不会被包含，那套 .sdv2-range-btn 就不存在）。
      同理快捷按钮刻意不复用 .sdv2-range-btn 这个类名：chart.tpl 对它有全局委托点击，
      而那个处理器会 $('.sdv2-range-btn').removeClass('active') ——
      一旦复用，点用量图的按钮就会把主图表工具栏的「最近24小时」高亮一并清掉。
   ========================================================================== */
.sdv2-dosage-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: var(--sdv2-surface);
  border: 1px solid var(--sdv2-border);
  border-radius: var(--sdv2-radius) var(--sdv2-radius) 0 0;
}
.sdv2-dosage-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sdv2-text);
}
.sdv2-dosage-title i { font-size: 16px; color: var(--sdv2-primary); }

.sdv2-dosage-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0;
}
.sdv2-dosage-label { font-size: 12px; color: var(--sdv2-text-mute); }
.sdv2-dosage-field .form-control {
  width: 158px;
  height: 34px;
  padding: 0 10px;
  font-size: 13px;
  color: var(--sdv2-text);
  background: var(--sdv2-surface);
  border: 1px solid var(--sdv2-border);
  border-radius: var(--sdv2-radius-sm);
}
.sdv2-dosage-field .form-control:focus {
  border-color: var(--sdv2-primary);
  box-shadow: 0 0 0 3px var(--sdv2-primary-a18);
}
.sdv2-dosage-bar .sdv2-sep { font-size: 12px; color: var(--sdv2-text-mute); }

.sdv2-dosage-quick {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}
.sdv2-dosage-quick .sdv2-days-btn {
  padding: 4px 11px;
  font-size: 12px;
  color: var(--sdv2-text-sub);
  background: var(--sdv2-surface);
  border: 1px solid var(--sdv2-border);
  border-radius: 999px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: color var(--sdv2-ease), background-color var(--sdv2-ease), border-color var(--sdv2-ease);
}
.sdv2-dosage-quick .sdv2-days-btn:hover {
  color: var(--sdv2-primary);
  border-color: var(--sdv2-primary-line);
  background: var(--sdv2-primary-soft);
}
.sdv2-dosage-quick .sdv2-days-btn.active {
  color: #fff;
  background: var(--sdv2-primary);
  border-color: var(--sdv2-primary);
}

.sdv2-dosage-card {
  padding: 8px;
  background: var(--sdv2-surface);
  border: 1px solid var(--sdv2-border);
  border-top: 0;
  border-radius: 0 0 var(--sdv2-radius) var(--sdv2-radius);
  box-shadow: var(--sdv2-shadow);
}
.sdv2-dosage-chart { width: 100%; }

@media screen and (max-width: 767.98px) {
  .sdv2-dosage-field { flex: 1 1 100%; }
  .sdv2-dosage-field .form-control { width: 100%; }
  .sdv2-dosage-quick { margin-left: 0; }
}

/* 本批新增动效同样尊重「减少动效」 */
@media (prefers-reduced-motion: reduce) {
  .sdv2-metric-card .sdv2-metric-head::after { transition: none; }
  .chartbox .sdv2-chart-card { transition: none; }
}