.cod-control-board{
  margin:16px 0 20px;
  padding:18px;
  border:2px solid #7dd3fc;
  border-radius:20px;
  background:linear-gradient(145deg,#f0f9ff,#ecfeff);
  box-shadow:0 12px 28px rgba(14,116,144,.1);
}
.cod-control-board.is-clear{
  border-color:#a7f3d0;
  background:linear-gradient(145deg,#f0fdf4,#ecfdf5);
}
.cod-control-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}
.cod-control-head h3{
  margin:2px 0 4px;
  color:#0c4a6e;
  font-size:1.18rem;
}
.cod-control-head p{
  margin:0;
  color:#475569;
  font-size:.84rem;
}
.cod-control-head>strong{
  flex:0 0 auto;
  padding:9px 12px;
  border-radius:12px;
  background:#075985;
  color:#fff;
  font-size:.88rem;
}
.cod-control-board.is-clear .cod-control-head>strong{background:#047857}
.cod-stage-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
.cod-stage-summary article{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:4px 9px;
  align-items:center;
  padding:12px;
  border:1px solid #bae6fd;
  border-radius:14px;
  background:rgba(255,255,255,.88);
}
.cod-stage-summary small{
  grid-row:1/3;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:10px;
  background:#e0f2fe;
  color:#0369a1;
  font-weight:950;
}
.cod-stage-summary b{color:#0f172a;font-size:.86rem}
.cod-stage-summary strong{justify-self:end;color:#075985;font-size:1.1rem}
.cod-stage-summary span{grid-column:2/4;color:#64748b;font-size:.75rem}
.cod-stage-summary .collected{border-color:#fde68a;background:#fffbeb}
.cod-stage-summary .collected small{background:#fef3c7;color:#a16207}
.cod-stage-summary .remitted{border-color:#a7f3d0;background:#f0fdf4}
.cod-stage-summary .remitted small{background:#d1fae5;color:#047857}
.cod-control-list{
  display:grid;
  gap:8px;
  margin-top:12px;
}
.cod-control-row{
  display:grid;
  grid-template-columns:auto minmax(180px,1.4fr) minmax(180px,1fr) auto minmax(160px,auto);
  gap:12px;
  align-items:center;
  padding:12px;
  border:1px solid #bae6fd;
  border-radius:14px;
  background:#fff;
}
.cod-control-row.collected{border-color:#fbbf24;box-shadow:inset 4px 0 #f59e0b}
.cod-step{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#0284c7;
  color:#fff;
  font-weight:950;
}
.cod-control-row.collected .cod-step{background:#d97706}
.cod-job,.cod-state{display:flex;min-width:0;flex-direction:column}
.cod-job b,.cod-state b{overflow:hidden;color:#0f172a;text-overflow:ellipsis;white-space:nowrap}
.cod-job small,.cod-state small{overflow:hidden;color:#64748b;font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}
.cod-amount{color:#0c4a6e;white-space:nowrap}
.cod-action{min-height:40px;white-space:nowrap}
.cod-action.collected{background:linear-gradient(135deg,#0369a1,#0891b2)}
.cod-action.remitted{background:linear-gradient(135deg,#047857,#10b981)}
.cod-refusal-actions{
  display:flex;
  min-width:180px;
  flex-direction:column;
  gap:6px;
}
.cod-action.refused{
  border:1px solid #dc2626;
  background:linear-gradient(135deg,#b91c1c,#ef4444);
  color:#fff;
  font-weight:900;
}
.cod-action.refused:hover{background:linear-gradient(135deg,#991b1b,#dc2626)}
.cod-confirm-modal{
  width:min(560px,100%);
  border-top:6px solid #0891b2;
}
.cod-confirm-modal.refused{border-top-color:#dc2626}
.cod-confirm-modal.remitted{border-top-color:#10b981}
.cod-confirm-modal .modal-head p{margin:4px 0 0;color:#64748b;font-size:.78rem}
.cod-confirm-summary{
  display:flex;
  align-items:center;
  gap:13px;
  margin-top:18px;
  padding:14px;
  border:1px solid #bae6fd;
  border-radius:14px;
  background:#f0f9ff;
}
.cod-confirm-summary>span{
  display:grid;
  flex:0 0 42px;
  width:42px;
  height:42px;
  place-items:center;
  border-radius:50%;
  background:#0284c7;
  color:#fff;
  font-size:1.15rem;
  font-weight:950;
}
.cod-confirm-modal.refused .cod-confirm-summary{border-color:#fecaca;background:#fef2f2}
.cod-confirm-modal.refused .cod-confirm-summary>span{background:#dc2626}
.cod-confirm-modal.remitted .cod-confirm-summary{border-color:#a7f3d0;background:#f0fdf4}
.cod-confirm-modal.remitted .cod-confirm-summary>span{background:#059669}
.cod-confirm-summary div{display:flex;min-width:0;flex-direction:column}
.cod-confirm-summary small{color:#64748b;font-size:.72rem}
.cod-confirm-summary b{overflow:hidden;color:#0f172a;text-overflow:ellipsis;white-space:nowrap}
.cod-confirm-summary em{color:#475569;font-size:.78rem;font-style:normal}
.cod-confirm-message{margin:18px 0 10px;color:#0f172a;font-weight:900;line-height:1.55}
.cod-confirm-evidence{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:12px;background:#f8fafc;color:#475569;font-size:.8rem;line-height:1.55}
.cod-confirm-evidence b{color:#0f172a}
.cod-confirm-error{margin:12px 0 0}
.cod-confirm-error:empty{display:none}
.cod-confirm-modal .modal-actions .cod-action{min-width:210px}
.payment-summary.cod-refused{
  border-color:#fecaca;
  background:#fef2f2;
}
.payment-summary.cod-refused b{color:#b91c1c}
.payment-summary.cod-refused small{color:#7f1d1d}
.cod-waiting-action{
  max-width:190px;
  padding:8px 10px;
  border-radius:10px;
  background:#f1f5f9;
  color:#64748b;
  font-size:.75rem;
  line-height:1.35;
  text-align:center;
}
html[data-dark="true"] .cod-control-board{
  border-color:#0e7490;
  background:linear-gradient(145deg,#082f49,#083344);
}
html[data-dark="true"] .cod-control-head h3,
html[data-dark="true"] .cod-control-head p{color:#e0f2fe}
html[data-dark="true"] .cod-stage-summary article,
html[data-dark="true"] .cod-control-row{
  border-color:#155e75;
  background:#0f172a;
}
html[data-dark="true"] .cod-stage-summary b,
html[data-dark="true"] .cod-job b,
html[data-dark="true"] .cod-state b{color:#f8fafc}
html[data-dark="true"] .cod-confirm-modal{background:#0f172a}
html[data-dark="true"] .cod-confirm-summary,
html[data-dark="true"] .cod-confirm-evidence{background:#111827}
html[data-dark="true"] .cod-confirm-summary b,
html[data-dark="true"] .cod-confirm-message,
html[data-dark="true"] .cod-confirm-evidence b{color:#f8fafc}
html[data-dark="true"] .cod-confirm-summary small,
html[data-dark="true"] .cod-confirm-summary em,
html[data-dark="true"] .cod-confirm-evidence{color:#cbd5e1}
@media(max-width:980px){
  .cod-stage-summary{grid-template-columns:1fr}
  .cod-control-row{grid-template-columns:auto 1fr auto}
  .cod-state{grid-column:2/3}
  .cod-amount{grid-column:3;grid-row:1}
  .cod-control-row .cod-action,
  .cod-control-row .cod-waiting-action{grid-column:2/4;width:100%;max-width:none}
  .cod-control-row .cod-refusal-actions{
    grid-column:2/4;
    width:100%;
    min-width:0;
    flex-direction:row;
  }
  .cod-refusal-actions .cod-action{flex:1}
}
@media(max-width:640px){
  .cod-control-board{padding:13px}
  .cod-control-head{flex-direction:column}
  .cod-control-head>strong{width:100%;text-align:center}
  .cod-control-row{grid-template-columns:auto 1fr}
  .cod-amount{grid-column:2;grid-row:auto}
  .cod-control-row .cod-action,
  .cod-control-row .cod-waiting-action{grid-column:1/3}
  .cod-control-row .cod-refusal-actions{
    grid-column:1/3;
    flex-direction:column;
  }
  .cod-confirm-modal .modal-actions{flex-direction:column-reverse}
  .cod-confirm-modal .modal-actions button{width:100%}
}