@charset "utf-8";
/**
 * 企盾后台 · 业务组件样式
 * 框架外观完全交给 layuiAdmin v2.7.1 官方主题（admin.css），
 * 这里只负责业务自定义块：统计卡 / 快捷入口 / 键值行 / 徽章 / 趋势条 / 表单页 / 移动端必要修正。
 */

body,button,input,select,textarea{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",
    "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",Arial,sans-serif;
}

:root{
  --qd-primary:#16baaa;
  --qd-primary-dark:#13a396;
  --qd-text:#2b3440;
  --qd-text-sub:#5f6b7a;
  --qd-muted:#8a94a6;
  --qd-line:#eef1f4;
  --qd-radius:2px;
  --qd-shadow:0 1px 2px rgba(0,0,0,.03);
}


/* ---------- 页面标题 ---------- */
.qd-page-title{
  font-size:16px;font-weight:500;color:#2b3440;line-height:1.4;
  margin:0 0 12px;padding-left:10px;position:relative;
}
.qd-page-title::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:14px;background:var(--qd-primary);border-radius:1px;
}
@media (max-width:768px){
  .qd-page-title{font-size:15px;margin-bottom:10px}
}

/* ---------- 表单页（纵向表单） ---------- */
.qd-form .layui-form-label{width:110px;padding:9px 14px 9px 0}
.qd-form .layui-input-block{margin-left:124px}
.qd-form .layui-input-block.qd-block-narrow{max-width:520px}
.qd-form .qd-form-footer{
  padding:18px 0 2px;
  border-top:1px solid var(--qd-line);
  margin-top:22px;
}
.qd-form .qd-form-footer .layui-btn + .layui-btn{margin-left:8px}

/* ---------- 工具栏 ---------- */
.qd-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.qd-toolbar .layui-btn{margin:0!important}
.qd-toolbar .qd-toolbar-tip{margin-left:4px;color:var(--qd-muted);font-size:12.5px;line-height:22px}

