/* Transport & Barge Operations Web V1.0
   零依赖：无 CDN、无外部字体。配色沿用 family 蓝(#2E75B6)/橙(#ED7D31)。 */

:root{
  --blue:#2E75B6; --blue-d:#245c92; --blue-l:#eaf2fa;
  --orange:#ED7D31; --orange-d:#c9631f;
  --ink:#1f2933; --ink2:#52606d; --ink3:#7b8794;
  --line:#dfe4ea; --bg:#f4f6f9; --card:#ffffff;
  --ok:#2e9e5b; --warn:#d9822b; --bad:#c0392b;
  --r:8px; --sh:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.04);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink); background:var(--bg);
}
.hidden{display:none !important}
a{color:var(--blue);text-decoration:none}
h1,h2,h3,h4{margin:0 0 .5em;font-weight:600}

/* ---------- 登录 ---------- */
.login-wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#2E75B6,#1b4a75);padding:16px}
.login-card{width:100%;max-width:380px;background:#fff;border-radius:12px;padding:28px;
  box-shadow:0 12px 40px rgba(0,0,0,.25)}
.login-brand{display:flex;gap:14px;align-items:center;margin-bottom:22px}
.login-logo{width:52px;height:52px;border-radius:10px;background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;letter-spacing:1px}
.login-brand h1{font-size:16px;margin:0}
.login-brand p{margin:2px 0 0;color:var(--ink3);font-size:12px}
#loginForm label{display:block;margin-bottom:14px;font-size:12px;color:var(--ink2)}
#loginForm input{display:block;width:100%;margin-top:5px;padding:10px 12px;font-size:14px;
  border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--ink)}
#loginForm input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-l)}
.login-foot{margin-top:18px;text-align:center;font-size:11px;color:var(--ink3)}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 14px;border:1px solid var(--line);border-radius:var(--r);background:#fff;
  color:var(--ink);cursor:pointer;font-size:13px;line-height:1.2;white-space:nowrap}
