:root{
  --bg:#0b1220;
  --panel:#0f172a;
  --panel2:#111c33;
  --text:#e6edf7;
  --muted:#9fb0c6;
  --line:rgba(255,255,255,.08);
  --btn:#2563eb;
  --btn2:#334155;
  --danger:#ef4444;
  --ok:#22c55e;
  --warn:#f59e0b;
  --radius:14px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: linear-gradient(180deg, #070b14, #0b1220 40%);
  color:var(--text);
  font:14px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
}

.hidden{display:none !important}
.muted{color:var(--muted)}
.container{max-width:1400px;margin:18px auto;padding:0 14px}

.topbar{
  position:sticky;top:0;z-index:30;
  display:flex;gap:14px;align-items:center;justify-content:space-between;
  padding:14px;
  background: rgba(10,14,26,.85);
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(10px);
}

.brand{display:flex;gap:12px;align-items:center}
.logo{
  width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;
  background: rgba(37,99,235,.18);
  border:1px solid rgba(37,99,235,.35);
  font-weight:800;
}
.title h1{margin:0;font-size:16px}
.title p{margin:0;color:var(--muted);font-size:12px}

.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.operator{display:flex;gap:8px;align-items:center}

.input{
  background: rgba(255,255,255,.06);
  border:1px solid var(--line);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  outline:none;
  min-width:240px;
}
.input.small{min-width:160px}
.input:focus{border-color: rgba(37,99,235,.55)}

.btn{
  background: var(--btn);
  border:1px solid rgba(255,255,255,.12);
  color:white;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:600;
}
.btn.secondary{background: rgba(51,65,85,.65)}
.btn.danger{background: rgba(239,68,68,.9)}
.btn:disabled{opacity:.55;cursor:not-allowed}

.panel{
  background: rgba(15,23,42,.85);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.panel-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 14px;
  border-bottom:1px solid var(--line);
}
.panel-title{font-size:14px;font-weight:700}
.pill{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;padding:4px 10px;
  background: rgba(255,255,255,.06);
  border:1px solid var(--line);
  border-radius:999px;
  font-family:var(--mono);
}

.table-wrap{overflow:auto}
.table{
  width:100%;
  border-collapse:collapse;
  min-width:1100px;
}
.table th,.table td{
  border-bottom:1px solid var(--line);
  padding:10px 10px;
  vertical-align:top;
}
.table th{
  text-align:left;
  color:var(--muted);
  font-weight:700;
  background: rgba(255,255,255,.03);
  position:sticky;top:0;z-index:10;
}
.table td .cell{
  max-width:420px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.table td .mono{font-family:var(--mono)}
.table td.actions{
  white-space:nowrap;
}
.actionbar{display:flex;gap:8px;align-items:center}
.smallbtn{
  background: rgba(255,255,255,.06);
  border:1px solid var(--line);
  color:var(--text);
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
  font-weight:650;
}
.smallbtn.primary{background: rgba(37,99,235,.22); border-color: rgba(37,99,235,.4)}
.smallbtn.danger{background: rgba(239,68,68,.16); border-color: rgba(239,68,68,.35)}

.select, .edit{
  width:100%;
  background: rgba(255,255,255,.06);
  border:1px solid var(--line);
  color:var(--text);
  border-radius:10px;
  padding:8px 10px;
  outline:none;
}
textarea.edit{min-height:70px;resize:vertical}

.badge{
  display:inline-flex;align-items:center;
  padding:3px 8px;border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  font-weight:700;
  font-size:12px;
}

.empty{padding:24px;color:var(--muted);text-align:center}

/* 小屏卡片 */
.cards{display:none;padding:12px}
.card{
  border:1px solid var(--line);
  background: rgba(17,28,51,.65);
  border-radius:16px;
  padding:12px;
  margin:10px 0;
}
.card-hd{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.card-title{font-weight:800}
.card-sub{color:var(--muted);font-family:var(--mono);font-size:12px}
.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin-top:10px;
}
.kv{border:1px solid var(--line);border-radius:14px;padding:10px;background:rgba(255,255,255,.04)}
.k{color:var(--muted);font-size:12px}
.v{margin-top:4px;word-break:break-word}
.card-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}

/* 弹窗 */
.modal{position:fixed;inset:0;z-index:60}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.modal-dialog{
  position:relative;
  width:min(920px, calc(100% - 24px));
  margin:60px auto;
  background: rgba(15,23,42,.96);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.modal-hd{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 14px;
  border-bottom:1px solid var(--line);
}
.modal-title{font-weight:900}
.modal-sub{color:var(--muted);font-family:var(--mono);font-size:12px;margin-top:2px}
.iconbtn{
  width:34px;height:34px;border-radius:12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color:var(--text);
  font-size:18px;
  cursor:pointer;
}
.modal-bd{padding:14px;max-height:70vh;overflow:auto}
.history-item{
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  border-radius:16px;
  padding:12px;
  margin:10px 0;
}
.history-meta{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.history-meta .left{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.change{
  margin-top:10px;
  border-top:1px dashed rgba(255,255,255,.12);
  padding-top:10px;
}
.change-row{
  display:grid;
  grid-template-columns: 160px 1fr 1fr;
  gap:10px;
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.change-row:last-child{border-bottom:none}
.change-row .f{color:var(--muted);font-family:var(--mono);font-size:12px}
.change-row .b, .change-row .a{word-break:break-word}

@media (max-width: 980px){
  .table-wrap{display:none}
  .cards{display:block}
  .input{min-width:220px}
}
@media (max-width: 560px){
  .grid{grid-template-columns:1fr}
  .toolbar{justify-content:flex-start}
  .input{min-width:100%}
}

/* === 新表格布局：多行信息块 === */
.table{ min-width: 1100px; } /* 你可按实际再调 */

.station-block{display:flex;flex-direction:column;gap:8px}
.station-no{font-family:var(--mono);font-weight:900}
.station-pill{
  display:inline-flex;align-items:center;justify-content:center;
  width:max-content;
  padding:4px 10px;
  border-radius:999px;
  background: rgba(56,189,248,.18);           /* 天蓝 */
  border: 1px solid rgba(56,189,248,.35);
  color: #a7e6ff;
  font-weight:800;
  line-height:1.2;
}

.wrap-30{
  white-space: normal;
  word-break: break-word;
  line-height: 1.45;
}

.info-block{display:flex;flex-direction:column;gap:6px}
.info-line{white-space:normal; word-break:break-word; line-height:1.45}
.info-key{color:var(--muted)}
/* 长文本（原因/遗留）限制高度，避免一条把表格撑太高 */
.info-long{
  white-space: normal;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 4;      /* 最多显示4行，你可改 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.status-block{display:flex;flex-direction:column;gap:8px}
.status-block .badge{width:max-content}

.device-block{display:flex;flex-direction:column;gap:8px}
.device-line{white-space:normal;word-break:break-word}

.actions .actionbar{flex-wrap:wrap}

/* =========================
   表格对齐与自适应（新规则）
   ========================= */

/* 取消横向滚动条：让表格自己在容器内自适应 */
.table-wrap{
  overflow: visible;   /* 原先 overflow:auto 会产生横向滚动 */
}

/* 关键：固定布局 + 100% 宽度，列宽按 colgroup 百分比分配 */
table.main-table{
  width: 100%;
  min-width: 0 !important;     /* 覆盖你之前的 min-width */
  table-layout: fixed;         /* 防止内容把列撑爆 */
}

/* 表头全部居中 */
table.main-table thead th{
  text-align: center !important;
  vertical-align: middle;
}

/* 默认：除故障描述/故障信息外，其余列（含按钮列）水平+垂直居中 */
table.main-table td{
  text-align: center;
  vertical-align: middle;
}

/* 第2列“故障描述”、第3列“故障信息”：允许多行且不居中（更易读） */
table.main-table td:nth-child(2),
table.main-table td:nth-child(3){
  text-align: left;
  vertical-align: top;          /* 让多行从上开始排，不会显得“漂浮” */
}

/* 所有单元格允许换行，避免撑宽 */
table.main-table th,
table.main-table td{
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* colgroup 列宽：按比例自适应（你可微调） */
table.main-table col.c1{ width: 12%; }  /* 车站工单 */
table.main-table col.c2{ width: 22%; }  /* 故障描述 */
table.main-table col.c3{ width: 30%; }  /* 故障信息 */
table.main-table col.c4{ width: 10%; }  /* 跟进班次 */
table.main-table col.c5{ width: 10%; }  /* 处理状态 */
table.main-table col.c6{ width: 10%; }  /* 设备信息 */
table.main-table col.c7{ width: 6%; }   /* 按钮 */

/* 让按钮列在窄一点的情况下仍然好看 */
table.main-table td.actions .actionbar{
  justify-content: center;
}

/* 对不同宽度做进一步收敛，确保“无需横向滚动” */
@media (max-width: 1280px){
  table.main-table col.c2{ width: 24%; }
  table.main-table col.c3{ width: 32%; }
  table.main-table col.c7{ width: 8%; }
  .table th,.table td{ padding: 9px 8px; }
}

@media (max-width: 1100px){
  /* 你原本 <980px 会切到 cards；这里是过渡区，继续压缩表格 */
  .table th,.table td{ padding: 8px 6px; font-size: 13px; }
  table.main-table col.c1{ width: 14%; }
  table.main-table col.c2{ width: 26%; }
  table.main-table col.c3{ width: 34%; }
  table.main-table col.c7{ width: 10%; }
}


/* =========================
   视觉规整化：让表格看起来“正常”
   ========================= */

/* 表格整体更紧凑，行距更稳定 */
table.main-table th,
table.main-table td{
  padding: 12px 12px;
  line-height: 1.35;
}

/* 表头居中（你已要求） */
table.main-table thead th{
  text-align: center !important;
  vertical-align: middle;
}

/* 关键：所有列默认“顶部对齐”，避免大行高时其它列看起来漂浮 */
table.main-table td{
  vertical-align: top;      /* 比 vertical-align:middle 更正常 */
  text-align: center;       /* 除了 2、3 列外依然居中显示 */
}

/* 第2列“故障描述”、第3列“故障信息”：左对齐，顶部对齐 */
table.main-table td:nth-child(2),
table.main-table td:nth-child(3){
  text-align: left;
  vertical-align: top;
}

/* 第一列车站工单内容居中且紧凑 */
.station-block{
  align-items: center;     /* 让工单号与气泡都居中 */
  gap: 10px;
}
.station-no{font-size: 15px;}
.station-pill{font-size: 13px; padding: 5px 12px;}

/* 故障描述：最多显示3行，超出省略（更规整）；仍然允许换行 */
.desc-clamp{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;     /* 3行够用，想更短可改2 */
  overflow: hidden;
}
.wrap-30{line-height: 1.45;}

/* 故障信息：改为“键值网格”，视觉更整齐 */
.info-block{
  gap: 6px;                 /* 比之前更紧凑 */
  font-size: 13px;
}
.info-row{
  display: grid;
  grid-template-columns: 76px 1fr; /* 左侧键固定宽度 */
  gap: 10px;
  align-items: start;
}
.info-key{
  color: var(--muted);
  white-space: nowrap;
}
.info-val{
  word-break: break-word;
}

/* 原因/遗留原因：最多2行，避免把整行撑得太高 */
.info-long{
  -webkit-line-clamp: 2;     /* 之前是4行，太长会显乱 */
}

/* 跟进班次：禁止“白天/晚上”被拆行 */
.shift-cell{
  white-space: nowrap;
  font-family: var(--mono);
}

/* 处理状态：两行 badge 居中且间距一致 */
.status-block{
  align-items: center;
  gap: 10px;
}
.status-block .badge{width: max-content;}

/* 设备信息：三行统一左对齐，但整体仍居中（用 inline-block） */
.device-block{
  display: inline-block;
  text-align: left;
  line-height: 1.45;
  gap: 6px;
}

/* 按钮列：纵向排列，宽度一致，看起来不乱 */
table.main-table td.actions .actionbar{
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
table.main-table td.actions .smallbtn{
  width: 120px;             /* 统一按钮宽度 */
  text-align: center;
  margin: 0 auto;           /* 居中 */
}

/* 列宽微调：让“故障信息”不要过宽，把空间让给描述 */
table.main-table col.c1{ width: 12%; }
table.main-table col.c2{ width: 24%; }
table.main-table col.c3{ width: 28%; }
table.main-table col.c4{ width: 10%; }
table.main-table col.c5{ width: 10%; }
table.main-table col.c6{ width: 10%; }
table.main-table col.c7{ width: 6%; }