/* operations-dense.css - 密集行/表格布局专用样式，仅在 operations-view 内生效 */

#operations-view .operations-dense-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 24px;
  margin: 24px 0;
}

#operations-view .dense-section {
  background: #FFF;
  border: 1px solid #E5E8EB;
  border-radius: 8px;
  padding: 20px;
  min-width: 0;
}

#operations-view .dense-section h3 {
  font-size: 17px;
  font-weight: 500;
  margin: 0 0 16px;
  color: #0B3053;
}

#operations-view .dense-table {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #FFF;
  border: 1px solid #E5E8EB;
  border-radius: 8px;
  padding: 0;
  margin: 16px 0;
}

#operations-view .dense-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid #E5E8EB;
  min-height: 68px;
  cursor: pointer;
  transition: background 0.15s;
}

#operations-view .dense-row:last-child {
  border-bottom: 0;
}

#operations-view .dense-row:hover {
  background: #F8F9FA;
}

#operations-view .dense-row label {
  display: contents;
}

#operations-view .dense-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
}

#operations-view .dense-cell {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#operations-view .dense-cell.primary-cell {
  flex: 1;
}

#operations-view .dense-cell.primary-cell strong {
  font-size: 15px;
  font-weight: 500;
  color: #0B3053;
  line-height: 1.4;
  display: block;
}

#operations-view .dense-cell.primary-cell small {
  font-size: 13px;
  color: #66798A;
  line-height: 1.5;
  display: block;
}

#operations-view .dense-cell.primary-cell p {
  font-size: 14px;
  color: #21364A;
  line-height: 1.6;
  margin: 6px 0 0;
}

#operations-view .dense-cell.primary-cell span.done {
  text-decoration: line-through;
  color: #66798A;
}

#operations-view .dense-cell.status,
#operations-view .dense-cell.action {
  flex-shrink: 0;
  justify-content: center;
  align-items: flex-start;
}

#operations-view .dense-cell.action {
  display: flex;
  flex-direction: row;
  gap: 8px;
}

#operations-view .progress-inline {
  height: 6px;
  background: #EEF3F7;
  border-radius: 3px;
  overflow: hidden;
  margin: 12px 0 8px;
}

#operations-view .progress-inline > div {
  height: 100%;
  background: #0B3053;
  transition: width 0.3s;
}

#operations-view .operations-table {
  width: 100%;
  border-collapse: collapse;
  background: #FFF;
  border: 1px solid #E5E8EB;
  border-radius: 8px;
  overflow: hidden;
  margin: 16px 0;
}

#operations-view .operations-table thead {
  background: #F5F7F8;
}

#operations-view .operations-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #66798A;
  border-bottom: 1px solid #E5E8EB;
}

#operations-view .operations-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #E5E8EB;
  font-size: 14px;
  color: #21364A;
}

#operations-view .operations-table tbody tr:last-child td {
  border-bottom: 0;
}

#operations-view .operations-table tbody tr:hover {
  background: #F8F9FA;
}

#operations-view .operations-table .bar {
  height: 8px;
  background: #EEF3F7;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  margin-bottom: 4px;
}

#operations-view .operations-table .bar::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--bar, 0%);
  background: #0B3053;
  border-radius: 4px;
}

@media (max-width: 768px) {
  #operations-view .operations-dense-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  #operations-view .dense-row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
  }

  #operations-view .dense-cell.status,
  #operations-view .dense-cell.action {
    justify-content: flex-start;
    align-items: flex-start;
  }

  #operations-view .dense-cell.action {
    flex-direction: row;
    flex-wrap: wrap;
  }

  #operations-view .operations-table {
    display: block;
    overflow-x: auto;
  }

  #operations-view .operations-table table {
    min-width: 600px;
  }
}