.btn:hover{background:#f7f9fb}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.primary:hover{background:var(--blue-d)}
.btn.warn{background:var(--orange);border-color:var(--orange);color:#fff}
.btn.warn:hover{background:var(--orange-d)}
.btn.danger{background:#fff;border-color:#e3b4ae;color:var(--bad)}
.btn.danger:hover{background:#fdf2f1}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink2)}
.btn.ghost:hover{background:rgba(255,255,255,.14)}
.btn.sm{padding:5px 10px;font-size:12px}
.btn.block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.icon-btn{background:none;border:0;cursor:pointer;font-size:18px;color:inherit;padding:4px 8px;border-radius:6px}
.icon-btn:hover{background:rgba(0,0,0,.06)}

/* ---------- 顶栏 ---------- */
.topbar{position:fixed;top:0;left:0;right:0;height:52px;background:var(--blue);color:#fff;
  display:flex;align-items:center;gap:10px;padding:0 12px;z-index:40}
.topbar .brand{display:flex;align-items:center;gap:9px;min-width:0}
.topbar .logo{width:28px;height:28px;border-radius:6px;background:rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
.topbar .tname{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grow{flex:1}
.who{display:flex;flex-direction:column;align-items:flex-end;max-width:30vw;min-width:0}
.who b,.who span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.who b{font-size:13px}
.who span{font-size:11px;opacity:.85}

/* ---------- 侧栏 ---------- */
.rail{position:fixed;top:52px;bottom:0;left:0;width:196px;background:#fff;border-right:1px solid var(--line);
  padding:12px 0;overflow:auto;z-index:30;display:flex;flex-direction:column}
.rail nav{flex:1}
.rail a{display:block;padding:9px 16px;color:var(--ink2);font-size:13px;border-left:3px solid transparent}
.rail a:hover{background:#f7f9fb;color:var(--ink)}
.rail a.on{background:var(--blue-l);color:var(--blue-d);border-left-color:var(--blue);font-weight:600}
.rail .grp{padding:14px 16px 5px;font-size:11px;color:var(--ink3);letter-spacing:.06em}
.rail-foot{padding:12px 16px;border-top:1px solid var(--line);font-size:11px;color:var(--ink3)}
.rail-company{font-weight:600;color:var(--ink2)}
.rail-freeze{margin-top:6px;color:var(--warn)}

/* ---------- 主区 ---------- */
.main{margin-left:196px;padding:64px 18px 24px}
.view{max-width:1400px;margin:0 auto}
.page-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.page-head h2{font-size:18px;margin:0}
.page-head .sub{color:var(--ink3);font-size:12px}

/* ---------- 卡片 / 网格 ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);padding:14px;margin-bottom:14px}
.card h3{font-size:14px;margin:0 0 10px;display:flex;align-items:center;gap:8px}
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g6{grid-template-columns:repeat(6,minmax(0,1fr))}

/* ---------- KPI ---------- */
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;box-shadow:var(--sh)}
.kpi .lab{font-size:11px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .val{font-size:22px;font-weight:700;line-height:1.25;margin-top:2px}
.kpi .sub{font-size:11px;color:var(--ink3);margin-top:2px}
.kpi.blue{border-left:3px solid var(--blue)}
.kpi.orange{border-left:3px solid var(--orange)}
.kpi.green{border-left:3px solid var(--ok)}
.kpi.red{border-left:3px solid var(--bad)}

/* ---------- 表格 ---------- */
.tbl-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--sh)}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
th{background:#f7f9fb;font-weight:600;color:var(--ink2);font-size:12px;position:sticky;top:0}
tbody tr:hover{background:#fafbfd}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.wrap{white-space:normal;min-width:180px}
.empty{padding:28px;text-align:center;color:var(--ink3);font-size:13px}

/* ---------- 徽标 ---------- */
.tag{display:inline-block;padding:1px 8px;border-radius:10px;font-size:11px;
  background:#eef2f6;color:var(--ink2);border:1px solid var(--line)}
.tag.ok{background:#e7f5ec;color:#217a45;border-color:#c9e7d5}
.tag.warn{background:#fdf3e6;color:#a16207;border-color:#f4e0c2}
.tag.bad{background:#fdeceb;color:#a32b22;border-color:#f6d2ce}
.tag.info{background:var(--blue-l);color:var(--blue-d);border-color:#cfe0f0}

/* ---------- 表单 ---------- */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
.form-grid label{display:block;font-size:12px;color:var(--ink2)}
.form-grid input,.form-grid select,.form-grid textarea{
  display:block;width:100%;margin-top:4px;padding:7px 10px;font-size:13px;
  border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);font-family:inherit}
.form-grid textarea{min-height:62px;resize:vertical}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-l)}
.form-grid .full{grid-column:1/-1}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}
.filters label{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--ink3)}
.filters input,.filters select{padding:6px 9px;border:1px solid var(--line);border-radius:6px;font-size:13px;min-width:120px}

/* ---------- 弹窗 ---------- */
.modal{position:fixed;inset:0;background:rgba(16,24,40,.45);z-index:80;
  display:flex;align-items:center;justify-content:center;padding:16px}
.modal-box{background:#fff;border-radius:10px;width:100%;max-width:640px;max-height:88vh;
  display:flex;flex-direction:column;box-shadow:0 16px 48px rgba(0,0,0,.28)}
.modal-head{display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid var(--line)}
.modal-head h3{font-size:15px;margin:0}
.modal-body{padding:16px;overflow:auto;flex:1}
.modal-foot{padding:12px 16px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px}

/* ---------- 提示 ---------- */
.toast{position:fixed;right:16px;bottom:16px;z-index:90;background:#1f2933;color:#fff;
  padding:10px 16px;border-radius:8px;font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.25);max-width:70vw}
.toast.bad{background:var(--bad)}
.toast.ok{background:var(--ok)}
.err{color:var(--bad);font-size:12px;margin-top:8px;min-height:16px}

/* ---------- 时间线 / POD ---------- */
.timeline{list-style:none;margin:0;padding:0}
.timeline li{padding:6px 0 6px 14px;border-left:2px solid var(--line);position:relative;font-size:12px}
.timeline li:before{content:"";position:absolute;left:-5px;top:11px;width:8px;height:8px;
  border-radius:50%;background:var(--blue)}
.timeline li small{color:var(--ink3);margin-left:8px}

.bar{height:8px;border-radius:5px;background:#eef2f6;overflow:hidden}
.bar > i{display:block;height:100%;background:var(--blue)}
.bar > i.warn{background:var(--orange)}
.bar > i.bad{background:var(--bad)}

/* ---------- 移动端（司机 / 装卸）---------- */
@media (max-width:820px){
  .rail{transform:translateX(-100%);transition:transform .18s ease;box-shadow:0 0 24px rgba(0,0,0,.2)}
  .rail.open{transform:none}
  .main{margin-left:0;padding:60px 10px 20px}
  .g2,.g3,.g4,.g6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-grid{grid-template-columns:1fr}
  .topbar .tname{display:none}
  .who{max-width:42vw}
  th,td{font-size:12px;padding:7px 8px}
}