/* ===== TMS demo — Element-Plus style admin shell ===== */
:root{
  --primary:#409EFF; --primary-dark:#337ECC; --primary-light:#ECF5FF;
  --success:#67C23A; --warning:#E6A23C; --danger:#F56C6C; --info:#909399;
  --sidebar:#304156; --sidebar-sub:#1F2D3D; --sidebar-text:#BFCBD9; --sidebar-hover:#263445;
  --text:#303133; --text-2:#606266; --text-3:#909399; --text-4:#C0C4CC;
  --border:#DCDFE6; --border-light:#EBEEF5; --border-lighter:#F2F6FC;
  --bg:#FAFCFF; --head:#F5F7FA;
  --radius:4px;
  --shadow-dialog:0 12px 32px rgba(0,0,0,.12);
  --font:"Alibaba PuHuiTi 2.0","Helvetica Neue",Helvetica,"PingFang SC","Microsoft YaHei",Arial,sans-serif;
}
*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{font-family:var(--font);font-size:13px;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;}
button{font-family:inherit;}
a{text-decoration:none;color:inherit;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:#C8CDD4;border-radius:4px;}
::-webkit-scrollbar-track{background:transparent;}

/* ---------- Login ---------- */
.login-wrap{height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#dbeafe 0%,#eaf3ff 38%,#f5f9ff 70%,#ffffff 100%);}
.login-wrap .bg-shape{position:absolute;border-radius:50%;filter:blur(2px);opacity:.5;}
.login-bg-art{position:absolute;left:4vw;top:50%;transform:translateY(-50%);width:42vw;max-width:560px;height:66vh;pointer-events:none;}
.login-brand{position:absolute;top:26px;left:36px;display:flex;align-items:center;gap:9px;z-index:3;}
.login-brand .txt{font-size:21px;font-weight:700;letter-spacing:.3px;color:#2b3a55;}
.login-card{position:relative;z-index:2;margin-left:26vw;width:404px;background:#fff;border-radius:10px;padding:52px 56px 46px;
  box-shadow:0 18px 48px rgba(64,120,220,.14);}
.login-card h2{margin:0 0 34px;font-size:20px;font-weight:600;text-align:center;color:var(--primary);letter-spacing:.4px;}
.login-field{position:relative;margin-bottom:20px;}
.login-field .ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:#C0C4CC;display:flex;}
.login-field input{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius);padding:0 12px 0 34px;
  font-size:13px;color:var(--text);outline:none;transition:border-color .2s;}
.login-field input::placeholder{color:#C0C4CC;}
.login-field input:focus{border-color:var(--primary);}
.login-field.has-extra input{padding-right:112px;}
.captcha-box{position:absolute;right:6px;top:5px;height:30px;width:100px;cursor:pointer;border-radius:2px;overflow:hidden;border:1px solid var(--border);}
.captcha-box canvas{display:block;width:100%;height:100%;}
.remember{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2);margin:2px 0 24px;cursor:pointer;user-select:none;}
.remember .box{width:14px;height:14px;border:1px solid var(--border);border-radius:2px;display:inline-flex;align-items:center;justify-content:center;background:#fff;}
.remember.on .box{background:var(--primary);border-color:var(--primary);}
.login-btn{width:100%;height:40px;border:none;border-radius:var(--radius);background:var(--primary);color:#fff;font-size:14px;
  cursor:pointer;letter-spacing:.5px;transition:background .2s;}
.login-btn:hover{background:#66b1ff;}
.login-btn:disabled{background:#a0cfff;cursor:not-allowed;}
.login-err{color:var(--danger);font-size:12px;height:16px;margin-top:-8px;margin-bottom:8px;text-align:left;}
.login-tip{position:absolute;left:0;right:0;bottom:18px;text-align:center;font-size:12px;color:#b7c0cd;z-index:2;}
.login-hint{position:absolute;right:24px;bottom:18px;font-size:12px;color:#93a2b8;z-index:3;background:rgba(255,255,255,.72);
  border:1px solid #e2eaf6;border-radius:20px;padding:6px 14px;}

/* ---------- Shell ---------- */
.shell{display:flex;height:100vh;overflow:hidden;}
.sidebar{width:210px;flex:0 0 210px;background:var(--sidebar);display:flex;flex-direction:column;transition:width .28s,flex-basis .28s;overflow:hidden;}
.shell.collapsed .sidebar{width:64px;flex-basis:64px;}
.side-logo{height:50px;display:flex;align-items:center;gap:9px;padding:0 16px;flex:0 0 50px;color:#fff;}
.side-logo .name{font-size:16px;font-weight:700;letter-spacing:.5px;white-space:nowrap;}
.shell.collapsed .side-logo .name{display:none;}
.menu{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:20px;}
.menu::-webkit-scrollbar{width:5px;}
.menu-item{display:flex;align-items:center;gap:10px;height:50px;padding:0 18px;color:var(--sidebar-text);cursor:pointer;
  font-size:13.5px;white-space:nowrap;position:relative;transition:background .2s;}
.menu-item:hover{background:var(--sidebar-hover);}
.menu-item .ic{width:16px;display:flex;justify-content:center;flex:0 0 16px;opacity:.85;}
.menu-item .label{flex:1;overflow:hidden;text-overflow:ellipsis;}
.menu-item .arrow{transition:transform .25s;display:flex;opacity:.7;}
.menu-group.open > .menu-item .arrow{transform:rotate(90deg);}
.menu-item.active-top{color:#fff;}
.submenu{display:none;background:var(--sidebar-sub);}
.menu-group.open .submenu{display:block;}
.submenu .menu-item{height:46px;padding-left:48px;font-size:13px;color:#BFCBD9;}
.submenu .menu-item.active{color:var(--primary);background:#1a2733;}
.submenu .menu-item.active::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--primary);}
.shell.collapsed .menu-item .label,.shell.collapsed .menu-item .arrow{display:none;}
.shell.collapsed .submenu{display:none!important;}
.sidebar-foot{display:none;}

.main{flex:1;display:flex;flex-direction:column;min-width:0;}
.topbar{height:50px;flex:0 0 50px;background:#fff;display:flex;align-items:center;gap:14px;padding:0 16px;box-shadow:0 1px 4px rgba(0,21,41,.06);z-index:20;}
.hamburger{width:24px;height:24px;display:flex;flex-direction:column;justify-content:center;gap:4px;cursor:pointer;}
.hamburger i{display:block;height:2px;background:#5a6b81;border-radius:2px;transition:.2s;}
.hamburger i:nth-child(1){width:18px;}
.hamburger i:nth-child(2){width:14px;}
.hamburger i:nth-child(3){width:18px;}
.crumb{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--text-3);flex:1;}
.crumb b{font-weight:400;color:var(--text-3);}
.crumb .cur{color:var(--text-2);}
.top-actions{display:flex;align-items:center;gap:18px;color:#6a7b90;}
.top-actions .tbtn{cursor:pointer;display:flex;opacity:.85;}
.top-actions .tbtn:hover{opacity:1;color:var(--primary);}
.avatar{width:26px;height:26px;border-radius:50%;background:linear-gradient(140deg,#4a8ff0,#1d6fd8);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer;border:2px solid #e8f1ff;}
.content{flex:1;overflow:auto;padding:14px 16px 18px;}

/* ---------- Panels / cards ---------- */
.panel{background:#fff;border-radius:var(--radius);box-shadow:0 0 1px rgba(0,0,0,.1),0 1px 4px rgba(0,21,41,.05);margin-bottom:14px;}
.panel-hd{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--border-lighter);}
.panel-hd h3{margin:0;font-size:14px;font-weight:600;color:var(--text);}
.panel-bd{padding:16px;}
.panel-bd.tight{padding:10px 16px 16px;}

/* ---------- Buttons ---------- */
.btn{height:32px;padding:0 15px;border-radius:var(--radius);border:1px solid var(--border);background:#fff;color:var(--text-2);
  font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .2s;white-space:nowrap;}
.btn:hover{color:var(--primary);border-color:#c6e2ff;background:var(--primary-light);}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff;}
.btn.primary:hover{background:#66b1ff;border-color:#66b1ff;color:#fff;}
.btn.plain-primary{color:var(--primary);border-color:#b3d8ff;background:#ecf5ff;}
.btn.plain-primary:hover{background:var(--primary);color:#fff;border-color:var(--primary);}
.btn.plain-success{color:var(--success);border-color:#b3e19d;background:#f0f9eb;}
.btn.plain-success:hover{background:var(--success);color:#fff;}
.btn.plain-danger{color:var(--danger);border-color:#fbc4c4;background:#fef0f0;}
.btn.plain-danger:hover{background:var(--danger);color:#fff;}
.btn.plain-warning{color:#b88230;border-color:#f5dab1;background:#fdf6ec;}
.btn.plain-warning:hover{background:var(--warning);color:#fff;border-color:var(--warning);}
.btn.sm{height:28px;padding:0 11px;font-size:12px;}
.btn-icon{background:none;border:none;color:var(--primary);cursor:pointer;font-size:12.5px;display:inline-flex;align-items:center;gap:3px;padding:0 6px;}
.btn-icon:hover{opacity:.75;}
.btn-icon.danger{color:var(--danger);}
.btn-icon.success{color:var(--success);}
.btn-icon.muted{color:var(--text-3);}

/* ---------- Form controls ---------- */
.searchbar{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;}
.field{display:flex;align-items:center;gap:8px;}
.field > label{font-size:13px;color:var(--text-2);white-space:nowrap;}
.inp,.sel{height:32px;border:1px solid var(--border);border-radius:var(--radius);padding:0 10px;font-size:13px;color:var(--text);
  outline:none;background:#fff;transition:border-color .2s;font-family:inherit;min-width:150px;}
.inp::placeholder{color:#C0C4CC;}
.inp:focus,.sel:focus{border-color:var(--primary);}
.sel{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4.5L6 8.5L10 4.5' stroke='%23C0C4CC' stroke-width='1.4' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 9px center;padding-right:26px;color:var(--text-2);}
.sel.placeholder{color:#C0C4CC;}
.range{display:flex;align-items:center;gap:5px;height:32px;border:1px solid var(--border);border-radius:var(--radius);padding:0 8px;min-width:196px;color:#C0C4CC;}
.range input{border:none;outline:none;font-size:12.5px;color:var(--text-2);width:74px;font-family:inherit;background:transparent;}
.range input::placeholder{color:#C0C4CC;}
.range .sep{color:var(--text-4);font-size:12px;}
.toolbar{display:flex;align-items:center;gap:10px;margin:14px 0 10px;}
.toolbar .spacer{flex:1;}
.cascade{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-2);cursor:pointer;user-select:none;}
.cascade .box{width:14px;height:14px;border:1px solid var(--border);border-radius:2px;background:#fff;display:flex;align-items:center;justify-content:center;}
.cascade.on .box{background:var(--primary);border-color:var(--primary);}

/* ---------- Table ---------- */
.tbl-wrap{overflow:auto;border-top:1px solid var(--border-light);}
table.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px;min-width:100%;}
table.tbl thead th{background:var(--head);color:var(--text-2);font-weight:600;text-align:left;padding:10px 10px;
  border-bottom:1px solid var(--border-light);white-space:normal;position:sticky;top:0;z-index:2;font-size:12px;line-height:1.3;}
table.tbl tbody td{padding:10px 10px;border-bottom:1px solid var(--border-lighter);color:var(--text-2);vertical-align:middle;white-space:nowrap;font-size:12.5px;line-height:1.45;}
table.tbl tbody tr:hover td{background:#F5F7FA;}
table.tbl tbody tr:last-child td{border-bottom:none;}
table.tbl .center{text-align:center;}
table.tbl .ops{white-space:nowrap;}
.cell-strong{color:var(--text);}
.empty{text-align:center;color:var(--text-3);padding:46px 0;font-size:13px;}
.empty svg{display:block;margin:0 auto 10px;opacity:.5;}
.tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;font-size:11.5px;border-radius:2px;line-height:1;
  background:#f4f4f5;color:#909399;border:1px solid #e9e9eb;}
.tag.blue{background:#ecf5ff;color:#409EFF;border-color:#d9ecff;}
.tag.green{background:#f0f9eb;color:#67C23A;border-color:#e1f3d8;}
.tag.red{background:#fef0f0;color:#F56C6C;border-color:#fde2e2;}
.tag.orange{background:#fdf6ec;color:#E6A23C;border-color:#faecd8;}
.linkbtn{color:var(--primary);cursor:pointer;font-size:12.5px;display:inline-flex;align-items:center;gap:3px;}
.linkbtn:hover{text-decoration:underline;}

/* ---------- Pagination ---------- */
.pager{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 16px;font-size:12.5px;color:var(--text-2);}
.pager .total{color:var(--text-2);margin-right:4px;}
.pg{min-width:26px;height:26px;border-radius:2px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-2);padding:0 5px;background:#F4F4F5;}
.pg:hover{color:var(--primary);}
.pg.active{background:var(--primary);color:#fff;}
.pg.disabled{color:var(--text-4);cursor:not-allowed;background:transparent;}
.pg.jump{background:#fff;border:1px solid var(--border);height:28px;width:42px;text-align:center;font-size:12.5px;outline:none;color:var(--text-2);}
.page-size{height:28px;border:1px solid var(--border);border-radius:2px;font-size:12.5px;color:var(--text-2);padding:0 6px;background:#fff;outline:none;}

/* ---------- Dashboard ---------- */
.orgbar{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#fff;border-radius:var(--radius);
  box-shadow:0 0 1px rgba(0,0,0,.1),0 1px 4px rgba(0,21,41,.05);margin-bottom:14px;}
.orgbar label{font-size:13px;font-weight:600;color:var(--text);}
.orgbar .sel{min-width:190px;}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.kpi{display:flex;align-items:center;gap:14px;padding:16px;border-radius:4px;background:#fff;border:1px solid #f0f3f7;}
.kpi .ic{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:0 0 44px;}
.kpi .num{font-size:24px;font-weight:700;color:#1f2a37;line-height:1.15;}
.kpi .lbl{font-size:12.5px;color:var(--text-3);margin-top:3px;}
.ic-green{background:#e8f7ef;color:#2f9e63;}
.ic-blue{background:#e6f2fd;color:#3d8ee0;}
.ic-sky{background:#e8f6fe;color:#3aa7d8;}
.ic-orange{background:#fdeee4;color:#e8842c;}
.ic-amber{background:#fdf3e0;color:#dfa02b;}
.tabs{display:flex;align-items:center;gap:18px;}
.tab{font-size:13px;color:var(--text-2);cursor:pointer;padding:2px 0;position:relative;}
.tab.active{color:var(--primary);}
.tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--primary);border-radius:1px;}

/* ---------- Detail page ---------- */
.detail-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 14px;border-bottom:1px solid var(--border-lighter);}
.detail-head h2{margin:0;font-size:17px;font-weight:600;color:#1f2a37;}
.detail-head .x{cursor:pointer;color:#8a95a5;font-size:18px;line-height:1;}
.kv{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--border-lighter);}
.kv .row{display:flex;border-bottom:1px solid var(--border-lighter);}
.kv .k{width:44%;background:#F7F9FC;color:var(--text-2);padding:11px 14px;font-size:12.5px;border-right:1px solid var(--border-lighter);}
.kv .v{flex:1;padding:11px 14px;color:var(--text);font-size:12.5px;word-break:break-all;}
.kv .v.muted{color:var(--text-4);}
.subtabs{display:flex;gap:6px;border-bottom:1px solid var(--border-light);padding:0 16px;}
.subtab{padding:12px 14px;font-size:13px;color:var(--text-2);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;}
.subtab.active{color:var(--primary);border-color:var(--primary);}

/* ---------- Drawer / dialog ---------- */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.28);z-index:100;display:flex;justify-content:flex-end;animation:fade .18s;}
.overlay.center{align-items:center;justify-content:center;}
@keyframes fade{from{opacity:0}to{opacity:1}}
.drawer{width:640px;max-width:96vw;height:100%;background:#fff;display:flex;flex-direction:column;box-shadow:var(--shadow-dialog);
  animation:slidein .22s ease-out;}
@keyframes slidein{from{transform:translateX(30px);opacity:.6}to{transform:translateX(0);opacity:1}}
.drawer-hd{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid var(--border-lighter);}
.drawer-hd h3{margin:0;font-size:17px;font-weight:600;color:#1f2a37;}
.drawer-bd{flex:1;overflow:auto;padding:18px 20px;background:var(--bg);}
.drawer-ft{padding:12px 20px;border-top:1px solid var(--border-lighter);display:flex;justify-content:center;gap:10px;background:#fff;}
.steps{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--border-lighter);border-radius:4px;padding:14px 18px;margin-bottom:16px;}
.steps .st{display:flex;align-items:center;gap:8px;color:var(--text-2);font-size:13.5px;}
.steps .st.active{color:var(--text);font-weight:500;}
.steps .st .n{width:20px;height:20px;border-radius:50%;background:#f0f2f5;color:#909399;display:flex;align-items:center;justify-content:center;font-size:11px;}
.steps .st.active .n{background:var(--primary);color:#fff;}
.steps .arrow{color:var(--text-4);}
.form-card{background:#fff;border:1px solid var(--border-lighter);border-radius:4px;padding:18px 20px;}
.form-row{margin-bottom:18px;}
.form-row label{display:block;font-size:12.5px;color:var(--text-2);margin-bottom:7px;}
.form-row label .req{color:var(--danger);margin-right:3px;}
.form-row .inp,.form-row .sel{width:100%;}
.dialog{width:520px;max-width:94vw;background:#fff;border-radius:6px;box-shadow:var(--shadow-dialog);animation:pop .16s ease-out;overflow:hidden;}
@keyframes pop{from{transform:scale(.97);opacity:.7}to{transform:scale(1);opacity:1}}
.dialog-hd{padding:18px 20px 10px;font-size:16px;font-weight:600;color:#1f2a37;display:flex;justify-content:space-between;align-items:center;}
.dialog-bd{padding:6px 20px 18px;max-height:60vh;overflow:auto;}
.dialog-ft{padding:12px 20px 18px;display:flex;justify-content:flex-end;gap:10px;}
.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);background:#f0f9eb;border:1px solid #e1f3d8;color:#67C23A;
  padding:10px 18px;border-radius:4px;font-size:13px;z-index:300;box-shadow:0 4px 14px rgba(0,0,0,.08);animation:fade .2s;}
.toast.err{background:#fef0f0;border-color:#fde2e2;color:#F56C6C;}
.toast.info{background:#edf2fc;border-color:#e9eaf1;color:#909399;}

table.tbl.fixed{table-layout:fixed;}
table.tbl td.wrap{white-space:normal;word-break:break-all;min-width:104px;max-width:124px;}


table.tbl th.pin,table.tbl td.pin{position:sticky;right:0;z-index:3;background:#fff;box-shadow:-8px 0 8px -8px rgba(0,0,0,.18);}
table.tbl thead th.pin{background:var(--head);z-index:4;}
table.tbl tbody tr:hover td.pin{background:#F5F7FA;}