#operations-view .operations-dense-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
#operations-view .dense-row{grid-template-columns:minmax(0,1fr) auto auto}
#operations-view .plan-dense{grid-template-columns:auto minmax(0,1fr) auto}
#operations-view .operations-table .bar{height:auto;min-height:22px;overflow:visible;color:#21364A;background:linear-gradient(to right,#E7EDF2 var(--bar),transparent var(--bar));padding:2px 6px}
@media(max-width:640px){#operations-view .dense-row{grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:12px}#operations-view .dense-cell.status{grid-row:2;grid-column:1}#operations-view .dense-cell.action{grid-column:2;grid-row:1 / span 2;align-self:center}#operations-view .plan-dense{grid-template-columns:auto minmax(0,1fr) auto}#operations-view .plan-dense .action{grid-column:3}#operations-view .business-tools{flex-wrap:wrap}}

/* 视频拆解：网页端以宽表为主，点击一行进入完整拆解详情文档 */
#operations-view .breakdown-toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:18px 0 12px}
#operations-view .breakdown-toolbar .business-input{width:260px}
#operations-view .breakdown-filters{display:flex;gap:6px;flex-wrap:wrap;flex:1}
#operations-view .breakdown-table-wrap{overflow:auto;border:1px solid #DDE4E8;background:#fff}
#operations-view .breakdown-table{width:100%;min-width:1060px;border-collapse:collapse;font-size:13px}
#operations-view .breakdown-table th{background:#F3F6F7;color:#66798A;font-weight:600;text-align:left;white-space:nowrap;padding:10px 12px;border-bottom:1px solid #DDE4E8}
#operations-view .breakdown-table td{padding:11px 12px;border-bottom:1px solid #E8ECEE;color:#21364A;vertical-align:top;cursor:pointer}
#operations-view .breakdown-table tbody tr:hover{background:#F8FAFB}
#operations-view .breakdown-table td b,#operations-view .breakdown-table td small{display:block;line-height:1.45}
#operations-view .breakdown-table td small{color:#71808A;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#operations-view .breakdown-table td a{color:#0B597D;white-space:nowrap}
#operations-view .quality{display:inline-flex;min-width:25px;justify-content:center;border-radius:3px;padding:2px 5px;font-weight:700;font-size:12px;background:#E9EEF1;color:#47616F}
#operations-view .quality-S{background:#E6F0E9;color:#256443}.quality-A{background:#F6EEDC;color:#876439}
#operations-view .breakdown-foot{font-size:12px;color:#71808A;padding:10px 2px}
#side-panel .detail-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 0 14px;border-bottom:1px solid #E6EBED;color:#63737D;font-size:13px}
#side-panel .detail-grid{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:12px;margin-top:12px}
#side-panel .detail-grid section{border:1px solid #E2E8EA;padding:12px;background:#FBFCFC}
#side-panel .detail-grid h3,#side-panel .shot-table+h3{margin:0 0 8px;font-size:14px;color:#0B3053}
#side-panel dl{margin:0}#side-panel dt{font-size:11px;color:#73828A;margin-top:7px}#side-panel dd{margin:2px 0 0;font-size:13px;line-height:1.55;color:#21364A}
#side-panel .preline{white-space:pre-wrap}.shot-table{width:100%;border-collapse:collapse;margin-top:8px;font-size:12px;display:block;overflow:auto}.shot-table th{background:#F3F6F7;color:#66798A;text-align:left;white-space:nowrap}.shot-table th,.shot-table td{padding:7px;border:1px solid #E1E7E9;vertical-align:top;min-width:80px}.shot-table td:nth-child(3),.shot-table td:nth-child(4){min-width:150px}
#side-panel .detail-actions{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 4px}
#side-panel .detail-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
#side-panel .detail-form-grid>div{min-width:0}
@media(max-width:800px){#side-panel .detail-grid{grid-template-columns:1fr}}
@media(max-width:520px){#side-panel .detail-form-grid{grid-template-columns:1fr}}

/* Long breakdown documents need their own reading width, independent of viewport width. */
.main{min-width:0}
.workspace-shortcut{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 0;border-block:1px solid #e2e8ea;font-size:13px;margin-bottom:12px}
#side-panel.breakdown-panel{width:min(1080px,100vw);max-width:100vw;height:100dvh;max-height:100dvh;overflow:hidden;box-sizing:border-box}
#side-panel.breakdown-panel[open]{display:grid;grid-template-rows:auto minmax(0,1fr)}
#side-panel.breakdown-panel .panel-head{position:relative;gap:16px;align-items:flex-start;padding:18px 24px;min-width:0}
#side-panel.breakdown-panel .panel-head>div{min-width:0}
#side-panel.breakdown-panel .panel-head h2{font-size:19px;line-height:1.5;overflow-wrap:anywhere}
#side-panel.breakdown-panel .panel-content{min-width:0;padding:0 24px 24px;overflow-y:auto;overscroll-behavior:contain}
#side-panel.breakdown-panel .detail-top-actions{position:sticky;top:0;z-index:2;background:#fff;padding:12px 0;margin:0;border-bottom:1px solid #e2e8ea}
#side-panel.breakdown-panel .detail-top-actions .muted{font-size:12px;margin-left:auto}
#side-panel.breakdown-panel .breakdown-section{margin:0;padding:18px 0;border-bottom:1px solid #e2e8ea;min-width:0}
#side-panel.breakdown-panel h3{font-size:14px;color:#0b3053;margin:12px 0}
#side-panel.breakdown-panel dl{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:18px;row-gap:12px;margin:0}
#side-panel.breakdown-panel dt,#side-panel.breakdown-panel dd{min-width:0;margin:0;line-height:1.75;overflow-wrap:anywhere}
#side-panel.breakdown-panel dt{font-size:12px;color:#73828a}
#side-panel.breakdown-panel dd{font-size:14px}
#side-panel.breakdown-panel .shot-table-wrap{max-width:100%;overflow:auto}
#side-panel.breakdown-panel .shot-table{display:table;table-layout:fixed;min-width:680px;margin:0;width:100%}
#side-panel.breakdown-panel .shot-table th,#side-panel.breakdown-panel .shot-table td{overflow-wrap:anywhere;min-width:0;padding:10px;line-height:1.6}
#side-panel.breakdown-panel .shot-table th:first-child{width:40px}
#side-panel.breakdown-panel .shot-table th:nth-child(2){width:110px}
#side-panel.breakdown-panel .detail-form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
#side-panel.breakdown-panel input,#side-panel.breakdown-panel textarea,#side-panel.breakdown-panel select{box-sizing:border-box;width:100%;font:inherit;font-size:14px}
#side-panel.breakdown-panel label{font-size:12px}
#side-panel.breakdown-panel textarea{min-height:76px;resize:vertical;line-height:1.65}
#side-panel.breakdown-panel #bd-copy{min-height:160px}
#side-panel.breakdown-panel .shot-edit-row{display:grid;grid-template-columns:110px repeat(3,minmax(0,1fr)) auto;gap:10px;align-items:center;border-bottom:1px solid #e2e8ea;padding:8px 0}
#side-panel.breakdown-panel .edit-save-bar{position:sticky;bottom:-24px;background:#fff;border-top:1px solid #dce4e8;padding:14px 0;margin:16px 0 0;z-index:3}
#operations-view .breakdown-table td:last-child{white-space:nowrap}
#operations-view .breakdown-table td:last-child .text-button{display:block;margin-bottom:4px}
@media(max-width:640px){
  #side-panel.breakdown-panel .panel-head{padding:12px 16px}
  #side-panel.breakdown-panel .panel-head h2{font-size:16px}
  #side-panel.breakdown-panel .panel-content{padding:0 16px 20px}
  #side-panel.breakdown-panel dl{grid-template-columns:76px minmax(0,1fr);gap:10px}
  #side-panel.breakdown-panel .detail-form-grid{grid-template-columns:1fr}
  #side-panel.breakdown-panel .shot-edit-row{grid-template-columns:1fr 1fr}
  #side-panel.breakdown-panel .detail-top-actions .muted{width:100%;margin:0}
  #side-panel.breakdown-panel .edit-save-bar{bottom:-20px}
}