.cn-jobcost{
  --jc-navy:#0b2a4b;
  --jc-blue:#1f6fae;
  --jc-line:#dbe4ee;
  --jc-soft:#f5f8fb;
  --jc-good:#16734a;
  --jc-bad:#b4232f;
  color:var(--jc-navy);
}

.cn-jc-head,
.cn-jc-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.cn-jc-head h3,
.cn-jc-section h4{
  margin:0;
}

.cn-jc-head p,
.cn-jc-section-head p{
  margin:4px 0 0;
  color:#65758a;
}

.cn-jc-actions{
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
}

.cn-jc-alerts{
  display:grid;
  gap:7px;
  margin:14px 0;
}

.cn-jc-alert{
  border:1px solid #e9b45b;
  border-radius:10px;
  background:#fff8e9;
  color:#795211;
  padding:9px 11px;
  font-size:13px;
}

.cn-jc-kpis{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:16px 0;
}

.cn-jc-kpi{
  border:1px solid var(--jc-line);
  border-radius:12px;
  background:#fff;
  padding:13px;
  min-width:0;
}

.cn-jc-kpi small,
.cn-jc-wip small{
  display:block;
  color:#697a8e;
  font-size:11px;
  font-weight:800;
  letter-spacing:.035em;
  text-transform:uppercase;
}

.cn-jc-kpi strong{
  display:block;
  margin-top:5px;
  font-size:21px;
  line-height:1.1;
}

.cn-jc-kpi span{
  display:block;
  margin-top:5px;
  color:#748397;
  font-size:11px;
}

.cn-jc-kpi.good,
.cn-jc-table .good{
  color:var(--jc-good);
}

.cn-jc-kpi.bad,
.cn-jc-table .bad{
  color:var(--jc-bad);
}

.cn-jc-kpi.final{
  border-color:#6fb393;
  background:#eff9f4;
}

.cn-jc-section{
  border:1px solid var(--jc-line);
  border-radius:14px;
  background:#fff;
  padding:15px;
  margin-top:14px;
}

.cn-jc-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.cn-jc-table{
  width:100%;
  border-collapse:collapse;
  margin-top:12px;
  font-size:12px;
}

.cn-jc-table th,
.cn-jc-table td{
  border-bottom:1px solid var(--jc-line);
  padding:8px 7px;
  text-align:left;
  vertical-align:top;
}

.cn-jc-table th{
  color:#66768a;
  font-size:10px;
  letter-spacing:.035em;
  text-transform:uppercase;
  white-space:nowrap;
}

.cn-jc-table .num{
  text-align:right;
  white-space:nowrap;
}

.cn-jc-table tfoot td{
  background:var(--jc-soft);
  font-weight:800;
}

.cn-jc-uncoded{
  background:#fff3f3;
}

.cn-jc-ignored{
  color:#7d8998;
  background:#f5f7f9;
  text-decoration:none;
  opacity:.78;
}

.cn-jc-explicit,
.cn-jc-link{
  display:inline-block;
  border-radius:999px;
  background:#e9f3fb;
  color:#155a8d;
  padding:2px 6px;
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
}

.cn-jc-form{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  align-items:end;
  margin-top:14px;
  padding:12px;
  border-radius:12px;
  background:var(--jc-soft);
}

.cn-jc-form.compact{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.cn-jc-form label,
.cn-jc-vendor-fields label{
  display:block;
  margin-bottom:4px;
  color:#586b80;
  font-size:11px;
  font-weight:800;
}

.cn-jc-form input,
.cn-jc-form select,
.cn-jc-vendor-fields select{
  width:100%;
  box-sizing:border-box;
}

.cn-jc-form-action{
  display:flex;
  align-items:flex-end;
}

.cn-jc-form-action .btn{
  width:100%;
}

.cn-jc-wip{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  margin-top:12px;
}

.cn-jc-wip>div{
  border:1px solid var(--jc-line);
  border-radius:10px;
  padding:10px;
}

.cn-jc-wip strong{
  display:block;
  margin-top:4px;
  font-size:17px;
}

.cn-jc-wip .over{
  border-color:#6aa98a;
  background:#f1faf5;
}

.cn-jc-wip .under{
  border-color:#e6a4aa;
  background:#fff4f5;
}

.cn-jc-vendor-fields{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.cn-jc-pass-through{
  border:1px solid var(--jc-line);
  border-radius:12px;
  background:var(--jc-soft);
  padding:14px;
}

.cn-jc-pass-through h3{
  margin:0 0 4px;
}

.cn-jc-pass-through p{
  margin:0;
  color:#65758a;
}

@media(max-width:1100px){
  .cn-jc-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cn-jc-form{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:760px){
  .cn-jc-kpis,
  .cn-jc-grid,
  .cn-jc-form,
  .cn-jc-form.compact,
  .cn-jc-wip,
  .cn-jc-vendor-fields{
    grid-template-columns:1fr;
  }
  .cn-jc-section{padding:11px}
  .cn-jc-table{min-width:920px}
}

@media print{
  .cn-jobcost .btn,
  .cn-jobcost form{
    display:none!important;
  }
  .cn-jc-section{
    break-inside:avoid;
    box-shadow:none;
  }
}