/* ---------- 提示条 ---------- */
.qd-tip{
  background:#f2f8ff;
  border:1px solid #dce9fb;
  color:#3d6ba8;
  padding:10px 14px;
  border-radius:var(--qd-radius);
  font-size:12.5px;
  line-height:1.9;
  margin:0 0 16px;
}
.qd-tip b{color:#2a5d9f}

/* ---------- 统计卡 ---------- */
.qd-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:15px;
  margin-bottom:15px;
}
.qd-stat{
  background:#fff;
  border:1px solid #eef1f4;
  border-radius:var(--qd-radius);
  padding:18px 20px;
  box-shadow:var(--qd-shadow);
  position:relative;
  overflow:hidden;
}
.qd-stat .k{color:var(--qd-muted);font-size:13px}
.qd-stat .v{font-size:26px;font-weight:600;color:var(--qd-text);margin:8px 0 4px;letter-spacing:-.5px;line-height:1.2}
.qd-stat .s{font-size:12px;color:#a3aebd}
.qd-stat.c2{border-left:2px solid #1e9fff}
.qd-stat.c3{border-left:2px solid #ffb800}
.qd-stat.c4{border-left:2px solid #a2358e}
.qd-stat.c1{border-left:2px solid var(--qd-primary)}

/* ---------- 快捷入口 ---------- */
.qd-quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px}
.qd-quick a{
  display:block;text-align:center;padding:16px 6px;border:1px solid #eef1f4;border-radius:var(--qd-radius);
  color:var(--qd-text-sub);transition:.2s;background:#fff;
}
.qd-quick a:hover{border-color:var(--qd-primary);color:var(--qd-primary);background:#f6fdfc}
.qd-quick a i{display:block;font-size:22px;margin-bottom:8px;color:var(--qd-primary)}
.qd-quick a span{font-size:13px}

/* ---------- 键值行 ---------- */
.qd-kv .qrow{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 0;border-bottom:1px dashed var(--qd-line);font-size:13px;color:var(--qd-text-sub);
}
.qd-kv .qrow:last-child{border-bottom:0}
.qd-kv .qrow b{color:var(--qd-text);font-weight:500}

/* ---------- 趋势条 ---------- */
.qd-trend{display:flex;align-items:flex-end;gap:6px;height:160px;padding:10px 2px 0}
.qd-trend .col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;height:100%}
.qd-trend .bar{width:100%;max-width:32px;border-radius:2px 2px 0 0;background:linear-gradient(180deg,#16baaa,#0f9a8c);min-height:3px;transition:.3s}
.qd-trend .bar.zero{background:#e9edf2}
.qd-trend .lb,.qd-trend .num{font-size:11px;color:#9aa6b6;white-space:nowrap}
.qd-trend .num{color:#5a6b82}

/* ---------- 徽章 ---------- */
.qd-badge{display:inline-block;padding:0 8px;border-radius:10px;font-size:12px;line-height:20px}
.qd-badge.on{background:#e8f7ee;color:#12a25a}
.qd-badge.off{background:#f2f4f7;color:#8a93a5}
.qd-badge.wait{background:#fff4e2;color:#c47d0a}
.qd-badge.err{background:#fdecec;color:#d64545}
.qd-mono{font-family:Consolas,Monaco,monospace}

/* ---------- 移动端：只做必要的可用性修正 ---------- */
@media (max-width:768px){
  /* 抽屉：收起状态彻底不留投影，展开时才投影 */
  body:not(.layadmin-side-spread-sm) .layui-layout-admin .layui-side,
  body:not(.layadmin-side-spread-sm) .layui-layout-admin .layui-logo{
    box-shadow:none!important;
  }
  body.layadmin-side-spread-sm .layui-layout-admin .layui-side{
    box-shadow:2px 0 12px rgba(0,0,0,.14);
  }

  /* 表格：横向滚动，不撑破页面 */
  .layui-table-body{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  .layui-table-main table{min-width:660px}
  /* 直接写在页面里的原生表格也让它在本卡片内横向滚动 */
  .layui-card-body{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* 趋势条：14 根柱子在窄屏改为容器内滚动 */
  /* 标签栏前后翻页箭头：手机上空间不够，隐藏 */
  .layadmin-tabs-control.layui-icon-prev,
  .layadmin-tabs-control.layui-icon-next{display:none}

  .qd-trend{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .qd-trend .col{min-width:24px;flex:1 0 auto}

  /* 业务表单页：标签在上、控件满宽 */
  .qd-form .layui-form-label{float:none;display:block;width:auto!important;text-align:left;padding:0 0 6px 0}
  .qd-form .layui-input-block{margin-left:0!important}
  .qd-form .layui-input-block.qd-block-narrow{max-width:100%}
  .qd-form .qd-form-footer .layui-btn{width:100%;margin:0 0 8px!important;height:40px;line-height:40px}
  .qd-form .qd-form-footer .layui-btn:last-child{margin-bottom:0!important}

  /* 统计卡：两列 */
  .qd-stats{grid-template-columns:repeat(2,1fr);gap:10px}
  .qd-stat{padding:14px}
  .qd-stat .v{font-size:22px}


  /* 卡片里按钮行后面的灰色说明文字：单独一行，避免拆字断行 */
  .layui-card-body > div > span[style*="color:#999"],
  .layui-card-body > div > span[style*="#999"]{
    display:block;width:100%;margin:8px 0 0!important;line-height:1.7;
    white-space:normal;word-break:break-word;
  }
  .qd-toolbar{gap:6px}
  .qd-toolbar .qd-toolbar-tip{width:100%;margin:0}

  .qd-trend{height:130px}
  .qd-trend .lb{font-size:9px;letter-spacing:-.2px}
  .qd-trend .col:nth-child(even) .lb{visibility:hidden}
}