/* Department Sheet Report — the two run buttons, side by side.
   "Build From Dash" wears Dash's purple (#9360de, sampled from Dash itself). */

.dept-run-buttons {
  display: flex;
  gap: 10px;
  margin: 0 22px 20px;
}
.dept-run-buttons .btn-run-module {
  flex: 1;
  width: auto;
  margin: 0;
  padding: 11px 12px;
  font-size: 14px;
}

.btn-run-module.btn-dash:not(.running):not(.done):not(.errored) {
  background: linear-gradient(135deg, #7a45d1, #9360de);
  box-shadow: 0 4px 16px rgba(147, 96, 222, 0.35);
}
.btn-run-module.btn-dash:hover:not(:disabled):not(.running) {
  box-shadow: 0 8px 24px rgba(147, 96, 222, 0.45);
}

/* The Monthly tick sits over the purple button it belongs to (Build From Dash only). */
.dept-monthly {
  display: flex;
  justify-content: flex-end;
  margin: 0 22px 8px;
}
.dept-monthly label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: calc(50% - 5px);
  font-size: 12.5px;
  font-weight: 600;
  color: #6a3fb5;
  cursor: pointer;
}
.dept-monthly input { accent-color: #9360de; width: 15px; height: 15px; margin: 0; }

@media (max-width: 560px) {
  .dept-monthly label { width: auto; }
  .dept-run-buttons { flex-wrap: wrap; }
  .dept-run-buttons .btn-run-module { flex-basis: 100%; }
}

/* People Dash pays who have no row on the sheet (dept_sheet_dash_newhires.js) —
   their pay is not in GRAND TOTAL, so this is the loudest thing on the page. */
.dnh-banner {
  margin: 0 22px 20px;
  padding: 16px 18px;
  border: 2px solid #dc2626;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(254, 226, 226, 0.95), rgba(254, 242, 242, 0.9));
  box-shadow: 0 6px 22px rgba(220, 38, 38, 0.22);
  color: #7f1d1d;
  animation: dnh-pulse 2.4s ease-in-out 3;
}
@keyframes dnh-pulse {
  50% { box-shadow: 0 6px 30px rgba(220, 38, 38, 0.5); }
}
.dnh-title { font-size: 15px; font-weight: 800; line-height: 1.4; }
.dnh-sub { font-size: 12px; margin: 4px 0 10px; color: #991b1b; }
.dnh-scroll { overflow-x: auto; }
.dnh-table { width: 100%; border-collapse: collapse; font-size: 12.5px; background: rgba(255, 255, 255, 0.7); border-radius: 8px; }
.dnh-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; padding: 6px 8px; color: #991b1b; }
.dnh-table td { padding: 6px 8px; border-top: 1px solid rgba(220, 38, 38, 0.18); vertical-align: top; }
.dnh-dim { color: #b45454; font-size: 11.5px; }
.dnh-steps { margin: 10px 0 12px 18px; padding: 0; font-size: 12.5px; line-height: 1.6; }
.dnh-btn {
  border: 0; border-radius: 9px; padding: 8px 16px; cursor: pointer;
  background: #dc2626; color: #fff; font-size: 13px; font-weight: 700;
}
.dnh-btn:hover { background: #b91c1c; }
.dnh-card {
  display: block; width: 100%; margin-top: 8px; padding: 8px 10px; cursor: pointer;
  border: 2px solid #dc2626; border-radius: 8px; background: #fee2e2;
  color: #7f1d1d; font-size: 12px; font-weight: 700; text-align: left; line-height: 1.45;
}
.btn-run-module.btn-dash.done.dnh-warn {
  background: linear-gradient(135deg, #dc2626, #ef4444);
  box-shadow: 0 4px 16px rgba(220, 38, 38, 0.4);
}

/* New-hire rows the build added — calm blue, above the red "missing" banner. */
.dnh-added {
  margin: 0 22px 14px;
  padding: 14px 18px;
  border: 1.5px solid #3b82f6;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(219, 234, 254, 0.95), rgba(239, 246, 255, 0.9));
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.16);
  color: #1e3a8a;
}
.dnh-added-title { font-size: 14px; font-weight: 800; margin-bottom: 8px; }
.dnh-added .dnh-table th { color: #1d4ed8; }
.dnh-added .dnh-table td { border-top-color: rgba(37, 99, 235, 0.18); }
.dnh-added .dnh-dim, .dnh-added .dnh-sub { color: #3b5b9a; }
.dnh-added .dnh-sub { margin: 8px 0 0; }
.dnh-card.dnh-card-added { border-color: #3b82f6; background: #dbeafe; color: #1e3a8a; }