/* 水务一体化运维平台 — 原型样式 */
:root{
  --brand:#1890FF; --brand-d:#096DD9; --cyan:#00D4FF;
  --navy:#0A1929; --navy2:#102A43;
  --ok:#52C41A; --warn:#FAAD14; --err:#FF4D4F; --purple:#722ED1; --orange:#FA8C16;
  --bg:#F5F7FA; --card:#FFFFFF; --line:#E5E7EB; --line2:#EEF1F5;
  --t1:#1F2937; --t2:#6B7280; --t3:#9AA4B2; --thead:#FAFBFC;
  --r:8px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:"PingFang SC","Source Han Sans SC","Microsoft YaHei",-apple-system,sans-serif;
  background:var(--bg); color:var(--t1); font-size:14px; line-height:1.5;
}
a{color:var(--brand); text-decoration:none}
.app{display:flex; min-height:100vh}

/* ===== 侧栏 ===== */
.sidebar{width:200px; background:var(--navy); color:#B0BEC5; flex-shrink:0; position:sticky; top:0; height:100vh; display:flex; flex-direction:column}
.sidebar .logo{height:60px; display:flex; align-items:center; gap:8px; padding:0 16px; color:#fff; font-weight:700; font-size:15px; border-bottom:1px solid rgba(255,255,255,.06)}
.sidebar .logo .drop{width:22px;height:22px;flex:none}
.menu{list-style:none; margin:0; padding:8px 0; overflow:auto}
.menu li a{display:flex; align-items:center; gap:10px; height:44px; padding:0 18px; color:#B0BEC5; font-size:14px; position:relative}
.menu li a .ico{width:16px;height:16px;flex:none;opacity:.85}
.menu li a:hover{color:#fff; background:rgba(255,255,255,.04)}
.menu li a.active{color:#fff; background:rgba(24,144,255,.16)}
.menu li a.active::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand)}

/* ===== 主区 ===== */
.main{flex:1; display:flex; flex-direction:column; min-width:0}
.topbar{height:56px; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:16px; padding:0 20px; position:sticky; top:0; z-index:20}
.topbar .crumb{color:var(--t2); font-size:14px}
.topbar .crumb b{color:var(--t1)}
.topbar .search{flex:1; max-width:360px}
.topbar .search input{width:100%; height:34px; border:1px solid var(--line); border-radius:6px; padding:0 12px; background:var(--bg); font-size:13px}
.topbar .right{margin-left:auto; display:flex; align-items:center; gap:16px; color:var(--t2)}
.topbar .bell{position:relative; cursor:pointer}
.topbar .bell .dot{position:absolute;top:-6px;right:-8px;background:var(--err);color:#fff;font-size:11px;border-radius:10px;padding:0 5px;line-height:16px;height:16px}
.topbar .user{display:flex;align-items:center;gap:8px;color:var(--t1);cursor:pointer}
.avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#1890FF,#096DD9);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px}

.content{padding:16px 20px; flex:1}

/* ===== 卡片 ===== */
.card{background:var(--card); border-radius:var(--r); box-shadow:0 1px 3px rgba(0,0,0,.04); border:1px solid var(--line2)}
.card+.card{margin-top:12px}
.grid2>.card+.card,.grid3>.card+.card,.grid4>.card+.card,.grid5>.card+.card{margin-top:0}
.card .hd{padding:14px 16px; border-bottom:1px solid var(--line2); display:flex; align-items:center; gap:12px}
.card .hd h3{margin:0;font-size:15px}
.card .hd .more{margin-left:auto}
.card .bd{padding:16px}
.row{display:flex; gap:12px}
.row>*{flex:1; min-width:0}

/* ===== 工具栏/筛选 ===== */
.toolbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 16px}
.toolbar .sp{flex:1}
.field{display:inline-flex; align-items:center; gap:6px}
.field>label{color:var(--t2); font-size:13px}
select,input[type=text],input[type=date]{height:32px; border:1px solid var(--line); border-radius:4px; padding:0 10px; font-size:13px; background:#fff; color:var(--t1)}
.btn{height:32px; padding:0 14px; border-radius:4px; border:1px solid var(--line); background:#fff; color:var(--t1); cursor:pointer; font-size:13px; display:inline-flex; align-items:center; gap:6px}
.btn:hover{border-color:var(--brand); color:var(--brand)}
.btn.pri{background:var(--brand); border-color:var(--brand); color:#fff}
.btn.pri:hover{background:var(--brand-d); color:#fff}
.btn.danger{color:var(--err); border:none; background:none; padding:0 6px}
.btn.link{border:none;background:none;color:var(--brand);padding:0 6px}

/* ===== Tab ===== */
.tabs{display:flex; gap:4px; padding:0 16px; border-bottom:1px solid var(--line2)}
.tabs a{padding:14px 14px; color:var(--t2); position:relative; font-size:14px}
.tabs a .cnt{color:var(--t3); font-size:12px}
.tabs a.active{color:var(--brand); font-weight:600}
.tabs a.active::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--brand)}
.tabs a.active .cnt{color:var(--brand)}

/* ===== 表格 ===== */
table.tbl{width:100%; border-collapse:collapse; font-size:13px}
table.tbl th{background:var(--thead); color:var(--t2); font-weight:500; text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); white-space:nowrap}
table.tbl td{padding:12px; border-bottom:1px solid var(--line2); vertical-align:middle}
table.tbl tbody tr:hover{background:#F0F7FF}
table.tbl tr.danger{background:#FFF1F0}
table.tbl tr.danger:hover{background:#ffe6e3}
.tbl .id{color:var(--t2); font-variant-numeric:tabular-nums}
.tbl .urgent{box-shadow:inset 3px 0 0 var(--err)}

/* ===== 徽章/标签 ===== */
.badge{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:4px;font-size:12px;line-height:22px;white-space:nowrap;border:1px solid}
.b-gray{background:#fafafa;border-color:#d9d9d9;color:#595959}
.b-blue{background:#e6f4ff;border-color:#91caff;color:#1677ff}
.b-green{background:#f6ffed;border-color:#b7eb8f;color:#389e0d}
.b-red{background:#fff1f0;border-color:#ffccc7;color:#cf1322}
.b-orange{background:#fff7e6;border-color:#ffd591;color:#d46b08}
.b-purple{background:#f9f0ff;border-color:#d3adf7;color:#531dab}
.tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:12px;border:1px solid;line-height:18px}
.t-red{background:#fff1f0;border-color:#ffccc7;color:#cf1322}
.t-orange{background:#fff7e6;border-color:#ffd591;color:#d46b08}
.t-blue{background:#e6f4ff;border-color:#91caff;color:#0958d9}
.t-gray{background:#fafafa;border-color:#d9d9d9;color:#595959}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
.d-g{background:var(--ok)}.d-y{background:var(--warn)}.d-r{background:var(--err)}.d-gray{background:#C0C4CC}

/* ===== 进度条 ===== */
.prog{height:6px;background:#F0F0F0;border-radius:3px;overflow:hidden;min-width:90px}
.prog>i{display:block;height:100%;border-radius:3px;background:var(--brand)}
.prog.g>i{background:var(--ok)} .prog.r>i{background:var(--err)} .prog.o>i{background:var(--orange)} .prog.gray>i{background:#BFBFBF}

/* ===== 统计卡 ===== */
.stat{display:flex;flex-direction:column;gap:4px;padding:16px}
.stat .lab{color:var(--t2);font-size:13px}
.stat .num{font-size:30px;font-weight:700;font-variant-numeric:tabular-nums}
.stat .sub{font-size:12px;color:var(--t3)}
.up{color:var(--ok)} .down{color:var(--err)}
.sttopbar{height:3px;border-radius:3px 3px 0 0}

/* ===== 分页/底部 ===== */
.tfoot{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line2);font-size:13px;color:var(--t2)}
.tfoot .sp{flex:1}
.pager a{display:inline-block;min-width:28px;height:28px;line-height:26px;text-align:center;border:1px solid var(--line);border-radius:4px;margin:0 2px;color:var(--t1)}
.pager a.on{background:var(--brand);border-color:var(--brand);color:#fff}

/* ===== 抽屉 ===== */
.mask{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:50;display:none}
.mask.open{display:block}
.drawer{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:92vw;background:#fff;z-index:60;transform:translateX(100%);transition:.25s;display:flex;flex-direction:column}
.drawer.open{transform:none}
.drawer .dh{height:56px;display:flex;align-items:center;gap:10px;padding:0 16px;border-bottom:1px solid var(--line)}
.drawer .dh .x{margin-left:auto;cursor:pointer;color:var(--t2);font-size:18px}
.drawer .db{padding:16px;overflow:auto;flex:1}
.modal{position:fixed;z-index:60;left:50%;top:50%;transform:translate(-50%,-50%) scale(.96);opacity:0;transition:.2s;width:640px;max-width:92vw;background:#fff;border-radius:8px;pointer-events:none}
.modal.open{opacity:1;transform:translate(-50%,-50%);pointer-events:auto}
.modal .dh{height:52px;display:flex;align-items:center;padding:0 16px;border-bottom:1px solid var(--line);font-weight:600}
.modal .dh .x{margin-left:auto;cursor:pointer;color:var(--t2)}
.modal .db{padding:16px}
.modal .df,.drawer .df{padding:12px 16px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px}

/* desc list */
.dl{display:grid;grid-template-columns:96px 1fr;gap:8px 12px;font-size:13px}
.dl dt{color:var(--t2)} .dl dd{margin:0;color:var(--t1)}
.tline{position:relative;padding-left:18px}
.tline .it{position:relative;padding:0 0 14px 0}
.tline .it::before{content:"";position:absolute;left:-13px;top:4px;width:8px;height:8px;border-radius:50%;background:var(--brand)}
.tline .it::after{content:"";position:absolute;left:-10px;top:12px;bottom:0;width:1px;background:var(--line)}
.tline .it .tm{color:var(--t3);font-size:12px}

/* tree */
.tree{font-size:13px}
.tree .grp{padding:8px 6px;color:var(--t1);cursor:pointer}
.tree .leaf{padding:7px 6px 7px 22px;display:flex;align-items:center;gap:6px;border-radius:4px;cursor:pointer}
.tree .leaf:hover{background:#F0F7FF}
.tree .leaf.on{background:#E6F4FF;color:var(--brand)}

.mini{height:36px}
.muted{color:var(--t2)} .small{font-size:12px} .nowrap{white-space:nowrap}
.req{color:var(--err)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:1100px){.grid5{grid-template-columns:repeat(3,1fr)}.row{flex-direction:column}.row>*{flex:1 1 auto}}
@media(max-width:900px){.grid5{grid-template-columns:repeat(2,1fr)}.grid4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid5,.grid4,.grid3{grid-template-columns:1fr}}